@keyframes fadeInUp {
    0% {
        transform: translateY(0%);
        opacity: 0;
    }
    100% {
        transform: translateY(100%);
        opacity: 1;
    }
}

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

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#page-fade {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    pointer-events: none;
    animation: cinematicFade 1.8s cubic-bezier(.77, 0, .18, 1) forwards;
}

#main {
    animation: fadein 3.8s cubic-bezier(.77, 0, .18, 1) forwards;
}

@keyframes cinematicFade {
    0% {
        opacity: 1;
    }

    70% {
        opacity: .4;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

body {
        font-family: 'Articulat CF', sans-serif;
        min-height: 100dvh;
        background: url(img/bg-todo-amor.jpg) center #000;
        background-size: cover;
        background-repeat: no-repeat;
        cursor: default;
        user-select: none;
    }

    a {
        text-decoration: none;
        color: #ffef70;
    }

    .mb-75 {
        margin-bottom: 75px;
    }

    .ouca-agora {
        color: #e3dfcc;
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        text-shadow: 0px 1px 6px rgba(33, 33, 33, 0.4);
    }

    .ouca-agora strong {
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .ouca-agora a {
        color: #e3dfcc;
        font-size: 2rem;
    }

    nav {
        background: #0000007a;
        display: inline-block;
        padding: 10px 10px 7px;
        border-radius: 12px;
    }

    nav a {
        font-weight: 700;
        text-transform: uppercase;
        color: #e3dfcc;
        letter-spacing: 1px;
    }

    .gradient-top {
        background-image: linear-gradient(
            to top,
            hsla(0, 0%, 0%, 0) 0%,
            hsla(0, 0%, 0%, 0.01) 9%,
            hsla(0, 0%, 0%, 0.036) 17.1%,
            hsla(0, 0%, 0%, 0.078) 24.6%,
            hsla(0, 0%, 0%, 0.132) 31.5%,
            hsla(0, 0%, 0%, 0.194) 37.9%,
            hsla(0, 0%, 0%, 0.264) 44%,
            hsla(0, 0%, 0%, 0.338) 49.8%,
            hsla(0, 0%, 0%, 0.412) 55.4%,
            hsla(0, 0%, 0%, 0.486) 61.1%,
            hsla(0, 0%, 0%, 0.556) 66.7%,
            hsla(0, 0%, 0%, 0.618) 72.6%,
            hsla(0, 0%, 0%, 0.672) 78.8%,
            hsla(0, 0%, 0%, 0.714) 85.3%,
            hsla(0, 0%, 0%, 0.74) 92.3%,
            hsla(0, 0%, 0%, 0.75) 100%
        );
        position: absolute;
        top: 0;
        width: 100%;
        height: 50dvh;
    }

    .gradient-bottom {
        background-image: linear-gradient(
            to bottom,
            hsla(0, 0%, 0%, 0) 0%,
            hsla(0, 0%, 0%, 0.01) 9%,
            hsla(0, 0%, 0%, 0.036) 17.1%,
            hsla(0, 0%, 0%, 0.078) 24.6%,
            hsla(0, 0%, 0%, 0.132) 31.5%,
            hsla(0, 0%, 0%, 0.194) 37.9%,
            hsla(0, 0%, 0%, 0.264) 44%,
            hsla(0, 0%, 0%, 0.338) 49.8%,
            hsla(0, 0%, 0%, 0.412) 55.4%,
            hsla(0, 0%, 0%, 0.486) 61.1%,
            hsla(0, 0%, 0%, 0.556) 66.7%,
            hsla(0, 0%, 0%, 0.618) 72.6%,
            hsla(0, 0%, 0%, 0.672) 78.8%,
            hsla(0, 0%, 0%, 0.714) 85.3%,
            hsla(0, 0%, 0%, 0.74) 92.3%,
            hsla(0, 0%, 0%, 0.75) 100%
        );
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 70dvh;
    }

    .btn-outline-warning {
    --bs-btn-color: #ffef70;
    --bs-btn-border-color: #ffef70;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ffef70;
    --bs-btn-hover-border-color: #ffef70;
    --bs-btn-focus-shadow-rgb: 255, 193, 7;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffef70;
    --bs-btn-active-border-color: #ffef70;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ffef70;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ffef70;
    --bs-gradient: none;
    font-weight: 700;
    text-transform: uppercase;
    border-width: 3px;
}