#menu.home {
  position: absolute;
  opacity: 0;
  animation: fadeIn 1s 0.5s ease forwards;
}

#menu.home img {
  filter: brightness(0) invert(1);
}

#menu.home a {
  color: white;
}

.center {
  text-align: center;
}


a {
  color: black;
  text-decoration: underline;
}

#gradient {
  height: 110vh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background-image: linear-gradient(#306878 0%, rgba(255, 255, 255, 0) 100%);
  animation: gradient 3s ease-out forwards;
  z-index: -1;
}

@keyframes gradient {
  from {
    opacity: 0;
    transform: translate(0, -100%);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}



.flex-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  color: white;
}

.flex-center a {
  color: white;
}

.flex-center ul a{
  color: black;
  list-style: none;
}

hr {
  margin-top: 50px;
  margin-bottom: 50px;
  /* padding-top: 10px; */
  /* margin-inline: 30px; */
  border: none;
  color: white;
  background-image: url('data:image/svg+xml;utf8,<svg data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 284.86 9.84" preserveAspectRatio="none"><path fill="%23c3e2eb" d="M1.44 7.57l11.46-.65c3.51-.2 7.1-.61 10.56.23s6.3 1.79 9.68.89c2.97-.79 5.65-2.44 8.81-1.58s5.71 2.31 8.9 1.35c2.38-.72 4.83-2.93 7.43-2.51 1.39.23 2.65 1.08 3.92 1.64 1.43.63 2.88.99 4.45.8 2.72-.33 5.26-2.35 8.04-2.06 1.51.16 2.92.91 4.37 1.3 1.72.46 3.51.52 5.27.36 3.45-.31 6.89-1.02 10.31-1.57s7.22-1.48 10.81-1.6 7.21 1.11 10.64 1.83 7.12 1.48 10.75 1.45 6.64-1.15 10.01-1.78c1.54-.29 3.17-.42 4.69.06 1.42.44 2.64 1.36 4.08 1.78 3.33.96 5.8-1.36 8.96-1.65s5.98 1.69 8.97 2.1c1.61.22 3.15.04 4.63-.65 1.27-.6 2.37-1.62 3.7-2.06 1.69-.56 3.26.85 4.77 1.42 1.25.47 2.6.59 3.92.41 2.91-.38 5.59-2.14 6.87-4.81h-2.59c1.37 3.19 4.45 5.5 7.8 6.23 1.66.36 3.38.39 5.03 0 1.96-.47 3.54-1.94 5.48-2.35 1.73-.37 2.67 1.98 4.31 2.38.86.21 1.73.02 2.51-.37.67-.34 1.39-1.18 2.16-1.27s1.63.74 2.21 1.14c.76.53 1.55 1.04 2.46 1.27 1.72.44 3.4-.1 4.96-.82 1.42-.65 2.87-1.71 4.47-1.84s3.26 1.07 4.72 1.7 3.18 1 4.58-.07c.7-.53 1.11-1.27 1.39-2.1.26-.76.25-1.64 1.23-1.61.89.03 1.81.51 2.6.88 1 .46 2 .89 3.06 1.18 2.19.58 4.47.66 6.7.3 1.07-.18 2.08-.56 3.14-.76 1.38-.26 1.96.29 2.82 1.27 1.2 1.36 2.64 2.22 4.47 2.4 4.14.39 7.89-2.64 12.02-2.06 2.36.34 4.51 1.62 6.96 1.42 1.95-.16 3.95-1.05 4.76-2.94.76-1.75-1.83-3.28-2.59-1.51-.64 1.47-2.38 1.65-3.8 1.37-2.07-.41-3.98-1.34-6.12-1.39-3.6-.08-6.78 2.04-10.32 2.15-1.89.06-2.66-.99-3.89-2.25-1.54-1.58-3.48-1.75-5.55-1.25s-4.12.99-6.35.67c-2.05-.29-3.76-1.27-5.67-1.98-1.59-.59-3.53-.82-4.9.4-.68.61-1.03 1.39-1.29 2.25-.16.53-.21 1.18-.83 1.27s-1.5-.48-2.01-.72c-.83-.4-1.65-.83-2.52-1.15-1.56-.59-3.18-.58-4.74-.03s-2.89 1.46-4.41 2.04c-1.72.65-2.73.13-4.16-.88s-3.02-1.74-4.78-1.05c-.76.3-1.34.84-2.05 1.22-.79.42-1.08-.17-1.65-.72-1.62-1.6-3.53-1.95-5.66-1.12-1.88.74-3.49 2.03-5.57 2.21-3.57.3-7.04-1.72-8.45-5.01-.43-1.01-2.13-.95-2.59 0-1.04 2.17-3.3 3.57-5.74 3.41-1.33-.09-2.38-.78-3.56-1.32-1.38-.64-2.8-.95-4.3-.52-2.61.74-4.34 3.09-7.26 2.7-2.74-.36-5.19-1.83-7.96-2.12-1.29-.14-2.57.03-3.81.42-1.5.48-3.03 1.4-4.64 1.45-1.38.04-2.54-.78-3.74-1.33-1.54-.71-3.14-1.06-4.83-1.02-3.24.08-6.27 1.35-9.44 1.84-3.59.55-7.25-.04-10.77-.75s-6.85-1.58-10.32-2.11-6.87.24-10.29.79-7.08 1.14-10.63 1.71c-1.67.27-3.34.55-5.03.54s-3.11-.47-4.65-1c-1.41-.48-2.85-.87-4.35-.74-1.41.12-2.72.61-4.03 1.11-1.24.48-2.59 1.08-3.96 1-1.49-.08-2.8-.95-4.12-1.55-2.76-1.26-5.14-1.16-7.88.09-1.16.53-2.27 1.2-3.5 1.57-1.59.47-3.04.1-4.57-.43s-3.07-1.15-4.73-1.3-3.28.23-4.83.75c-1.69.57-3.41 1.38-5.21 1.51s-3.48-.4-5.17-.86c-3.9-1.05-7.64-.96-11.64-.73l-12.46.71c-1.92.11-1.93 3.11 0 3z" data-name="Layer 1"/></svg>');

  height: 5px;
  margin-inline: 30px;
  /* width: 1000px; */
  background-position: center;
  background-repeat: repeat-x;
  background-size: contain;

}


section {
  /* TODO: Change this 10% to a variable */
  padding-inline: 20%;
  color: #1d3e47;
}

section h2 {
  /* text-align: center; */
  font-size: 1em;
  font-weight: normal;
  font-style: italic;
  margin-bottom: 20px;
}

section p {
  margin-left: 30px;
}

.smalltext {
    opacity: 1;
    margin: 20px;
    font-size: small;
    font-style: italic;
    color: #306878;
    transition: all 0.5s;
  }

  .smalltext.hidden {
    opacity: 0 ;
    transition: all 0.3s;
}

.top {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


@media screen and (max-width: 600px) {

section h2 {
  text-align: center;
  font-style: normal;
}

section p {
  margin-left: 0;
}

section {
  padding-inline: 10%;
}

.smalltext {
  height: 20ch;
}

}