@import "https://unpkg.com/open-props@1.6.17/easings.min.css";



.scroll-watcher{
  width: 100%;
  scale: 0 1;
  animation: scroll-watcher linear;
  animation-timeline: scroll();
  transform-origin: left;
}

@keyframes scroll-watcher{
  to{scale: 1 1; }
}

.hugify:hover{
  cursor: none;
  display: inline-block;
  animation: bigger linear 0.3s forwards;
}

@keyframes bigger{
  from{scale: 1;}
  to{scale: 1.2;}
}

#presentation{
    /*display: inline-block;
    width:80%;
    height: 50%;*/
    padding-bottom:5vh
}

#flip {
    display: inline-block;
    vertical-align: middle;
    height:45px;
    overflow:hidden;
}

#flip > div > div {
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

.section{
  animation: fade-in linear forwards;
  animation-timeline: view();
  animation-range-start: cover;
  animation-range-end: 60vh;
}

#flip div:first-child {
  animation: show 10s linear infinite;
}

@keyframes fade-in{
  from{scale: 0; opacity: 0;}
  to{scale: 1; opacity: 1;}
}

@keyframes squiggly-anim{
  0%{
    filter: url('#squiggly-0');
  }
  
  25%{
    filter: url('#squiggly-1');
  }
    
  
  50%{
    filter: url('#squiggly-2');
  }
  
  75%{
    filter: url('#squiggly-3');
  }
  
  100%{
    filter: url('#squiggly-4');
  }
}

.squiggly{
  text-decoration: underline;
}
.squiggly:hover{
  animation: squiggly-anim 0.5s linear infinite;
  font-weight: heavy;
  
}
  

@keyframes show {
  0% {
    margin-top: -360px;
  }

  5% {
    margin-top: -270px;
  }

  25% {
    margin-top: -270px;
  }

  30% {
    margin-top: -180px;
  }

  50% {
    margin-top: -180px;
  }

  55% {
    margin-top: -90px;
  }

  75% {
    margin-top: -90px;
  }

  80% {
    margin-top: 0px;
  }

  99.99% {
    margin-top: 0px;
  }

  100% {
    margin-top: -360px;
  }
}

.passionate {
    color: red;
    text-shadow: 1px 1px 5px black;
    animation: passionate-emphasis 10s linear infinite;
}

@keyframes passionate-emphasis {
    0%, 100% {
      color: rgb(255, 255, 0);
    }
    33%{
      color: rgb(255, 0, 0);
    }
    66%{
      color: rgb(0, 0, 255);
    }

}
@keyframes shadow-dance {
    0%, 100% {
        text-shadow: 2px 2px 0 #ff005e, 2px 2px 0 #00d4ff;
    }
    50% {
        text-shadow: 0px 0px 0 #00d4ff, 0px 0px 0 #ff005e;
    }
}
[anim="pulse"]:not(.toggled) {
  animation: pulse var(--ease-elastic-in-1) 2s infinite alternate;
}

@keyframes pulse {
  50% {
    transform: scale(1.1);
  }
}

.spin-text {
    font-weight: bold;
    color: #fff;
    text-shadow: 
        1px 1px 0px #e63946, 
        2px 2px 0px #f77f00, 
        3px 3px 0px #fcbf49, 
        4px 4px 0px #a8dadc, 
        5px 5px 0px #457b9d;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    animation: spin-3d 4s infinite linear;
}

@keyframes spin-3d {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}


@keyframes glow {
  50% {
    box-shadow: 0 0 40px hsl(12, 100%, 60%);
  }
}

[anim="glow"]:not(.toggled) {
  animation: glow var(--ease-elastic-in-1) 5s infinite alternate;
}