/* letters */

@keyframes letters {
    from {
        transform: translateY(600vh) skew(45deg);
    }

    to {
        transform: translateY(0) skew(0deg);
    }
}

@keyframes letter {
    from {
        filter: blur(4px);
    }

    to {
        filter: blur(0);
    }
}

@keyframes lettershadow {
    from {
        opacity: 1;
        filter: blur(1px);
    }

    to {
        opacity: 0.2;
        filter: blur(4px);
    }
}

.Letters {
    display: flex;
    justify-content: space-evenly;
    font-size: calc(1.1vw + 1.1vh + 1.1em);

    animation-duration: 0.75s;
    animation-fill-mode: forwards;
    animation-name: letters;
}

.Letter {
    position: relative;
    bottom: -0.25em;
}

.Letter>label {
    /* color: var(--header-text-color); */
    text-shadow: 0 -1px 2px var(--header-text-shadow-color);

    animation-delay: 0.25s;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
    animation-name: letter;
}

.Letter>label:after {
    content: attr(for);
    display: block;
    position: absolute;
    transform: scaleX(1) scaleY(1.5) rotate(0deg) skew(var(--lean));
    transition: all 200ms ease-in-out;
    color: var(--header-text-color-slanted);
    filter: blur(1px);
    top: -8px;
    left: 0.25em;
    z-index: -1;

    animation-delay: 0.25s;
    animation-duration: .75s;
    animation-fill-mode: forwards;
    animation-name: lettershadow;
}