/*BASE STYLES*/
*{
    margin: 0px;
    padding: 0px;
}
body {
    background-color: rgb(8, 8, 8);
    margin: 0px;
    padding: 0px;
}
h1 {
    margin: 0px;
    padding: 0px;
}
header {
    position: fixed;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
header.background {
    background-color: rgb(21, 21, 21);
    border-style: groove;
    border-color: rgba(43, 43, 43, 0.582);
    border-width: 0px 0px 2px 0px;
}
section {
    margin: 0px;
}

/*NAV BAR STYLES*/
/*Gallery Pages header*/
.gallery-header {
    z-index: 100;
    background-color: rgb(21, 21, 21);
    border-style: groove;
    border-color: rgba(43, 43, 43, 0.582);
    border-width: 0px 0px 2px 0px;
}
nav {
    display: flex;
    justify-content: space-between;
    margin: 0px;
    padding: 0px;
}
.MPlex-Logo {
    display: inline-block;
    background-image: url("images/Logos/header-mplex-logo.svg");
    background-size: 153px;
    background-repeat: no-repeat;
    height: 60px;
    width: 155px;
    text-indent: -99999px;
    margin: 20px;
    padding: 0px;
}
/*Hamburger Menu Styles*/
.Ham-Menu-Icon {
    display: inline-block;
    background-color: rgba(251, 251, 251, 0.105);
    background-image: url("images/Icons/Ham Menu/open-menu.png");
    background-size: 60px;
    border-radius: 15px;
    height: 60px;
    width: 60px;
    text-indent: -99999px;
    margin: 20px;
    padding: 0px;
}
.Ham-Menu-Icon:hover {
    background-color: rgba(251, 251, 251, 0.229);
}
.Ham-Menu-Icon:active {
    background-color: rgba(251, 251, 251, 0.472);
}
/*Prevents clicking links when closing ham menu while clicking outside*/
.Ham-Menu-Outer-Wall{
    display: none;
}
.Ham-Menu-Outer-Wall.active {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99;
    background-color: transparent;
}
.Ham-Menu {
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: rgb(56, 56, 56);
    position: fixed;
    right: -400px;
    width: 100%;
    height: 100%;
    max-width: 400px;
    margin: 0px;
    padding: 0px;
    transition: 300ms;
}
.Ham-Menu.active {
    transition: 300ms;
    right: 0px;
}
.Close-Menu {
    display: inline-block;
    background-image: url("images/Icons/Ham Menu/close-menu.png");
    background-size: 60px;
    background-color: rgba(251, 251, 251, 0.105);
    border-radius: 35%;
    width: 60px;
    height: 60px;
    text-indent: -99999px;
    align-self: last baseline;
    margin: 10px 10px 50px;
}
.Close-Menu:hover {
    background-color: rgba(251, 251, 251, 0.229);
}
.Close-Menu:active {
    background-color: rgba(251, 251, 251, 0.472);
}
.Ham-Menu a {
    color: antiquewhite;
    margin: 5px 10px;
    padding: 5px 10px;
    border-radius: 50px;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(109, 109, 109);
    font-family: Roboto, Helvetica, sans-serif;
    font-weight: 450;
    font-size: 10pt;
    text-decoration: none;
}
.Ham-Menu a:hover {
    background-color: rgb(123, 122, 122);
}
.Ham-Menu a:hover {
    background-color: rgb(167, 166, 166);
}

/*Desktop Nav Menu Styles*/
.Desktop-Nav-Menu {
    display: none;
    color: white;
    font-family: Roboto, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: 420;
}

/*GALLERY STYLES*/
.Top-Space {
    display: inline-block;
    background-color: aliceblue;
    width: 100%;
    height: 100px;
}
.Desktop {
    display: none;
}
.Project-Gallery ul {
    display: grid;
    grid-template-columns: repeat(1, minmax(250px, 1fr) );
    margin: 25px;
    gap: 1em;
}
.Project-Gallery figure{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.Project-Gallery img{
    background-color: black;
    border-radius: 10px;
}
.Project-Gallery figcaption{
    color: rgb(129, 128, 128);
    margin: 10px;
    font-family: "Roboto", Helvetica, sans-serif;
    font-size: 12pt;
    text-align: center;
}

/*MOBILE FOOTER STYLES*/
/*Desktop footer styles in media quearies section at bottom of file*/
.Mobile-Footer {
    background-color: rgb(21, 21, 21);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0px;
    padding: 30px 20px;
}
.Desktop-Footer {
    display: none;
}
.Footer-Branding {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.MPlex-Logo-Icon {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: 10px;  
}
.Footer-Branding p {
    margin: 10px 0px;
    color: white;
    font-size: 10pt;
    font-family: Helvetica, Arial, sans-serif;
}
.Footer-Branding span {
    display: inline-block;
    background-color: white;
    margin: 0px 5px;
    width: 1px;
    height: 25px;
    position: relative;
    top: 1px;
}
.To-The-Top button {
    margin: 25px;
    background-color: transparent;
    color: white;
    border: none;
    text-decoration: underline;
    font-family: "Share Tech", Helvetica, sans-serif;
    font-size: 13pt;
}
/*Click to fly button*/
.To-The-Top button:hover {
    font-weight: 1000;
}
.To-The-Top button:active {
    color: rebeccapurple;
}
/*Socials Icons*/
.Footer-Socials ul {
    display: flex;
    justify-content:center;
    gap: 1em;
    flex-wrap: wrap;
    align-items: center;
    list-style-type: none;
    margin: 0.8em;
}
.Footer-Socials li {    
    border-radius: 8px;
    width: 25px;
    height: 25px;
    text-align: center;
}

/*MEDIA QUERIES*/
/*Mobile to Desktop Gallies DOM*/
@media screen and (min-width:1000px){
    .Mobile {
        display: none;
    }
    .Desktop {
        display: contents;
    }
}
/*Mobile to Desktop Nav Menu Switch*/
@media screen and (min-width:800px) {
    nav {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .Desktop-Nav-Menu {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2em;
        list-style-type: none;  
    }
    .Desktop-Nav-Menu a {
        display: inline-block;
        color: white;
        padding: 5px 20px;
        text-decoration: none;
        border-radius: 0.25em;
        margin: 10px;
        border-style: solid;
        border-color: rgba(255, 255, 255, 0);
        border-width: 1px;
        box-sizing:border-box;  
    }
    .Desktop-Nav-Menu a:hover {
        transform: scale(1.05);
        font-weight:1000; 
        
    }
    .Desktop-Nav-Menu a:active {
        box-sizing:border-box;
        border-style: solid;
        border-width: 1px;
        border-color: rgb(255, 255, 255);
        background-color: rgba(255, 255, 255, 0.12);
    }
    .Ham-Menu-Icon {
        display: none;
    }
}
@media screen and (min-width:960px) {
    /*Footer section changes*/
    .Mobile-Footer{
        display: none;
    }
    .Desktop-Footer {
        background-color: rgb(21, 21, 21);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 0px;
        padding: 30px 20px;
    }
    .Footer-Branding {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .Footer-Branding p  {
        color: white;
        font-size: 10pt;
        font-family: Helvetica, Arial, sans-serif;
        margin: 10px 5px;  
    }
    .MPlex-Logo-Icon {
        margin: 0px 5px 0px 10px;
    }
}