:root {
    /* Main Colors */
    --gray: #9e8f8b;
    --smoke-black: #210f07;
    --darker-smoke-black: #140e0b;
    --dark-brown: #2d211e;
    --smoke-brown: #44302c;
    --lighter-smoke-brown: #5a4541;
    --pale-cream-orange: #d6b7a7;
    --cream-orange: #ffa585;
    --light-orange: #f96e47;
    --oho-orange: #ff4926;
    --oho-orange-dark: #a5291c;
    --smoke-gray: #968783;
    --light-gray: #ede8e6;
    --pale-orangy-gray: #ead7ca;

    --round-corners: 6px;
    --rounder-corners: 8px;

    /* VIDEO PLAYER ON LIGHT BOX THEME COLOR */
    --plyr-color-main: #ff4926 !important;

    /* MODIFY THE NAVIGATION SIDE BAR'S WIDTH HERE */
    --nav-bar-width: 8px;
}

/* FONTS */
/* Gotham */
@font-face {font-family: 'Gotham Book';src: url('../fonts/Gotham/gotham-book-webfont.woff') format('woff'), url('../fonts/Gotham/gotham-book-webfont.ttf') format('truetype'), url('../fonts/Gotham/gotham-book-webfont.svg#gothambook') format('svg');font-weight: normal;font-style: normal;}
@font-face {font-family: 'Gotham Black';src: url('../fonts/Gotham/gotham-black-webfont.woff') format('woff'), url('../fonts/Gotham/gotham-black-webfont.ttf') format('truetype'), url('../fonts/Gotham/gotham-black-webfont.svg#gothamblack') format('svg');font-weight: normal;font-style: normal;}
@font-face {font-family: 'Gotham Italic';src: url('../fonts/Gotham/gotham-blackitalic-webfont.woff') format('woff'), url('../fonts/Gotham/gotham-blackitalic-webfont.ttf') format('truetype'), url('../fonts/Gotham/gotham-blackitalic-webfont.svg#gothamitalic') format('svg');font-weight: normal;font-style: normal;}
@font-face {font-family: 'Gotham Bold';src: url('../fonts/Gotham/Gotham-Bold.otf');src: url('../fonts/Gotham/gotham-bold-webfont.woff') format('woff'), url('../fonts/Gotham/gotham-bold-webfont.ttf') format('truetype'), url('../fonts/Gotham/gotham-bold-webfont.svg#gothambold') format('svg');font-weight: normal;font-style: normal;}
@font-face {font-family: 'Gotham Light';src: url('../fonts/Gotham/gotham-light-webfont.woff') format('woff'), url('../fonts/Gotham/gotham-light-webfont.ttf') format('truetype'), url('../fonts/Gotham/gotham-light-webfont.svg#gothamlight') format('svg');font-weight: normal;font-style: normal;}
@font-face {font-family: 'Gotham Medium';src: url('../fonts/Gotham/gotham-medium-webfont.woff') format('woff'), url('../fonts/Gotham/gotham-medium-webfont.ttf') format('truetype'), url('../fonts/Gotham/gotham-medium-webfont.svg#gothammedium') format('svg');font-weight: normal;font-style: normal;}
@font-face {font-family: 'amp bold';src: url('../fonts/AMP/arsmaquettepro-bold-webfont.eot');src: url('../fonts/AMP/arsmaquettepro-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/AMP/arsmaquettepro-bold-webfont.woff') format('woff'), url('../fonts/AMP/arsmaquettepro-bold-webfont.ttf') format('truetype'), url('../fonts/AMP/arsmaquettepro-bold-webfont.svg#ars_maquette_probold') format('svg');font-weight: normal;font-style: normal;}
@font-face {font-family: 'amp medium';src: url('../fonts/AMP/arsmaquettepro-medium-webfont.eot');src: url('../fonts/AMP/arsmaquettepro-medium-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/AMP/arsmaquettepro-medium-webfont.woff') format('woff'), url('../fonts/AMP/arsmaquettepro-medium-webfont.ttf') format('truetype'), url('../fonts/AMP/arsmaquettepro-medium-webfont.svg#ars_maquette_promedium') format('svg');font-weight: normal;font-style: normal;}
/* DejaVu Serif */
@font-face {font-family: 'DejaVu Serif';src: url('../fonts/Dejavu/DejaVuSerif-Italic.woff') format('woff'), url('../fonts/Dejavu/DejaVuSerif-Italic.ttf') format('truetype'), url('../fonts/Dejavu/DejaVuSerif-Italic.svg#DejaVuSerif-Italic') format('svg');font-weight: normal;font-style: italic;font-display: swap;}
@font-face {font-family: 'DejaVu Serif';src: url('../fonts/Dejavu/DejaVuSerif.woff') format('woff'), url('../fonts/Dejavu/DejaVuSerif.ttf') format('truetype'), url('../fonts/Dejavu/DejaVuSerif.svg#DejaVuSerif') format('svg');font-weight: normal;font-style: normal;font-display: swap;}

/* Box Sizing Hack */
html { box-sizing: border-box; padding: 0px; margin: 0px; }
*, *:before, *:after { box-sizing: inherit; }

/* Index Body Styling */
body {
    background-color: var(--darker-smoke-black);
    background-image: url('../imgs/assets/index-bg.png');
    background-position: top center;
    background-attachment: fixed;
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 0px;
    margin: 0px;
    color: var(--light-gray);
    font-size: 1em;
    font-family: 'Gotham Book', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    user-select: none;
    overflow-x: hidden;
}

/* Costum Scrollbar styling */
::-webkit-scrollbar { width: var(--nav-bar-width); border: none; outline: none;}
::-webkit-scrollbar-button { display: none;}
::-webkit-scrollbar-track { background-color: transparent; border: none; outline: none;}
::-webkit-scrollbar-thumb { background-color: rgba(150, 135, 131, 0.26); outline: none; }
::-webkit-scrollbar-thumb:hover{ background-color: var(--oho-orange);}

/* General Styles */
h1, h2, h3, h4 { margin: 0px; padding: 0px; display: block; }
p { display: block; padding: 0px; margin: 0px; }
a{ outline: none; border: none; cursor: pointer; color: var(--cream-orange);}
a:hover { color: var(--light-orange); }
a:focus{ color: inherit; }

/* Top Banner */
#top-banner{
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    padding-top: 80px;
    padding-bottom: 87px;
}
    .dom-title{
        font-family: 'Gotham Medium', sans-serif;
        color: var(--light-orange);
        font-size: 14px;
        margin-bottom: 10px;
        letter-spacing: 1.3pt;
        text-align: center;
    }
    .main-title{
        font-family: 'Gotham Black', sans-serif;
        font-size: 48px;
        font-weight: normal;
        color: var(--pale-orangy-gray);
        text-align: center;
        letter-spacing: 3pt;
        margin-bottom: 22px;
        text-transform: uppercase;
        text-shadow: 0px 0px 20px rgba(249, 110, 71, 0.3);
    }
    .art-type{
        width: 100%;
        max-width: 720px;
        font-family: 'Gotham Medium', sans-serif;
        font-size: 21px;
        color: var(--cream-orange);
        text-align: center;
        margin-bottom: 25px;
    }
    .main-desc{
        width: 100%;
        max-width: 720px;
        font-family: 'Gotham Light', sans-serif;
        text-align: center;
        font-weight: 100;
        margin-bottom: 26px;
        line-height: 150%;
    }
    .tags_wrapper{
        width: 100%;
        max-width: 720px;
        display: flex;
        gap: 4px;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }
        .xp-tags{
            padding: 4px 7px;
            border-radius: 4px;
            background-color: var(--smoke-brown);
            font-family: 'Gotham Light', sans-serif;
            font-size: 12px;
        }
            .xp-tags:hover{background-color: var(--lighter-smoke-brown);}

/* Gallery Section */
.gallery-section{ padding-bottom: 40px; }

.g-wrapper{
    width: 1140px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 8px;
    column-gap: 8px;
}
    .g-wrapper .p-cont{
        overflow: hidden;
        position: relative;
        border-radius: var(--round-corners);
        background-color: var(--darker-smoke-black);
    }
        .p-cont:hover > .hue-layer{ opacity: 0; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
        .p-cont:hover > a img{ opacity: 1; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }

        .g-wrapper .hue-layer {
            width: 100%;
            height: 100%;
            background-color: var(--darker-smoke-black);
            mix-blend-mode: hue;
            position: absolute;
            z-index: 2;
            opacity: 1;
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
            -o-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
            pointer-events: none;
        }
        .g-wrapper img {
            display: block;
            position: relative;
            z-index: 1;
            width: 100%;
            opacity: 0.8;
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
            -o-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
        }

        a.gl{ display: flex; }

.logo-cont { width: 100%; height: 38px; background-image: url('../imgs/assets/oho-logo_g.png'); background-position: center; background-repeat: no-repeat; background-size: 36px 36px; opacity: 0.4; margin-bottom: 40px;}

/* ------------------- RESPONSIVE ----------------------------- */                

@media (max-width: 1123px) {
    body { padding: 0px 20px; }
    .g-wrapper{
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
    }
}