:root {
  --accent: #BB372F;
  --neutral10: #E6E6E6;
  --neutral9: #BFBFBF;
  --neutral6: #4D4D4D;
  --neutral1: #242424;

}

html, body {
  background-color: var(--neutral1);
  color: var(--neutral9);
  font-family: "Yrsa", serif;
  font-size: 16px;
}


/* Text elements */ 
h1, h2, h3, h4, h5, h6 {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  color: var(--neutral10);
}

h1 {
  font-size: 32px;
  margin-top: 10px;
  margin-bottom: 8px;
}

h2 {
  font-size: 24px;
  margin-top: 6px;
  margin-bottom: 6px;
}

h3 {
  margin-top: 8px;
  margin-bottom: 8px;
}

h4 {
  font-size: 14px;
  margin-top: 8px;
  margin-bottom: 8px;
}

p {
  margin-top: 0px;
  margin-bottom: 10px;
}

/* lists */
ul, ol {
  margin-top: 2px;
  padding-left: 16px;
}

li {margin-bottom: 2px;}

/* links and buttons */
a {
  color:var(--neutral9)
} 

a.button {
  width: fit-content;
  text-decoration: none;
  display: flex;
}

button, .linkButton {
  width:fit-content;
  margin-top: 0px;
  background-color: var(--neutral6);
  color: var(--neutral10);
  border-style: none;
  padding: 5px 10px;
  font-family: 'Archivo', sans-serif;
  font-weight: 600; 
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}

.linkButtonContainer {
  display:flex; 
  gap: 10px;
  margin-bottom: 10px;
}

/* Components */
.section {
  Opacity: 0;
}

.section.show {
  Opacity: 1;
  animation: showSection 1000ms;
}

@keyframes showSection { 
  0% {
    Opacity: 0;
  }

  100% {
    Opacity: 1;
  }
}

.page {
  margin-left: 250px;
  margin-top: 5vh;
}

.content {
  display: flex;
  flex-direction: column;
  max-width: 375px;
  gap: 10px;
}

.divider {
  border-style: solid; 
  border-color: var(--accent); 
  border-width: 1px; 
  width: 75px; 
  height: 5px;
  margin-bottom: 10px;
}

.projectHeader {
  margin-top: 10px;
  margin-bottom: 20px;
}

@media only screen and (max-width: 1224px) {
  .page {
    margin-left: 2vw;
    margin-top: 5vh;
  }
}