@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 text-animation {
    0% {
        filter: hue-rotate(45deg);
        top: 100%
    }
    45% {
        top: 15%;
    }
    75% {
        top: 24%;
    }
    90% {
        top: 23%
    }
    99% {
        top: 25.2%
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

.startup-animation-text {
    font-family: "FuturaBoldItalic";
    font-size: 9vh;
    color: blue;
    position: fixed;
    width: 100%;
    top: 25%;
    text-align: center;
    animation: text-animation 2.5s ease-in-out, opacity-fade-in 1s;
}

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