@keyframes swappingLetterGrades {
    0% {
      content:"A";
    } 
    29.9% {
        content:"A";
    }   
    30% {
        content:"B";
    }
    49.9% {
        content:"B";
    } 
    50% {
        content:"C";
    }
    59.9% {
        content:"C";
    } 
    60% {
        content:"D";
    }
    69.9% {
        content:"D";
    } 
    70% {
        content:"E";
    }
    79.9% {
        content:"E";
    }
    80% {
        content:"F";
    }
    89.9% {
        content:"F";
    }
    90% {
        content:"G";
    }
    100% {
        content:"G";
    }
  }

  @keyframes swappingLetterColors {
    0% {
        background:#6aeb42;
    }
    29.9% {
        background:#6aeb42;
    }  
    30% {
        background:#56b53a;
    }
    49.9% {
        background:#56b53a;
    }
    50% {
        background:#a1cd48;
    }
    59.9% {
        background:#a1cd48;
    }
    60% {
        background:#ddd65b;
    }
    69.9% {
        background:#ddd65b;
    }
    70% {
        background:#d7b354;
    }
    79.9% {
        background:#d7b354;
    }
    80% {
        background:#d1854c;
    }
    89.9% {
        background:#d1854c;
    }
    90% {
        background:#ce5a47;
    }
    99.9% {
        background:#ce5a47;
    }
    100% {
        background:#6aeb42;
    }
  }
  
  @keyframes swappingLetterHeights {
    0% {
        height: 50px;
    } 
    28% {
        height: 50px;
    }   
    30% {
        height: 60px;
    }
    48% {
        height: 60px;
    } 
    50% {
        height: 70px;
    }
    58% {
        height: 70px;
    } 
    60% {
        height: 80px;
    }
    68% {
        height: 80px;
    } 
    70% {
        height: 90px;
    }
    78% {
        height: 90px;
    }
    80% {
        height: 100px;
    }
    88% {
        height: 100px;
    }
    90% {
        height: 110px;
    }
    98% {
        height: 110px;
    }
    100% {
        height: 50px;
    }
  }

  @keyframes swappingLetterHeightsMobile {
    0% {
        height: 40px;
    } 
    28% {
        height: 40px;
    }   
    30% {
        height: 45px;
    }
    48% {
        height: 45px;
    } 
    50% {
        height: 50px;
    }
    58% {
        height: 50px;
    } 
    60% {
        height: 55px;
    }
    68% {
        height: 55px;
    } 
    70% {
        height: 60px;
    }
    78% {
        height: 60px;
    }
    80% {
        height: 65px;
    }
    88% {
        height: 65px;
    }
    90% {
        height: 70px;
    }
    98% {
        height: 70px;
    }
    100% {
        height: 40px;
    }
}




@keyframes upAndAway {
    0% {
    transform:translateY(-100px);
    }

    100% {
    transform: var(--up-and-away);
    }
}

@keyframes upAndAwayMobile {
    0% {
        transform:translateY(-100px);
        }
    
        100% {
            transform: scale(0.40) translateY(85px);
        }
}

@keyframes backAndForth {
    0% {
        transform:translateX(calc(-1 * var(--bubble-range)))
    }
    10% {
        transform:translateX(var(--bubble-range))
    }
    20% {
        transform:translateX(calc(-1 * var(--bubble-range)))
    }
    30% {
        transform:translateX(var(--bubble-range))
    }
    40% {
        transform:translateX(calc(-1 * var(--bubble-range)))
    }
    50% {
        transform:translateX(0px);
    }
    90% {
        transform:translateX(0px);
    }
    100% {
        transform:translateX(0px);
    }
}

@keyframes forthAndBack {
    0% {
        transform:translateX(var(--bubble-range))
    }
    10% {
        transform:translateX(calc(-1 * var(--bubble-range)))
    }
    20% {
        transform:translateX(var(--bubble-range))
    }
    30% {
        transform:translateX(calc(-1 * var(--bubble-range)))
    }
    40% {
        transform:translateX(var(--bubble-range))
    }
    50% {
        transform:translateX(0px);
    }
    90% {
        transform:translateX(0px);
    }
    100% {
        transform:translateX(0px);
    }
}


@keyframes bouncesLeft {
    0% {
        transform:translateX(-25%);
    }
    100% {
        transform:translateX(0%);
    }
}

@keyframes bouncesRight {
    0% {
        transform:translateX(25%);
    }
    100% {
        transform:translateX(0%);
    }
}

@keyframes scalesOut {
    0% {
        transform:scaleY(0);
    }
    100% {
        transform:scaleY(1);
    }
}

@keyframes fliesInLeft {
    0% {
        transform:translateX(-30%);
    }
    100% {
        transform:translateX(0%);
    }
}

@keyframes fliesInRight {
    0% {
        transform:translateX(30%);
    }
    100% {
        transform:translateX(0%);
    }
}

@keyframes splashesIn {
    0% {
        box-shadow:var(--splash-shadow) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    }
    100% {
        box-shadow:var(--splash-shadow) -5px -5px 0px 5px inset, rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    }
}

@keyframes rollReel {
    0% {
        background-position:0px 50%;
    }
    100% {
        background-position:-2371px 50%;
    }
}