:root {
    --swiper-theme-color: #ffffffc5 !important;
    --color-title: #FFB300;
    --text-shadow: rgba(0, 0, 0, 0.4) 0px 4px 5px;
}

@font-face {
    font-family: 'CinzelDecorative';
    src: url(/assets/fonts/CinzelDecorative-Regular.ttf);
}

@font-face {
    font-family: 'CormorantUnicase';
    src: url(/assets/fonts/CormorantUnicase-Regular.ttf);
}

@font-face {
    font-family: 'MedievalSharp';
    src: url(/assets/fonts/MedievalSharp-Regular.ttf);
}

@font-face {
    font-family: 'Metamorphous';
    src: url(/assets/fonts/Metamorphous-Regular.ttf);
}

@font-face {
    font-family: 'GazpachoBold';
    src: url(/assets/fonts/Gazpacho-Bold.ttf);
}

@font-face {
    font-family: 'GazpachoRegular';
    src: url(/assets/fonts/Gazpacho-Regular.ttf);
}

div {
    position: relative;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: center !important;
    z-index: 0;
}

div::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: brightness(0.7);
    z-index: -1;
}

h1, h2 {
    font-family: 'CinzelDecorative';
    color: var(--color-title) !important;
    text-shadow: var(--text-shadow);
}

p {
    font-family: 'GazpachoRegular';
    font-size: 1.2rem;
    margin-bottom: 2rem !important;
}

h3, h4 {
    font-family: 'GazpachoBold';
    font-weight: 700 !important;
    text-shadow: var(--text-shadow);
}

hr {
    height: 28px;
    background: linear-gradient(90deg, #FFB300 0%, #8B0000 100%);
    border-style: none !important;
    opacity: 100% !important;
    margin: 0 !important;
}

a {
    font-size: 18px;
    font-family: 'GazpachoBold';
    font-weight: 700;
    text-decoration: none !important;
    color: white !important;
}

a:hover {
    color: var(--color-title) !important;
}

.text-shadow {
    text-shadow: var(--text-shadow);
}

.button-join {
    padding: 3px;
    border: 4px double #FFFFFF;
    background: repeat padding-box border-box 0% 0% / auto auto scroll linear-gradient(180deg, #D89D08 0%, #ff9900 100%);
}

.button-join:hover {
    color: black !important;
    background: #FFFFFF;
    border: 3px double rgb(11, 47, 91);
}

.py-10 {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important;
}

.footer {
    background-size: cover !important;
    background-position: bottom !important;
}

.footer::before {
    filter: blur(3px) brightness(0.5);
}

.footer h4,
.footer p,
.footer a {
    font-size: 110% !important;
}

/* Telas pequenas */
@media only screen and (max-width: 767px) {
    main > div {
        padding: 1rem;
    }

    h1 {
        font-size: 10vw !important;
    }

    h2 {
        font-size: 10vw !important;
    }

    .button-join {
        font-size: 3.5vw;
    }
}

/* Telas grandes */
@media only screen and (min-width: 768px) {
    main > div {
        padding: 2rem;
    }

    h1 {
        font-size: 6rem !important;
    }

    h2 {
        font-size: 5rem !important;
    }

    .max-width {
        max-width: 900px;
    }

    .footer .about {
        margin-right: 4rem;
    }
}