$font-edu-vic: 'Edu VIC WA NT Beginner', cursive;
$font-righteous: 'Righteous', cursive;

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

body {
  margin: 0px;
  background-color: var(--background-color);
  color: white;
}

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

.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;
      }
    }
    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;
  }
}

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