/*
Styles for worm loader UI elements
 */

.wormTopContainer {
    position: fixed;
    top: 96px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    aspect-ratio: 14 / 8;

    height: 90px;
}

.wormLoader {
    position: absolute;
    height: 90%;
    width: 90%;
    top: 5%;
    left: 5%;
}

.wormLoader .worm {
    position: absolute;
    top: 50%;
    height: 25%;
    aspect-ratio: 1 / 1;
    background-color: #0d5fa7;
    border-radius: 50%;
}

.wormLoader .worm1 {
    left: 0;
    animation: wormMovement 1s ease-in-out infinite;
}

.wormLoader .worm2 {
    left: 21.5%;
    animation: wormMovement 1s 0.2s ease-in-out infinite;
}

.wormLoader .worm3 {
    left: 43%;
    animation: wormMovement 1s 0.4s ease-in-out infinite;
}

.wormLoader .worm4 {
    left: 64.5%;
    animation: wormMovement 1s 0.6s ease-in-out infinite;
}

.wormLoader .worm5 {
    left: 86%;
    animation: wormMovement 1s 0.8s ease-in-out infinite;
}

/*
Animation for worm loader dots
Loops between Y movement of 0%, -150% (jumping up) and 150% (falling down), minus 50% to centre in parent
 */
@keyframes wormMovement {
    0% {
        transform: translateY(-50%);
    }

    25% {
        transform: translateY(-200%);
    }

    50% {
        transform: translateY(100%);
    }

    75% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(-50%);
    }
}