/* Fonts */
@font-face {
    font-family: 'Charm';
    src: url('Charm/Charm-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cinzel Decorative';
    src: url('Cinzel_Decorative/CinzelDecorative-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
}

header, .hero {
    will-change: opacity;
}

header {
    text-align: center;
    font-family: 'Cinzel Decorative';
    font-size: 2rem;
    padding: 2rem;
    color: #966e02;
    opacity: 0;
    text-shadow: 4px 4px 16px #bf4600;
    animation: title 6s ease-in-out forwards;
    animation-delay: .5s;
}

@keyframes title {
    from {opacity: 0;}
    to {opacity: 1;}
}

.hero {
    background: url(the-nine.png) center / cover no-repeat;
    height: 100vh;
    font-family: 'Cinzel Decorative';
    text-align: center;
    font-size: 2rem;
    color: #bf4600;
    opacity: 0;
    animation: hero-fade 16s ease-in-out forwards;
    animation-delay: 3s;
}

@keyframes hero-fade {
    from {opacity: 0;}
    to {opacity: 1;}
}

.secrete {
    text-align: center;
    font-family: 'Charm';
    font-size: 2.125rem;
    color: black;
}

.secrete:hover {
    transition: text-shadow 4s ease;
    text-shadow: 2px 2px 8px #bf4600;
    cursor: url('flame.png') 4 4, auto;
}

footer {
    text-align: center;
    padding: 2rem;
    color: #6d6d6d;
}

footer p {
    padding-bottom: .5rem;
}

footer a{
    color: #6d6d6d;
}

@media(max-width: 768px) {
    header {
        font-size: 1rem;
        padding: 2rem 0 4rem;
    }

    .hero {
        background: url(the-nine.png) center / 120% no-repeat;
        font-size: 1rem;
        height: 40vh;
    }
}