@view-transition {
    navigation: auto;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: gray;
}

/* Mobile Width -->
----------------------------------------------------------------------------------------------------------------------------/
---------------------------------------------------------------------------------------------------------------------------*/

/* Mobile Header -->
---------------------------------------------------------------------------------------------------------------------------*/

.header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1.25fr;
    background-color: rgb(118, 43, 58);
    border-bottom: 4px solid #000;
}

.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-drop {
    text-align: left;
    background-color: rgb(118, 43, 58);
}

header nav {
    display: flex;
}

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

header nav div {
    width: 52px;
    height: 52px;
    border: 2px solid rgb(154, 148, 148);
    border-radius: 34px;
    background-color: white;
}

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

/* <-- Mobile Header
---------------------------------------------------------------------------------------------------------------------------*/

/* Mobile Main -->
---------------------------------------------------------------------------------------------------------------------------*/
main {
    display: grid;
    grid-template-columns: 1fr;
}

h1 {
    text-align: center;
    font-size: 2rem;
    text-decoration: underline;
    padding: 2rem;
    background-color: #b4b4b4;
}

section {
    padding: 2rem;
    background-color: #b4b4b4;
}

h2 {
    text-indent: 2rem;
    padding: 1rem;
}

p {
    text-indent: 1.5rem;
}

/* <-- Mobile Main
---------------------------------------------------------------------------------------------------------------------------*/

/* Mobile 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;
}

/* <-- Mobile Footer
---------------------------------------------------------------------------------------------------------------------------*/

/* Tablet Width -->
----------------------------------------------------------------------------------------------------------------------------/
---------------------------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 768px) {

    /* Tablet Header -->
---------------------------------------------------------------------------------------------------------------------------*/

    .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;
    }

    /* <-- Tablet Header
---------------------------------------------------------------------------------------------------------------------------*/

    /* Tablet Main -->
---------------------------------------------------------------------------------------------------------------------------*/
    main {
        display: grid;
        grid-template-columns: 1fr 10fr 1fr;
    }

    h1 {
        grid-column: 2 / 3;
        border-left: 2px solid #000;
        border-right: 2px solid #000;
    }

    section {
        grid-column: 2 / 3;
        border-left: 2px solid #000;
        border-right: 2px solid #000;
        padding-left: 4rem;
        padding-right: 4rem;
    }

    h2 {
        text-indent: 3rem;
        padding: 1rem;
    }

    p {
        text-indent: 1.5rem;
    }

    /* <-- Tablet Main
---------------------------------------------------------------------------------------------------------------------------*/

    /* Tablet Footer -->
---------------------------------------------------------------------------------------------------------------------------*/

    /* <-- Tablet Footer
---------------------------------------------------------------------------------------------------------------------------*/

}

/* Full width -->
----------------------------------------------------------------------------------------------------------------------------/
---------------------------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 1400px) {

    /* Full Header -->
---------------------------------------------------------------------------------------------------------------------------*/

    .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;
        justify-content: space-between;
    }

    header nav div {
        width: 68px;
    }

    header nav div {
        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);
    }

    /* <-- Full Header
---------------------------------------------------------------------------------------------------------------------------*/


    /* Full Main -->
---------------------------------------------------------------------------------------------------------------------------*/
    main {
        display: grid;
        grid-template-columns: 2fr 4fr 2fr;
    }

    /* <-- Full Main
---------------------------------------------------------------------------------------------------------------------------*/

    /* Full Footer -->
---------------------------------------------------------------------------------------------------------------------------*/

    .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;
    }

    /* <-- Full Footer
---------------------------------------------------------------------------------------------------------------------------*/

}