body, #animation{
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

#text-div{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2vh;
    width: 100vw;
    position: fixed;

    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.5vh;
    font-weight: 800;
    color: var(--color-dark-green);
    translate: 0 20vh;
}

#text-div h1{
    width: 20vw;
    text-align: center;
    animation: text-change 2s ease-in-out forwards 1s; 
}

body{
    background-color: var(--color-bone-White);
}

#animation{
    display: flex;
    justify-content: center;
    align-items: center;
}

.square-before{
    height: var(--height);
    width: var(--height);
}

#square{
    position: absolute;
    animation: moveSquare 1s ease-in-out forwards 0.5s; 
}

#left-side{
    width: var(--side-width);
    height: var(--height);
    translate: -100%;
    animation: moveSquare-side-left 1s ease-in-out forwards 0.5s; 
}

#right-side{
    width: var(--side-width);
    height: var(--height);
    translate: 100%;
    animation: moveSquare-side-right 1s ease-in-out forwards 0.5s; 
}

.square-containers{
    background-color: var(--color-dark-green);
    height: var(--height);
}

.square-finished{
    width: var(--square-animation-size);
    height: var(--square-animation-size);
}