/* Start animation section */

.start_animation {
    position: fixed;
    z-index: 99999;
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    pointer-events: none;
    user-select: none;
}

.start_box {
    position: relative;
    background-color: var(--about-color-background);
    animation: start_animation .7s cubic-bezier(1,.01,.93,.51) forwards;
    animation-delay: 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .start_box:nth-child(2), .start_box:nth-child(4) {
        animation-delay: 0.6s;
    }

    .start_box:nth-child(3) {
        animation-delay: 0.65s; 
    }

    @keyframes start_animation {
        0% {
            top: 0px;
        }
        100% {
            top: -200vh;
        }
    }

.start_box span {
    animation: start_animation_span .5s ease forwards;
    display: none;
} 

.start_box span:nth-child(2) {
    display: block;
}


@keyframes start_animation_span {
    0% {
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}