html, body {
    margin: 0;
    overflow-x: clip;
}

a {
    text-decoration: none;
    color: black;
}

p, h1, h2, h3, h4, h5, h6, a, span {
    font-family: Oswald;
}

.border-bottom {
    border-bottom: solid 1px black ;
}

.border-top {
    border-top: solid 1px black ;
}

.gradient-down {
    width: 100vw;
    height: 20px;
    background-image: linear-gradient(to bottom, #c7c7c7, #4e4e4e00);
    background-size: 100% 100%;
}

.gradient-up {
    width: 100vw;
    height: 20px;
    background-image: linear-gradient(to top, #c7c7c7, #4e4e4e00);
    background-size: 100% 100%;
}

.center-self {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
}

.center-v {
    top: 50%;
    transform: translate(0, -50%);
}

.no-margin {
    margin: 0;
}

.half-width {
    width: 50%;
}
.seventy-five-width {
    width: 75%;
}
.full-width {
    width: 100%;
}

.sixtenn-nine {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 30%;
}

/* =====================
    Footer
   ===================== */

footer {
    position: relative;
    height: auto;

    background: linear-gradient(135deg, #0e0e10 0%, #1c1c22 100%);
    border-left: 4px solid #D4AF37; /* Pulls the gold from your top logo */
    border-right: 4px solid #D4AF37; /* Pulls the gold from your top logo */
    backdrop-filter: blur(10px);
}

footer h1 {
    text-align: center;
    color: white;
    font-family: Oswald;
    margin-bottom: 0;
    font-size: 5vw;
    text-decoration: underline;
}

footer .info {
    width: 100%;
    font-size: 2vw;
    color: white;
    text-align: center;
    padding-bottom: 20px;
}

footer .info p:last-child{
    margin-bottom: 0;
}

footer .info a{
    text-decoration: underline;
    color: white;
    font-size: 2vw;
}

.socials {
    position: relative;

    display: flex;
    justify-content: center;
}

.socials img{
    width: 3vw;
    margin: 0 20px;
}

/* 3. Desktop Only Configs */
@media (min-width: 721px) { 
    .mobile-only{
        display: none;
    }
    .desktop-only-seventy-five-width {
        width: 75%;
    }
    .desktop-only-half-width {
        width: 50%;
    }
}
/* 3. Mobile / Small Screens (600px and below) */
@media (max-width: 720px) { 
    footer h1 {
        margin: auto auto auto auto;
        font-size: 10vw;
    }
    footer .info a, footer .info p{
        font-size: 4vw;
    }

    .socials img{
        width: 5vw;
        margin: 0 20px;
    }
    .mobile-only-seventy-five-width {
        width: 75%;
    }

    .mobile-only-full-width {
        width: 100%;
    }
    .padding-bottom-twenty-five-mobile {
        padding-bottom: 25%;
    }
}