/* ==========================================================
   BOXXHEAD GAMING — GLOBAL PUBLIC UI
   ========================================================== */

:root {

    --boxx-bg:
        #020711;

    --boxx-panel:
        #07111f;

    --boxx-panel2:
        #0a1525;

    --boxx-line:
        rgba(111,166,225,.20);

    --boxx-red:
        #ff174f;

    --boxx-pink:
        #f51b72;

    --boxx-white:
        #f7fbff;

    --boxx-muted:
        #8e9eaf;

}


html {

    background:
        var(--boxx-bg);

}


body {

    background:

        radial-gradient(
            circle at 50% 0,
            #122546 0,
            #06101e 28%,
            #020711 68%
        ) !important;

    color:
        var(--boxx-white) !important;

}


body a {

    transition:
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;

}


body a:hover {

    color:
        var(--boxx-red);

}


/* ----------------------------------------------------------
   STANDARD PUBLIC HEADER
   ---------------------------------------------------------- */

header:not(.admin-header),
.site-header,
.public-header,
.bx-mobile-header {

    background:
        rgba(2,7,17,.94) !important;

    border-color:
        var(--boxx-line) !important;

    backdrop-filter:
        blur(18px);

}


/* ----------------------------------------------------------
   CONTENT
   ---------------------------------------------------------- */

main {

    color:
        var(--boxx-white);

}


main h1,
main h2,
main h3,
main h4 {

    color:
        white;

}


main p {

    color:
        var(--boxx-muted);

}


/* ----------------------------------------------------------
   COMMON CARDS / PANELS
   ---------------------------------------------------------- */

.card,
.panel,
.content-card,
.video-card,
.game-card,
.news-card,
.review-card,
.article-card,
.watch-card {

    border-color:
        var(--boxx-line) !important;

    background:

        linear-gradient(
            145deg,
            rgba(9,21,37,.96),
            rgba(3,10,19,.97)
        ) !important;

}


/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */

button:not(.admin-button),
.btn,
.button,
.primary-button,
.btn-primary {

    border-radius:
        5px;

}


.btn-primary,
.primary-button {

    background:

        linear-gradient(
            135deg,
            var(--boxx-red),
            var(--boxx-pink)
        ) !important;

    border-color:
        var(--boxx-red) !important;

    color:
        white !important;

}


/* ----------------------------------------------------------
   FORMS
   ---------------------------------------------------------- */

main input,
main textarea,
main select {

    border:
        1px solid
        #263748 !important;

    background:
        #07111f !important;

    color:
        white !important;

}


/* ----------------------------------------------------------
   IMAGES
   ---------------------------------------------------------- */

main img {

    max-width:
        100%;

}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

footer {

    background:
        #02060d !important;

    border-color:
        var(--boxx-line) !important;

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media
(max-width: 820px) {

    main {

        width:
            calc(100% - 24px);

        margin-inline:
            auto;

    }

}