@keyframes coloranim{
    from {
        background-color: red;
    }
    to{
        background-color: yellow;
    }
}

@keyframes hover{
    12.5%   {transform: rotate(5deg);}
    25%     {transform: rotate(10deg);}
    37.5%   {transform: rotate(5deg);}
    50%     {transform: rotate(0deg);}
    62.5%   {transform: rotate(-5deg);}
    75%     {transform: rotate(-10deg);}
    87.5%   {transform: rotate(-5deg);}
    100%    {transform: rotate(0deg);}
}



@keyframes rainbow{
    12.5%   {background-color: #e81416;}
    25%     {background-color: #ffa500;}
    37.5%   {background-color: #faeb36;}
    50%     {background-color: #79c314;}
    62.5%   {background-color: #487de7;}
    75%     {background-color: #4b369d;}
    87.5%   {background-color: #70369d;}
    100%    {background-color: #e81416;}
}


@keyframes rotateanim{
    25%  {transform: rotate(90deg);}
    50%  {transform: rotate(180deg);}
    75%  {transform: rotate(270deg);}
    100% {transform: rotate(360deg);}
}

@keyframes linkhover{
    from{
        transform: scale(1);
    }
    to{
        transform: scale(1.2);
    }
}


/*Mobile*/
@media (width < 1120px) {
    @keyframes selector{
      from{
  
      }
      to{
          border-style: dotted dotted solid dotted;
          border-bottom-width: 6em;
          border-color: #97eb11;
      }
    }
  }
  
/*PC*/  
@media (width > 1120px) {
    @keyframes selector{
      from{
  
      }
      to{
          border-style: dotted dotted solid dotted;
          border-bottom-width: 1.5rem;
          border-color: #97eb11;
      }
    }
  }



@keyframes selector2{
      from{
  
      }
      to{
        border-style: dotted;
        border-color: #4f60d3;
        transform: scale(1.2);
        box-shadow: 15px 10px 10px #580bacad;
      }
    }




.testobject{
    width: 0.5rem;
    height: 2.5rem;
    background-color: #e81416;
    animation-name: rotateanim , rainbow;
    animation-duration: 4s, 16s;
    animation-iteration-count: infinite;
}

.rainbow{
    background-color: #ffeb00;
    animation-name: rainbow;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}