:root{
    --shadow-color: 231deg 37% 57%;
}

body{
    text-align: center;
    background-image: url("./bg.png");
}

main{
    display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
    width: var(--full-width);
    height: var(--full-height);
    margin: auto;

    > *:not(img){
        filter: var(--drop-shadow-medium);
    }
}

a{
    color: hsl(230, 38%, 58%);
}

p{
    font-size: 2rem;
    margin: var(--two-thirds-gap) auto;
    max-width: max-content;
}

p:first-of-type{
    span:first-child{font-size: 1.5em;}
    span:nth-child(2){animation-delay: 1s!important; font-size: 1.25em;};
    span:nth-child(3){animation-delay: 2s!important; font-size: 1.1em;};
    span:nth-child(4){animation-delay: 3s!important};
    span:nth-child(5){animation-delay: 4s!important};
    span:nth-child(6){animation-delay: 5s!important};
}

main > img{
    max-height: calc(var(--full-height) - 7em - 4rem - var(--double-gap));
    max-width: 66vw;
    filter: var(--drop-shadow-low);
    box-sizing: border-box;
    margin: var(--gap) auto;
    /* animation-delay: 0.5s!important; */
}

p:last-of-type{
    span:nth-child(1){animation-delay: 5.75s!important};
    span:nth-child(2){animation-delay: 6.5s!important; font-size: 1.25em;};
    b{animation-delay: 7.5s!important; font-size: 1.5em;};
    .ico{
        animation: float 1s ease-in-out alternate infinite;
        height: 0.8em;
    }
}

@keyframes float{
    from{transform: translateY(-0.1em) translateZ(0);}
    to{transform: translateY(0.1em) translateZ(0);}
}

footer{
    margin-top: 1ch;
    font-size: 0.8em;
    animation-delay: 9s!important;
}