/* ==================================================
   BOXXHEADGAMING
   UNIVERSAL MAGAZINE INNER PAGES
================================================== */

:root {
    --bx-bg: #0b0b0c;
    --bx-bg2: #111214;
    --bx-card: #151619;
    --bx-card2: #191a1e;

    --bx-text: #f4f4f2;
    --bx-muted: #a1a1a5;
    --bx-dim: #727277;

    --bx-red: #ef3340;
    --bx-red-hover: #ff4855;

    --bx-rule: #303136;
    --bx-rule2: #44454a;

    --bx-page: 1500px;
}


html {
    background: var(--bx-bg);
}


body {
    margin: 0 !important;

    background:
        radial-gradient(
            circle at 35% -10%,
            rgba(255,255,255,.045),
            transparent 29%
        ),
        var(--bx-bg) !important;

    color: var(--bx-text) !important;

    font-family:
        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif !important;

    -webkit-font-smoothing: antialiased;
}


* {
    box-sizing: border-box;
}


img {
    max-width: 100%;
}


a {
    color: inherit;
}


/* ==================================================
   HIDE OLD TOP-LEVEL SITE HEADERS / NAVS
   THE NEW MAGAZINE SHELL REPLACES THEM
================================================== */

body > header:not(.bx-universal-header),
body > nav:not(.bx-inner-nav),
.site-header,
.old-header,
.main-header,
.header-old,
.legacy-header {
    display: none !important;
}


/* ==================================================
   UNIVERSAL WIDTH
================================================== */

.bx-inner-shell {
    width: min(
        var(--bx-page),
        calc(100% - 56px)
    );

    margin-left: auto;
    margin-right: auto;
}


/* ==================================================
   VERY TOP STRIP
================================================== */

.bx-inner-topline {
    min-height: 44px;

    display: flex;
    align-items: center;

    border-bottom:
        1px solid var(--bx-rule);

    color: #9c9ca1;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .15em;

    text-transform: uppercase;
}


.bx-inner-topline .bx-inner-shell {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 20px;
}


.bx-inner-topline div div {
    display: flex;
    gap: 20px;
}


.bx-inner-topline a {
    text-decoration: none;
}


.bx-inner-topline a:hover {
    color: white;
}


/* ==================================================
   HEADER
================================================== */

.bx-universal-header {
    display: block !important;

    position: relative;

    background:
        rgba(11,11,12,.98) !important;

    border-bottom:
        1px solid var(--bx-rule);

    z-index: 30;
}


.bx-inner-header-row {
    min-height: 112px;

    display: grid;

    grid-template-columns:
        minmax(310px, 390px)
        1fr
        64px;

    align-items: center;

    gap: 28px;
}


/* ==================================================
   LOGO
================================================== */

.bx-inner-brand {
    min-width: 0;
}


.bx-inner-brand img {
    width: 365px;

    max-width: 100%;
    max-height: 72px;

    object-fit: contain;
    object-position: left center;
}


.bx-inner-wordmark {
    display: inline-flex;

    text-decoration: none;

    color: white;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size:
        clamp(31px, 3vw, 51px);

    line-height: .9;

    letter-spacing: -.025em;

    text-transform: uppercase;

    transform: skew(-6deg);
}


.bx-inner-wordmark span {
    color: var(--bx-red);
}


.bx-inner-tagline {
    margin-top: 7px;

    color: #99999e;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .24em;

    text-transform: uppercase;
}


/* ==================================================
   NAVIGATION
================================================== */

.bx-inner-nav {
    display: flex !important;

    align-self: stretch;

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

    gap: 4px;

    background: transparent !important;
}


.bx-inner-nav a {
    position: relative;

    min-height: 112px;

    display: flex;

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

    padding: 0 12px;

    color: #d4d4d6;

    text-decoration: none;

    font-size: 12px;

    font-weight: 900;

    text-transform: uppercase;
}


.bx-inner-nav a::after {
    content: "";

    position: absolute;

    left: 12px;
    right: 12px;

    bottom: 24px;

    height: 3px;

    background: transparent;
}


.bx-inner-nav a:hover {
    color: white;
}


.bx-inner-nav a:hover::after {
    background: var(--bx-red);
}


/* ==================================================
   SEARCH
================================================== */

.bx-inner-search-button {
    width: 64px;
    height: 64px;

    display: grid;

    place-items: center;

    border: 0;

    border-left:
        1px solid var(--bx-rule);

    background: transparent;

    color: white;

    cursor: pointer;
}


.bx-inner-search-button span {
    width: 22px;
    height: 22px;

    position: relative;

    display: block;

    border:
        2px solid currentColor;

    border-radius: 50%;
}


.bx-inner-search-button span::after {
    content: "";

    position: absolute;

    width: 9px;
    height: 2px;

    right: -7px;
    bottom: -4px;

    background: currentColor;

    transform: rotate(45deg);
}


.bx-inner-search-panel {
    display: none;

    padding: 15px 0;

    border-top:
        1px solid var(--bx-rule);
}


.bx-inner-search-panel.open {
    display: block;
}


.bx-inner-search-form {
    display: flex;

    gap: 9px;
}


.bx-inner-search-form input {
    flex: 1;

    min-width: 0;

    min-height: 48px;

    padding: 0 15px;

    border:
        1px solid var(--bx-rule2);

    border-radius: 0 !important;

    outline: none;

    background: #151619;

    color: white;

    font-size: 15px;
}


.bx-inner-search-form input:focus {
    border-color: var(--bx-red);
}


.bx-inner-search-form button {
    min-height: 48px;

    padding: 0 23px;

    border: 0;

    border-radius: 0 !important;

    background: var(--bx-red);

    color: white;

    font-weight: 900;

    text-transform: uppercase;

    cursor: pointer;
}


.bx-inner-page-rule {
    width: min(
        var(--bx-page),
        calc(100% - 56px)
    );

    height: 4px;

    margin: 20px auto 0;

    background:
        linear-gradient(
            90deg,
            var(--bx-red) 0 68px,
            var(--bx-rule) 68px 100%
        );
}


/* ==================================================
   GLOBAL INNER PAGE CONTENT
================================================== */

body > main,
main,
.page,
.page-content,
.content,
.content-wrapper,
.main-content {
    color: var(--bx-text);
}


body > main,
main {
    width: min(
        1180px,
        calc(100% - 56px)
    );

    margin-left: auto;
    margin-right: auto;

    padding-top: 35px;
    padding-bottom: 60px;
}


/* don't force nested main width twice */
main main {
    width: 100%;
}


/* generic containers */
.container,
.wrapper,
.content-container,
.article-container,
.page-container {
    max-width: 1180px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==================================================
   PAGE HEADINGS
================================================== */

main h1,
.page-title,
.category-title,
.article-title,
.video-title,
.game-title {
    margin-top: 0;

    color: white !important;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif !important;

    font-size:
        clamp(39px, 5vw, 69px) !important;

    font-weight: 900 !important;

    line-height: .96 !important;

    letter-spacing: -.01em !important;

    text-transform: uppercase;
}


main h1::after,
.page-title::after,
.category-title::after {
    content: "";

    display: block;

    width: 70px;
    height: 6px;

    margin-top: 16px;

    background: var(--bx-red);
}


main h2 {
    color: white;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    text-transform: uppercase;

    letter-spacing: .01em;
}


main h3 {
    color: white;
}


/* ==================================================
   TEXT
================================================== */

main p,
main li {
    color: #d1d1d3;

    line-height: 1.72;
}


main article p {
    font-size: 17px;
}


small,
.meta,
.metadata,
.date,
.timestamp,
.byline {
    color: var(--bx-muted) !important;
}


/* ==================================================
   ARTICLE / STORY PAGES
================================================== */

article {
    max-width: 980px;

    margin-left: auto;
    margin-right: auto;

    background: transparent !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}


article img {
    margin-top: 18px;
    margin-bottom: 25px;

    border:
        1px solid var(--bx-rule);
}


article blockquote {
    margin:
        35px 0;

    padding:
        8px 0 8px 24px;

    border-left:
        5px solid var(--bx-red);

    color: #eee;

    font-size: 20px;

    line-height: 1.55;
}


/* ==================================================
   CARDS
================================================== */

.card,
.news-card,
.game-card,
.video-card,
.review-card,
.clip-card,
.search-result,
.story-card,
.item-card {
    overflow: hidden;

    border:
        1px solid var(--bx-rule) !important;

    border-radius:
        0 !important;

    background:
        var(--bx-card) !important;

    box-shadow:
        none !important;

    transition:
        border-color .15s ease,
        transform .15s ease;
}


.card:hover,
.news-card:hover,
.game-card:hover,
.video-card:hover,
.review-card:hover,
.clip-card:hover,
.search-result:hover,
.story-card:hover,
.item-card:hover {
    border-color:
        var(--bx-rule2) !important;
}


.card img,
.news-card img,
.game-card img,
.video-card img,
.review-card img,
.clip-card img,
.story-card img {
    object-fit: cover;
}


/* generic grids */
.grid,
.cards,
.card-grid,
.news-grid,
.game-grid,
.video-grid,
.review-grid,
.clip-grid,
.results-grid {
    gap: 18px !important;
}


/* ==================================================
   CATEGORY LABELS
================================================== */

.category,
.category-label,
.tag,
.badge,
.kicker,
.eyebrow {
    color:
        var(--bx-red) !important;

    background:
        transparent !important;

    border-radius:
        0 !important;

    font-size:
        11px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .06em !important;

    text-transform:
        uppercase !important;
}


/* ==================================================
   LINKS
================================================== */

main a {
    text-decoration-color:
        rgba(239,51,64,.5);
}


main a:hover {
    color:
        var(--bx-red);
}


/* ==================================================
   BUTTONS
================================================== */

main button,
main .button,
main .btn,
main input[type="submit"],
main a.button,
main a.btn {
    min-height: 44px;

    border-radius:
        0 !important;

    border:
        1px solid var(--bx-red) !important;

    background:
        var(--bx-red) !important;

    color:
        white !important;

    padding:
        0 18px;

    font-weight:
        900 !important;

    text-transform:
        uppercase;

    cursor: pointer;
}


main button:hover,
main .button:hover,
main .btn:hover,
main input[type="submit"]:hover {
    background:
        var(--bx-red-hover) !important;
}


/* ==================================================
   FORMS
================================================== */

main input,
main textarea,
main select {
    background:
        #151619 !important;

    color:
        white !important;

    border:
        1px solid var(--bx-rule2) !important;

    border-radius:
        0 !important;

    padding:
        11px 13px;
}


main input:focus,
main textarea:focus,
main select:focus {
    outline:
        1px solid var(--bx-red);

    border-color:
        var(--bx-red) !important;
}


/* ==================================================
   VIDEO / EMBED PAGES
================================================== */

iframe {
    max-width: 100%;
}


.video-container,
.embed-container,
.player,
.video-player,
.youtube-player {
    width: 100%;

    max-width: 1180px;

    margin-left: auto;
    margin-right: auto;

    background: black;
}


.video-container iframe,
.embed-container iframe,
.player iframe,
.video-player iframe,
.youtube-player iframe {
    width: 100%;

    aspect-ratio: 16 / 9;

    height: auto;

    border: 0;
}


/* ==================================================
   SEARCH PAGE
================================================== */

.search-result {
    margin-bottom: 14px;

    padding: 20px;
}


.search-result h2,
.search-result h3 {
    margin-top: 0;
}


/* ==================================================
   TABLES
================================================== */

table {
    width: 100%;

    border-collapse: collapse;

    background:
        var(--bx-card);
}


th {
    text-align: left;

    color: white;

    background:
        #191a1e;

    text-transform: uppercase;

    font-size: 12px;
}


th,
td {
    padding: 13px;

    border-bottom:
        1px solid var(--bx-rule);
}


/* ==================================================
   HORIZONTAL RULES
================================================== */

hr {
    border: 0;

    border-top:
        1px solid var(--bx-rule);

    margin:
        34px 0;
}


/* ==================================================
   FOOTER
================================================== */

.bx-universal-footer {
    margin-top: 40px;

    border-top:
        1px solid var(--bx-rule);

    background:
        var(--bx-bg);
}


.bx-inner-footer-main {
    min-height: 111px;

    display: grid;

    grid-template-columns:
        285px
        1fr
        auto;

    align-items: center;

    gap: 30px;
}


.bx-inner-footer-logo {
    color: white;

    font-family:
        Impact,
        "Arial Narrow",
        sans-serif;

    font-size: 27px;

    line-height: 1;

    transform:
        skew(-6deg);

    text-transform:
        uppercase;
}


.bx-inner-footer-logo span {
    color: var(--bx-red);
}


.bx-inner-footer-tag {
    margin-top: 5px;

    color: #717176;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .17em;

    text-transform: uppercase;
}


.bx-inner-footer-nav {
    display: flex;

    justify-content: center;

    gap: 23px;

    flex-wrap: wrap;
}


.bx-inner-footer-nav a {
    color:
        #b7b7ba;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        700;
}


.bx-inner-footer-nav a:hover {
    color: white;
}


.bx-inner-admin {
    min-height: 47px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 19px;

    border:
        2px solid var(--bx-red);

    color: white;

    text-decoration: none;

    font-size: 12px;

    font-weight: 900;
}


.bx-inner-admin:hover {
    background:
        var(--bx-red);
}


.bx-inner-footer-bottom {
    min-height: 59px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-top:
        1px solid var(--bx-rule);

    color:
        #727277;

    font-size:
        10px;
}


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

@media (max-width: 1120px) {

    .bx-inner-header-row {
        grid-template-columns:
            300px
            1fr
            54px;

        gap: 12px;
    }


    .bx-inner-nav a {
        padding:
            0 7px;

        font-size:
            10px;
    }

}


@media (max-width: 880px) {

    .bx-inner-shell {
        width:
            calc(100% - 30px);
    }


    .bx-inner-page-rule {
        width:
            calc(100% - 30px);
    }


    body > main,
    main {
        width:
            calc(100% - 30px);
    }


    .bx-inner-header-row {
        padding-top:
            18px;

        display:
            grid;

        grid-template-columns:
            1fr 52px;
    }


    .bx-inner-brand {
        grid-column:
            1;
    }


    .bx-inner-search-button {
        grid-column:
            2;

        grid-row:
            1;

        width:
            52px;

        height:
            52px;
    }


    .bx-inner-nav {
        grid-column:
            1 / -1;

        grid-row:
            2;

        justify-content:
            flex-start;

        overflow-x:
            auto;

        border-top:
            1px solid var(--bx-rule);

        margin-top:
            15px;
    }


    .bx-inner-nav a {
        min-height:
            54px;

        padding:
            0 12px;

        white-space:
            nowrap;

        font-size:
            11px;
    }


    .bx-inner-nav a::after {
        bottom:
            7px;
    }


    .bx-inner-footer-main {
        grid-template-columns:
            1fr auto;

        padding:
            25px 0;
    }


    .bx-inner-footer-nav {
        grid-row:
            2;

        grid-column:
            1 / -1;

        justify-content:
            flex-start;
    }

}


@media (max-width: 620px) {

    .bx-inner-shell {
        width:
            calc(100% - 22px);
    }


    .bx-inner-page-rule {
        width:
            calc(100% - 22px);
    }


    body > main,
    main {
        width:
            calc(100% - 22px);

        padding-top:
            25px;
    }


    .bx-inner-topline span {
        display: none;
    }


    .bx-inner-topline .bx-inner-shell {
        justify-content:
            flex-end;
    }


    main h1,
    .page-title,
    .category-title,
    .article-title,
    .video-title,
    .game-title {
        font-size:
            41px !important;
    }


    .bx-inner-footer-main {
        grid-template-columns:
            1fr;

        gap:
            21px;
    }


    .bx-inner-footer-nav {
        grid-row:
            auto;

        grid-column:
            auto;

        justify-content:
            flex-start;

        gap:
            15px;
    }


    .bx-inner-admin {
        justify-self:
            start;
    }


    .bx-inner-footer-bottom {
        min-height:
            74px;

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            center;

        gap:
            5px;
    }

}