: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 1.25fr;
    background-color: var(--Hd-Ft-BG-color);
    border-bottom: 4px solid var(--Hd-Ft-Content-Border);
}

.header .title {
    grid-row: 1 / 2;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

header .title-S {
    display: block;
}

header .title-M,
header .title-L {
    display: none;
}

header nav {
    display: flex;
    justify-content: space-around;
}

header nav div {
    width: 52px;
    height: 52px;
    border: 2px solid var(--Hd-Ft-Button-Border);
    border-radius: 34px;
    background-color: var(--Hd-Ft-Button-BG);
}

header nav img {
    border-radius: 32px;
    height: 48px;
    width: 48px;
}

@container fullglass (width > 767px) {

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

    .header .title {
        grid-column: 2 / 5;
    }

    header .title-M {
        display: block;
    }

    header .title-S,
    header .title-L {
        display: none;
    }

    header nav {
        grid-row: 2 / 3;
        grid-column: 1 / 6;
        display: flex;
    }

    header nav div {
        height: 68px;
        width: 148px;
    }

    header nav .Nav-Home {
        background-image: url(/img/Header/Home_Button_Expanded-M.jpg);
    }

    header nav .Nav-Gun-Models {
        background-image: url(/img/Header/Gun_Models_Button_Expanded-M.jpg);
    }

    header nav .Nav-Attachments {
        background-image: url(/img/Header/Attachments_Button_Expanded-M.jpg);
    }

    header nav .Nav-Collectables {
        background-image: url(/img/Header/Collectables_Button_Expanded-M.jpg);
    }

    header nav .Nav-Directory {
        background-image: url(/img/Header/Directory_Button_Expanded-M.jpg);
    }

    header nav img {
        height: 64px;
        width: 64px;
    }

}

@container fullglass (width > 1399px) {

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

    .header .title {
        grid-column: 2 / 7;
    }

    header .title-L {
        display: block;
    }

    header .title-M,
    header .title-S {
        display: none;
    }

    header nav {
        grid-column: 2 / 7;
    }

    header .site-nav {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        min-width: 1024px;
        max-width: 1500px;
    }

    header .site-nav .button-1 {
        grid-column: 1 / 2;
    }

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

    header .site-nav .button-3 {
        grid-column: 3 / 4;
    }

    header .site-nav .button-4 {
        grid-column: 4 / 5;
    }

    header .site-nav .button-5 {
        grid-column: 5 / 6;
    }

    header nav div {
        width: 68px;
    }

    header nav div {
        margin-inline: auto;
        transition-property: width;
        transition-duration: .5s;
        transition-timing-function: ease-in-out;
    }

    header nav div:hover {
        width: 256px;
    }

    header nav .Nav-Home {
        background-image: url(/img/Header/Home_Button_Expanded.jpg);
    }

    header nav .Nav-Gun-Models {
        background-image: url(/img/Header/Gun_Models_Button_Expanded.jpg);
    }

    header nav .Nav-Attachments {
        background-image: url(/img/Header/Attachments_Button_Expanded.jpg);
    }

    header nav .Nav-Collectables {
        background-image: url(/img/Header/Collectables_Button_Expanded.jpg);
    }

    header nav .Nav-Directory {
        background-image: url(/img/Header/Directory_Button_Expanded.jpg);
    }

}

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

footer {
    margin-top: auto;
    border-top: 4px solid #000;
}

.footer {
    display: flex;
    align-content: center;
    justify-content: center;
    background-color: rgb(118, 43, 58);
    min-height: 5rem;
}

.footer-links {
    padding: 20px;
}

.footer ul li {
    display: inline-block;
    text-decoration: none;
    padding-left: 10px;
}

.footer ul li a,
.footer ul li a:focus {
    color: gold;
    font-size: 1rem;
    text-decoration: none;
}

@container fullglass (width > 767px) {}

@container fullglass (width > 1399px) {

    .footer ul li a {
        transition-property: font-size;
        transition-duration: .4s;
        transition-timing-function: ease-in-out;
    }

    .footer ul li a:hover {
        font-size: 1.25rem;
    }
}