html,
body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: #140a13;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 2vmax;
    overflow: hidden;
}

#holder {
    width: auto;
    height: 9vmax;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 0.45vmax;
    opacity: 0;
    transition: opacity 1.5s ease-in 0.5s;
}

#holder>div {
    height: 0.45vmax;
    width: 0.45vmax;
    border-radius: 100%;
    background-color: #f833e1;
    animation-name: wave;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 5s;
}

#rotate {
    display: grid;
    grid-template-columns: 1fr;
    opacity: 0;
    transition: opacity 1.5s ease-in;
    background-color: #971788;
    border-radius: 5vmax;
    padding: 0.5vmax 1.5vmax;
    transform-style: preserve-3d;
    animation-name: rotate3D;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 15s;
    animation-delay: 1.5s;
}

#rotate>span {
    width: auto;
    height: auto;
    z-index: 1;
    font-family: "Roboto", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
    color: #f0f0f4;
    font-size: 5vmax;
    user-select: none;
    grid-row-start: 1;
    grid-column-start: 1;
}

#rotate>span:first-child {
    transform: translatez(2vmax);
}

#rotate>span:last-child {
    opacity: 0;
    transition: opacity 1.5s ease-in 1.5s;
    transform: translatez(-2vmax) rotateX(180deg);
}

@keyframes wave {
    0% {
        transform: translateY(4.5vmax);
    }

    100% {
        transform: translateY(-4.5vmax);
    }
}

@keyframes rotate3D {
    0% {
        transform: rotate3d(1,0,0,0deg);
    }

    20%{
        transform: rotate3d(1,0,0,0deg);
    }

    40%{
        transform: rotate3d(1,0,0,180deg);
    }

    60% {
        transform: rotate3d(1,0,0,180deg);
    }
    80% {
        transform: rotate3d(1,0,0,360deg);
    }

    100%{
        transform: rotate3d(1,0,0,360deg);
    }
}