/* =========================================================
   RAMPAGE GAMING COMMUNITY
   GLOBAL INNER PAGE FIX
   ========================================================= */


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

html body .header {
    width: 100% !important;
    height: 76px !important;

    display: flex !important;
    align-items: center !important;

    gap: 35px !important;

    padding:
        0
        clamp(25px, 4vw, 70px) !important;

    background:
        rgba(4,8,11,.97) !important;

    border-bottom:
        1px solid
        rgba(239,35,60,.25) !important;

    position: sticky !important;
    top: 0 !important;

    z-index: 10000 !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   LOGO
   --------------------------------------------------------- */

html body .header .logo {
    display: flex !important;
    flex-direction: column !important;

    min-width: 205px !important;

    font-weight: 1000 !important;
    font-style: italic !important;

    line-height: .80 !important;

    letter-spacing: -1px !important;

    text-decoration: none !important;

    color: white !important;
}

html body .header .logo span {
    font-size: 28px !important;
    color: white !important;
}

html body .header .logo strong {
    font-size: 20px !important;
    color: #ef233c !important;
}


/* ---------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------- */

html body .header nav {
    flex: 1 !important;

    height: 100% !important;

    display: flex !important;

    align-items: stretch !important;
    justify-content: center !important;

    gap: 29px !important;
}

html body .header nav a {
    display: flex !important;

    align-items: center !important;

    color: #d9dde0 !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    text-decoration: none !important;

    border-bottom:
        3px solid
        transparent !important;

    white-space: nowrap !important;

    transition:
        color .2s,
        border-color .2s !important;
}

html body .header nav a:hover,
html body .header nav a.active {
    color: white !important;

    border-bottom-color:
        #ef233c !important;
}


/* ---------------------------------------------------------
   DISCORD BUTTON
   --------------------------------------------------------- */

html body .header .header-discord {
    background:
        linear-gradient(
            135deg,
            #f32640,
            #e51d34
        ) !important;

    border:
        1px solid
        #ff4056 !important;

    color: white !important;

    font-size: 14px !important;
    font-weight: 800 !important;

    border-radius: 6px !important;

    padding:
        14px
        22px !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    text-decoration: none !important;

    white-space: nowrap !important;
}


/* =========================================================
   INNER PAGE HEROES
   SAME SIZE / IMAGE FIT AS HOMEPAGE
   ========================================================= */

html body .wd-hero,
html body .srv-hero,
html body .community-hero,
html body .com-hero,
html body .games-hero,
html body .game-hero,
html body .events-hero,
html body .event-hero,
html body .staff-hero,
html body .store-hero,
html body .support-hero {
    position: relative !important;

    overflow: hidden !important;

    height: 430px !important;
    min-height: 430px !important;

    background-image:
        url("/assets/discord-background.png?v=10000") !important;

    background-size:
        contain !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    background-color:
        #05080b !important;
}


/* ---------------------------------------------------------
   HERO CONTENT ABOVE IMAGE
   --------------------------------------------------------- */

html body .wd-hero-content,
html body .srv-hero-content,
html body .community-hero-content,
html body .com-hero-content,
html body .games-hero-content,
html body .game-hero-content,
html body .events-hero-content,
html body .event-hero-content,
html body .staff-hero-content,
html body .store-hero-content,
html body .support-hero-content {
    position: relative !important;

    z-index: 5 !important;
}


/* ---------------------------------------------------------
   HERO OVERLAYS
   --------------------------------------------------------- */

html body .wd-hero-overlay,
html body .srv-hero-overlay,
html body .community-hero-overlay,
html body .com-hero-overlay,
html body .games-hero-overlay,
html body .game-hero-overlay,
html body .events-hero-overlay,
html body .event-hero-overlay,
html body .staff-hero-overlay,
html body .store-hero-overlay,
html body .support-hero-overlay {
    position: absolute !important;

    inset: 0 !important;

    z-index: 1 !important;

    background:
        linear-gradient(
            90deg,
            rgba(3,7,10,.82) 0%,
            rgba(3,7,10,.40) 35%,
            rgba(3,7,10,.08) 65%,
            rgba(3,7,10,0) 100%
        ) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 1050px) {

    html body .header {
        gap: 15px !important;
    }

    html body .header nav {
        gap: 15px !important;
    }

    html body .header nav a {
        font-size: 12px !important;
    }

}


@media (max-width: 850px) {

    html body .header {
        height: 70px !important;

        padding:
            0
            20px !important;
    }

    html body .header .logo {
        min-width: 0 !important;
        margin-right: auto !important;
    }

    html body .header .logo span {
        font-size: 23px !important;
    }

    html body .header .logo strong {
        font-size: 16px !important;
    }

    html body .header .mobile-menu {
        display: block !important;

        font-size: 26px !important;

        color: white !important;

        background: transparent !important;

        border: 0 !important;

        cursor: pointer !important;
    }

    html body .header nav {
        display: none !important;

        position: absolute !important;

        top: 70px !important;
        left: 0 !important;
        right: 0 !important;

        height: auto !important;

        padding: 15px 20px !important;

        flex-direction: column !important;

        background:
            #05090c !important;

        border-bottom:
            1px solid
            rgba(239,35,60,.3) !important;
    }

    html body .header nav.open {
        display: flex !important;
    }

    html body .header nav a {
        min-height: 45px !important;

        border-bottom:
            1px solid
            rgba(255,255,255,.07) !important;
    }

    html body .header .header-discord {
        display: none !important;
    }

}


@media (max-width: 600px) {

    html body .wd-hero,
    html body .srv-hero,
    html body .community-hero,
    html body .com-hero,
    html body .games-hero,
    html body .game-hero,
    html body .events-hero,
    html body .event-hero,
    html body .staff-hero,
    html body .store-hero,
    html body .support-hero {
        height: 390px !important;
        min-height: 390px !important;

        background-size:
            cover !important;
    }

}