:root {
  --primary: rgb(64, 68, 75);;
  --onPrimary: White;
  --secondary:  rgb(32, 34, 37);
  --onSecondary: white;
  --tertiary: rgb(47, 49, 54);
  --onTertiary: white;
}

html, body, main {
  font-family: Verdana;
  background-color: var(--primary);
  color: var(--onPrimary);
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

main {
  overflow-y: auto;
}

#header,#footer {
  background-color: var(--secondary);
}

.navigation-item {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 10%;
}

.navigation-item-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  list-style: none;
}

.navigation-link {
  text-decoration: none;
}

a {
  color: var(--onSecondary);
  font-style: normal;
}

a:hover {
  text-decoration: underline;
}

.markdown-body, .centered {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.markdown-body {
  padding: 5%;
}

.markdown-body ul, ol {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.markdown-body p,
.markdown-body h1,
.markdown-body h2,
.markdown-body h3, 
.markdown-body h4,
.markdown-body h5,
.markdown-body h6,
.centered-text {
  text-align: center
}

.icon {
  fill: var(--onSecondary);
}