/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #0d0107;
  color: #F5F2ED;
  font-family: Verdana;
}

a {
  color: #ac5494;
}

.hidden-text{
  opacity: 0;
  transition: 0.5s;
}
.hidden-text:hover, .hidden-text:active{
  opacity: 1;
  transition: 0.5s;
}

.changing-words::after{
  content: "";
  animation: words 7s infinite;
}
@keyframes words{
  0% { content: "changes."; }
  14.28% { content: "differentiates"; }
  28.56% { content: "alternates."; }
  42.84% { content: "shifts."; }
  57.12% { content: "modifies."; }
  71.4% { content: "adjusts."; }
  85.68% { content: "fluctuates."; }
  100% { content: "mutates."; }
}

.rainbow-text{
  user-select: none;
  background: repeating-linear-gradient(90deg, #ff74d4 0%, #E63946 12.5%, #F95738 25%, #FFBA08 37.5%, #4DAA57 50%, #2F6690 62.5%, #2F6690 75%, #9113A4 87.5%, #ff74d4 100%);
  background-size:300% 300%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: slide 100s linear infinite forwards;
  display: inline-block;
  color: #ffc300; 
}

@keyframes slide {
  0%{
    background-position: 0%;
  }
  100%{
    background-position: 600vw;
  }
}

.glow {
  color: #F1EEEE;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 2px #fff, 0 0 10px #fff, 0 0 15px #ffe169, 0 0 20px #ffe169, 0 0 25px #ffe169, 0 0 30px #ffe169, 0 0 35px #ffe169;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 15px #ffc300, 0 0 20px black, 0 0 25px #ffc300, 0 0 30px #ffc300, 0 0 35px , 0 0 40px #ffc300;
  }
}