@font-face {
    font-family: "Tinkerbell";
    src: url(../fonts/Tinkerbell.ttf);
}

body {
    font-family: "Tinkerbell";
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: #0d0d0d;
    color: #fafafa;
    animation: fadeIn 1.3s ease-in forwards;
    opacity: 0;
}

#top {
    font-size: 70px;
    margin: 0;
    animation: slideUp 1.2s ease-out forwards;
    opacity: 0;
}

h3 {
    margin: 5px 0 0;
    font-weight: normal;
    opacity: 0;
    animation: fadeInDelayed 2s ease-in forwards;
}

/* ----------------- RESPONSIVE FIX ----------------- */

/* Tablets */
@media (max-width: 900px) {
    #top {
        font-size: 50px;
    }

    h3 {
        font-size: 20px;
    }
}

/* Phones */
@media (max-width: 600px) {
    #top {
        font-size: 35px;
    }

    h3 {
        font-size: 16px;
    }
}

/* Small phones (old iPhones, cheap Androids) */
@media (max-width: 400px) {
    #top {
        font-size: 30px;
    }

    h3 {
        font-size: 14px;
    }
}

/* -------------------------------------------------- */

@keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDelayed {
    0% { opacity: 0; }
    100% { opacity: 0.7; }
}