/*************
mobile first
*************/

/* animations */
@keyframes wiggle {
    0% {transform: rotate(0deg);}
    30% {transform: rotate(0);}
    31% {transform: rotate(-4deg);}
    32% {transform: rotate(0deg);}
    33% {transform: rotate(4deg);}
    34% {transform: rotate(0deg);}
    35% {transform: rotate(-4deg);}
    36% {transform: rotate(0deg);}
    37% {transform: rotate(4deg);}
    38% {transform: rotate(0deg);}
    39% {transform: rotate(-4deg);}
    40% {transform: rotate(0deg);}
    41% {transform: rotate(4deg);}
    42% {transform: rotate(0deg);}
    100% {transform: rotate(0deg);}
}
    
@keyframes jump-back-and-swim-forward {
        /* 0-20: parabolic arch y=a(x−h)^2+k
            Where:
            (h,k) is the vertex (the highest or lowest point of the parabola).
            a determines the width and direction of the parabola.
        */
    0% {transform: translateX(-0%) translateY(0%) rotate(0deg);}
    1% {transform: translateX(-1%) translateY(-1.9%) rotate(0.5deg);}
    2% {transform: translateX(-2%) translateY(-3.6%) rotate(1deg);}
    3% {transform: translateX(-3%) translateY(-5.1%) rotate(1.5deg);}
    4% {transform: translateX(-4%) translateY(-6.4%) rotate(2deg);}
    5% {transform: translateX(-5%) translateY(-7.5%) rotate(2.5deg);}
    6% {transform: translateX(-6%) translateY(-8.4%) rotate(3deg);}
    7% {transform: translateX(-7%) translateY(-9.1%) rotate(3.5deg);}
    8% {transform: translateX(-8%) translateY(-9.6%) rotate(4deg);}
    9% {transform: translateX(-9%) translateY(-9.9%) rotate(4.5deg);}
    10% {transform: translateX(-10%) translateY(-10%) rotate(5deg);}
    11% {transform: translateX(-11%) translateY(-9.9%) rotate(5.5deg);}
    12% {transform: translateX(-12%) translateY(-9.6%) rotate(6deg);}
    13% {transform: translateX(-13%) translateY(-9.1%) rotate(6.5deg);}
    14% {transform: translateX(-14%) translateY(-8.4%) rotate(7deg);}
    15% {transform: translateX(-15%) translateY(-7.5%) rotate(7.5deg);}
    16% {transform: translateX(-16%) translateY(-6.4%) rotate(8deg);}
    17% {transform: translateX(-17%) translateY(-5.1%) rotate(8.5deg);}
    18% {transform: translateX(-18%) translateY(-3.6%) rotate(9deg);}
    19% {transform: translateX(-19%) translateY(-1.9%) rotate(9.5deg);}
    20% {transform: translateX(-20%) translateY(0%) rotate(10deg);}
    21% {transform: translateX(-20%) translateY(0) rotate(0);}
    50% {transform: translateX(0) translateY(0) rotate(0deg);}
    100% {transform: translateX(0) translateY(0) rotate(0deg);}
}

@keyframes pop-in-and-out {
    0% {transform: scale(0) translateY(-120%) translateX(-3.5rem);}
    50% {transform: scale(0) translateY(-120%) translateX(-3.5rem);}
    55% {transform: scale(1.1) translateY(-120%) translateX(-3.5rem);}
    95% {transform: scale(1.1) translateY(-120%) translateX(-3.5rem);}
    100% {transform: scale(0) translateY(-120%) translateX(-3.5rem);}
}

/* classes */
.cutoff-logo-container-square-on-left {
    overflow: hidden;
    width: 4rem;
}

/* ids */

#duckdns-logo-div {
    animation-name: jump-back-and-swim-forward;
    animation-duration: 7s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-direction: forwards;
    width: 20rem;
}

#duckdns-logo {
    animation-name: wiggle;
    animation-duration: 7s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-direction: forwards;
}

#speech-bubble-quack {
    animation-name: pop-in-and-out;
    animation-duration: 7s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-direction: forwards;
    width: 4rem;
}

/*************
desktop
*************/

@media (min-width: 870px) {

    /* classes */
    .cutoff-logo-container-square-on-left {
        width: 6rem;
    }

    #speech-bubble-quack {
        width: 6rem;
    }

}