$font-edu-vic: 'Edu VIC WA NT Beginner', cursive;
$font-righteous: 'Righteous', cursive;
$font-exo-2: 'Exo 2', 'sans-serif';

:root {
  --background-color: #76BA99;
  --logo-color: #CED89E;
  --logo-shadow-color: #ADCF9F;
}

body {
  margin: 0px;
  background-color: var(--background-color);
  color: white;
  font-family: $font-exo-2; 
  font-size: 15pt;
}

header {
  display: flex;
  justify-content: space-between;
  padding: 20px 2%;
  h1 {
    margin-top: 0px;
  }
}

.logo {
  font-family: $font-edu-vic; 
  font-size: 36pt;
  color: var(--logo-color);
  filter: drop-shadow(3px 4px 0px var(--logo-shadow-color));
  text-decoration: underline dotted;
}

nav {
  display: flex;
  align-items: center;
  font-family: $font-righteous;
  ul {
    margin: 0%;
    li {
      display: inline;
      list-style: none;
      a {
        color: var(--logo-shadow-color);
        font-size: 24pt;
        padding-left: 12pt;
        text-decoration: none;
      }
      a:hover {
        color: var(--logo-color);
        filter: drop-shadow(1px 1px 0px var(--logo-shadow-color));
        animation-name: light-up;
        animation-duration: 0.5s;
      }
    }
    li:hover {
      color: var(--logo-color);
      filter: drop-shadow(1px 1px 0px var(--logo-shadow-color));
      animation-name: light-up;
      animation-duration: 0.5s;
    }
  }
  ul.season {
    color: var(--logo-shadow-color);
    padding-left: 0px;
    font-size: 30pt;
    cursor: pointer;
  }
}

main {
  margin: 0px 25%;
}

@media (max-width: 720px) {
  main {
    margin: 0px 5%;
  }
  .hide-small {
    display: none;
  }
}

section {
  margin-bottom: 35px;
  display: flex;
  flex-direction: column;
  h2 {
    align-self: center;
    font-size: 30pt;
    margin-bottom: 0px;
  }
}

a {
  color: var(--logo-color);
}

@keyframes light-up {
  0% {
    color: var(--logo-shadow-color);
  }
  100% {
    color: var(--logo-color);
  }
}