@font-face {
    font-family: 'FuturaBold';
    src: url('../fonts/FuturaBold/FuturaBold.eot');
    src: url('../fonts/FuturaBold/FuturaBold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/FuturaBold/FuturaBold.woff2') format('woff2'),
         url('../fonts/FuturaBold/FuturaBold.woff') format('woff'),
         url('../fonts/FuturaBold/FuturaBold.ttf') format('truetype'),
         url('../fonts/FuturaBold/FuturaBold.svg#FuturaBold') format('svg');
}

@font-face {
    font-family: 'FuturaBoldItalic';
    src: url('../fonts/FuturaBoldItalic/FuturaBoldItalic.eot');
    src: url('../fonts/FuturaBoldItalic/FuturaBoldItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/FuturaBoldItalic/FuturaBoldItalic.woff2') format('woff2'),
         url('../fonts/FuturaBoldItalic/FuturaBoldItalic.woff') format('woff'),
         url('../fonts/FuturaBoldItalic/FuturaBoldItalic.ttf') format('truetype'),
         url('../fonts/FuturaBoldItalic/FuturaBoldItalic.svg#FuturaBT-BoldItalic') format('svg');
}

@keyframes opacity-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes opacity-fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes char-animation {
    0% {
        filter: hue-rotate(45deg);
        top: 110vh;
        transform: scale(800%) translate(calc((var(--char-nb) - var(--half-text-len)) * 5vh));
    }
    35% {
        transform: scale(150%) translate(calc((var(--char-nb) - var(--half-text-len)) * -2vh));
    }
    45% {
        top: -20vh;
        transform: scale(110%) translate();
    }
    60% {
        transform: scale() translate(calc((var(--char-nb) - var(--half-text-len)) * 0.2vh));
    }
    75% {
        top: -1vh;
        transform: scale(100%) translate(0);
    }
    90% {
        top: -2vh;
    }
    99% {
        top: 0.2vh;
    }
    100% {
        filter: hue-rotate(360deg);
        top: 0vh;
    }
}

.startup-animation-text {
    font-family: "FuturaBoldItalic";
    font-size: 14vh;
    letter-spacing: -0.9vh;
    color: blue;
    position: fixed;
    width: 100%;
    top: 23%;
    text-align: center;
    align-items: flex-end;
    justify-content: center;
    display: flex;
}

.startup-animation-text > :nth-child(1) {
    font-size: 15vh;
}

.startup-animation-char {
    position: relative;
    opacity: 0;
    animation: char-animation   2.9s ease-in-out calc(var(--delay) * var(--char-nb) * 1ms + 1s),
               opacity-fade-in  1s               calc(var(--delay) * var(--char-nb) * 1ms + 1s),
               opacity-fade-out 1s ease-in       4.2s;
}

.startup-animation-author {
    font-family: "FuturaBold";
    font-size: 4vh;
    letter-spacing: 0.3vh;
    color: #ff00f8;
    position: fixed;
    width: 100%;
    bottom: 20%;
    text-align: center;
    white-space: nowrap;
    animation: opacity-fade-in 1s ease-in,
               opacity-fade-out 1s ease-in 4.2s;
}