:root {
    --Hd-Ft-BG-color: rgb(118, 43, 58);
    --Hd-Ft-Button-Border: rgb(154, 148, 148);
    --Hd-Ft-Button-BG: rgb(255, 255, 255);
    --Hd-Ft-Content-Border: rgb(0, 0, 0);
    --Hd-Ft-Font_Color: gold;
}

.header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.headerBlack {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    z-index: 0;
    min-height: 40px;
    background: #000;
    background: linear-gradient(360deg, rgba(0, 0, 0, 1) 0%, rgb(39, 39, 39) 60%, rgb(68, 68, 68) 85%, rgb(84, 84, 84) 100%);
}

.headerRed {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    z-index: 0;
    min-height: 20px;
    background: #ff0000;
    background: linear-gradient(360deg, rgba(163, 0, 0, 1) 0%, rgba(255, 36, 36, 1) 24%, rgba(255, 0, 0, 1) 70%, rgba(191, 0, 0, 1) 100%);
}

.site-nav {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
    z-index: 1;
    background-color: #ff0000;
    margin: .5rem;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top: solid 3px rgba(163, 0, 0, 1);
    text-align: center;
}

.site-nav ul li {
    display: inline-block;
    text-decoration: none;
    padding-inline: 2rem;
}

.site-nav a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
}

@container fullglass (width > 767px) {
    .header {
        grid-template-columns: 1fr 3fr 1fr;
    }

    .headerBlack {
        grid-column: 1 / 4;
    }

    .headerRed {
        grid-column: 1 / 4;
    }

    .site-nav {
        grid-column: 2 / 3;
    }
}

@container fullglass (width > 1399px) {
    .header {
        grid-template-columns: 1fr 2fr 1fr;
    }
}

/* <--Header -------------------------------------------------------------------------------------------------------------------------------------------------
-------------- Footer --> */