* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

#links path {
  filter: brightness(60%);
  /* animation: 5s hueRotate linear; */
}

/* #links path:hover{
  filter: drop-shadow(0 0 20px white);
  animation: 0.25s brighten linear;
} */

#sepia path{
  filter: sepia(100%);
}

#sepia path:hover{
  filter: sepia(100%) drop-shadow(0 0 15px rgb(255, 235, 184));
  animation: 0.25s sepia-brighten linear;
}

#hue-rotate path{
  animation: 5s hueRotate linear infinite alternate;
}

#hue-rotate path:hover{
  filter: drop-shadow(0 0 15px rgb(255, 235, 184));
  animation: 5s hueRotate linear infinite alternate;
}

#glow-green {
  filter: drop-shadow(0 0 5px rgb(18, 155, 13));
  /* animation: 0.25s brighten-green linear; */
}

#green:hover{
  filter: drop-shadow(0 0 20px rgb(18, 155, 13));
  animation: 0.25s brighten-green linear;
}

#glow-red{
  filter: drop-shadow(0 0 5px rgb(155, 13, 13));
  /* animation: 0.25s brighten-red linear; */
}

#red:hover{
  filter: drop-shadow(0 0 20px rgb(155, 13, 13));
  animation: 0.25s brighten-red linear;
}

#glow-teal{
  filter: drop-shadow(0 0 5px rgb(72, 185, 205));
  /* animation: 0.25s brighten-teal linear; */
}

#teal:hover{
  filter: drop-shadow(0 0 20px rgb(72, 185, 205));
  animation: 0.25s brighten-teal linear;
}

#glow-orange{
  filter: drop-shadow(0 0 5px rgb(255, 173, 42));
  /* animation: 0.25s brighten-orange linear; */
}

#orange:hover{
  filter: drop-shadow(0 0 20px rgb(255, 173, 42));
  animation: 0.25s brighten-orange linear;
}

#glow-blue{
  filter: drop-shadow(0 0 5px rgb(47, 61, 255));
  /* animation: 0.25s brighten-blue linear; */
}

#blue:hover{
  filter: drop-shadow(0 0 20px rgb(47, 61, 255));
  animation: 0.25s brighten-blue linear;
}

#glow-pink{
  filter: drop-shadow(0 0 5px rgb(248, 47, 255));
  /* animation: 0.25s brighten-pink linear; */
}

#pink:hover{
  filter: drop-shadow(0 0 20px rgb(248, 47, 255));
  animation: 0.25s brighten-pink linear;
}

#glow-purple{
  filter: drop-shadow(0 0 5px rgb(117, 0, 153));
  /* animation: 0.25s brighten-purple linear; */
}

#purple:hover{
  filter: drop-shadow(0 0 20px rgb(117, 0, 153));
  animation: 0.25s brighten-purple linear;
}

#glow-yellow{
  filter: drop-shadow(0 0 5px rgb(252, 255, 47));
  /* animation: 0.25s brighten-yellow linear; */
}

#yellow:hover{
  filter: drop-shadow(0 0 20px rgb(252, 255, 47));
  animation: 0.25s brighten-yellow linear;
}

@keyframes brighten-white {
  0%{
    brightness: 60%;
    filter: drop-shadow(0 0 0px white);
  }
  100%{
    brightness: 100%;
    filter: drop-shadow(0 0 20px white);
  }
}

@keyframes brighten-green {
  0%{
    brightness: 60%;
    filter: drop-shadow(0 0 0px rgb(18, 155, 13));
  }
  100%{
    brightness: 100%;
    filter: drop-shadow(0 0 20px rgb(18, 155, 13));
  }
}

@keyframes brighten-red {
  0%{
    brightness: 60%;
    filter: drop-shadow(0 0 0px rgb(155, 13, 13));
  }
  100%{
    brightness: 100%;
    filter: drop-shadow(0 0 20px rgb(155, 13, 13));
  }
}

@keyframes brighten-teal {
  0%{
    brightness: 60%;
    filter: drop-shadow(0 0 0px rgb(72, 185, 205));
  }
  100%{
    brightness: 100%;
    filter: drop-shadow(0 0 20px rgb(72, 185, 205));
  }
}

@keyframes brighten-orange {
  0%{
    brightness: 60%;
    filter: drop-shadow(0 0 0px rgb(255, 173, 42));
  }
  100%{
    brightness: 100%;
    filter: drop-shadow(0 0 20px rgb(255, 173, 42));
  }
}

@keyframes brighten-blue {
  0%{
    brightness: 60%;
    filter: drop-shadow(0 0 0px rgb(47, 61, 255));
  }
  100%{
    brightness: 100%;
    filter: drop-shadow(0 0 20px rgb(47, 61, 255));
  }
}

@keyframes brighten-purple {
  0%{
    brightness: 60%;
    filter: drop-shadow(0 0 0px rgb(117, 0, 153));
  }
  100%{
    brightness: 100%;
    filter: drop-shadow(0 0 20px rgb(117, 0, 153));
  }
}

@keyframes brighten-pink {
  0%{
    brightness: 60%;
    filter: drop-shadow(0 0 0px rgb(248, 47, 255));
  }
  100%{
    brightness: 100%;
    filter: drop-shadow(0 0 20px rgb(248, 47, 255));
  }
}

@keyframes brighten-yellow {
  0%{
    brightness: 60%;
    filter: drop-shadow(0 0 0px rgb(252, 255, 47));
  }
  100%{
    brightness: 100%;
    filter: drop-shadow(0 0 20px rgb(252, 255, 47));
  }
}

#new-things-button:hover #new-things-button-text{
  pointer-events: none;
  filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 60px #f0f) drop-shadow(0 0 90px #0ff);
  animation: 0.25s brighten-text linear;
}

#gallery-button:hover #gallery-button-text{
  pointer-events: none;
  filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 60px #f0f) drop-shadow(0 0 90px #0ff);
  animation: 0.25s brighten-text linear;
}

#about-button:hover #about-button-text{
  pointer-events: none;
  filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 60px #f0f) drop-shadow(0 0 90px #0ff);
  animation: 0.25s brighten-text linear;
}

#sepia-button:hover{
  filter: sepia(100%);
  animation: 0.25s sepia linear;
}

#sepia-button:hover #sepia-button-text{
  pointer-events: none;
  filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 60px #f0f) drop-shadow(0 0 90px #0ff);
  animation: 0.25s brighten-text linear;
}

#glow-button:hover #glow-button-text{
  pointer-events: none;
  filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 60px #f0f) drop-shadow(0 0 90px #0ff);
  animation: 0.25s brighten-text linear;
}

#hue-rotate-button:hover{
  animation: 3s hueRotate linear infinite alternate;
}

#hue-rotate-button:hover #hue-rotate-button-text{
  pointer-events: none;
  filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 60px #f0f) drop-shadow(0 0 90px #0ff);
  animation: 0.25s brighten-text linear;
}

#egg{
  filter: brightness(60%);
}

#nest-tile:hover #egg{
  filter: brightness(100%);
  filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 60px #f0f) drop-shadow(0 0 90px #0ff);
}

#my-friends {
  filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px rgb(255, 255, 165)) drop-shadow(0 0 30px rgb(254, 255, 237));
}

#mySvg{
  position: fixed;
}

#wall{
  filter: brightness(60%);
}

#title-back {
  filter: drop-shadow(0 0 20px white);
  /* filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px rgb(255, 255, 165)) drop-shadow(0 0 30px rgb(254, 255, 237)); */
}

#title {
  stroke-dasharray: 2160.57;
  animation: 3s fillSvg linear;
}

@keyframes fillSvg {
  0%{
    stroke-dashoffset: 2160.57; 
  }
  100%{
    stroke-dashoffset: 0;
  }
}



@keyframes brighten-text {
  0%{
    brightness: 60%;
    filter: drop-shadow(0 0 0px white);
  }
  100%{
    brightness: 100%;
    filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 60px #f0f) drop-shadow(0 0 90px #0ff);
  }
}

@keyframes hueRotate {
  0%{
    filter: hue-rotate(0deg);
  }
  100%{
    filter: hue-rotate(359deg);
  }
}

@keyframes sepia-brighten {
  0%{
    filter: sepia(100%);
  }
  100%{
    filter: sepia(100%) drop-shadow(0 0 20px rgb(255, 235, 184));
  }
}