body
{
    margin: 0%;
    overflow-x: hidden;
}

#lp-container
{
    display: flex;
    grid-template-columns: auto;
    grid-template-rows: auto;
    align-items: center;
    justify-content: center;
    background-color: black;

    height: 100vh;
    width: 100vw;
   
}

#lp-logo
{
    display: flex;
    gap: 0.5vw;
    /* display: grid;
    grid-template-columns: auto auto auto auto ;
    grid-template-rows: 1fr;
    grid-template-areas: 
    "xx ee rr oo"; */
    justify-items: center;
    align-items: center;

    height: 9vw;
    width: max-content;
    overflow: visible;
}

#X
{
    grid-area: xx;
    height: 100%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-items: center;
    margin: 0px; 
    animation: blinkX;
    animation-delay: calc((var(--DAtime))*(0.3s));
    animation-duration: var(--Atime);
    animation-iteration-count: infinite;
}

#E
{
    /* background-color: grey; */
    grid-area: ee;
    height: 100%;
    aspect-ratio: 1/2;
    display: flex;
    align-items: center;
    justify-items: center;
    margin: 0px;
    animation: blinkX;
    animation-delay: calc((var(--DAtime))*(0.2s));
    animation-duration: var(--Atime);
    animation-iteration-count: infinite;
}

#R
{
    grid-area: rr;
    height: 100%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-items: center;
    margin: 0px;
    animation: blinkX;
    animation-delay: calc((var(--DAtime))*(0.1s));
    animation-duration: var(--Atime);
    animation-iteration-count: infinite;
}

#O
{
    grid-area: oo;
    height: 100%;
    aspect-ratio: 1/2;
    display: flex;
    align-items: center;
    justify-items: center;
    margin: 0px;
    animation: blinkX;
    animation-delay: calc((var(--DAtime))*(0.0s));
    animation-duration: var(--Atime);
    animation-iteration-count: infinite;
    
}

:root
{
    --Atime : 2s;
    --DAtime : 1;
}

@keyframes blinkX
{
    0%
    {
        transform: translatex(-100vw);
        opacity: 0;
    }
    10%
    {
        opacity: 0;
    }
    25%
    {
        opacity: 1;
        transform: translatex(0px);
    }
    30%
    {
        opacity: 1;
        transform: translatex(0px);
        filter: sepia(0);
    }
    35%
    {
        opacity: 1;
        transform: translatex(0px);
        filter: sepia(100);
    }
    45%
    {
        opacity: 1;
        transform: translate(0px);
        filter: sepia(100);
    }
    60%
    {
        opacity: 1;
        transform: translate(0px);
        filter: sepia(0);
    }
    75%
    {
        opacity: 1;
        transform: translatex(0px);
    }
    85%
    {
        opacity: 0;
    }
    100%
    {
        transform: translate(100vw);
        opacity: 0;
    }
    
}