/*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;
    z-index: 100;
}
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;
    z-index: 100;
}
section {
    margin: 0px;
}


/*NAV BAR STYLES*/
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 {
    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 h1 {
    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;
}
.Ham-Menu h1:hover {
    background-color: rgb(123, 122, 122);
}
.Ham-Menu h1:active {
    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;
}


/*HERO SECTION STYLES*/
.Hero-Section {
    background-color: rgb(111, 111, 111);
    background-image: url("/images/website-banner-mobile.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position:top;
    text-indent: -99999px;
    color: rgb(111, 111, 111);
    height: 170px;
}

/*PROJECT SECTIONS STYLES*/
.Projects {
    display: grid;
    grid-template-columns: repeat(1, minmax(250px, 1fr) );
    gap: 1em;
    margin: 0px;
    padding: 5vw;
}
.Projects h1 {
    color: white;
    font-size: 20pt;
    text-align: center;
    font-family: "Share Tech", Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
}
.Projects div {
    text-align: center;
    background-color: rgb(7, 7, 7);
    border-radius: 10px;
    width: 100%;
    height: 45vw;
    margin: 10px 0px;
}

.Projects figcaption {
    color: white;
    font-family: "Share Tech";
    font-size: 10pt;
    text-decoration: none;
    margin: 5px;
}
.Projects a {
    text-decoration: none;
}
.Projects div img {
    border-radius: 10px;
}
/*Project Tile Hover event styles*/
.Projects div:hover figure {
    transition: 250ms;
    transform: scale(0.95);
    z-index: -1;
}
.Projects div:active figure {
    transition: 100ms;
    transform: scale(0.95);
    z-index: -1;
}
.Projects div figure {
    transition: 250ms;
}
.Projects div:hover figure img {
    transition: 250ms;
    border-radius: 25px;
    z-index: -1;
}
.Projects div:active figure img {
    transition: 100ms;
    border-radius: 25px;
    z-index: -1;
}
.Projects div figure img{
    transition: 250ms;
}
/*End of Project Tile Hover event styles*/

.Programming div {
    display: flex;
    flex-direction: column;
    background-color: white;
    font-weight: 600;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 20pt;
    justify-content: center;
    align-items: center;
    color: rgb(0, 0, 0);
}
.Programming div p {
    padding: 0px 10px;
}


/*DETAILS SECTION STYLES*/
/*Defaults...*/
.Details {
    background-color: whitesmoke;
    padding: 15px 50px;
}
.Details h1 {
    font-size: 20pt;
    margin: 0.4em;
    text-align: center;
    font-family: "Roboto", Helvetica, sans-serif;
    font-weight: 1000;
}
.Details p {
    margin: 0.2em;
    text-align: center;
    font-size: 12pt;
    font-family: "Roboto", Helvetica, sans-serif;
    font-weight: 750;
    color: rgb(88, 88, 88);
    word-spacing: 0px;
    letter-spacing: 0px;

}


/*SOCIALS SECTIIONS*/
/*Details Section */
.Socials ul {
    display: flex;
    justify-content:center;
    gap: 1em;
    flex-wrap: wrap;
    align-items: center;
    list-style-type: none;
    margin: 0.8em;
}
.Socials li {    
    width: 80px;
    height: 80px;
    text-align: center;
}
.Socials li img {
    transition: 100ms ease-out;
}
.Socials li:hover img {
    transform: scale(0.95);
    transition: 100ms ease-in;
    border-radius: 12px;
}
.Socials li:active img {
    transform: scale(0.95);
    transition: 100ms ease-in;
    border-radius: 12px;
}
/*Footer Socials*/
.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;
}


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


/*MEDIA QUERIES*/
/*Projects Type text font size*/
@media screen and (min-width: 450px){
    .Projects{
        gap: 1em;
    }
    .Projects h1 {
        font-size: 25pt;
    }
    .Details h1 {
        font-size: 22pt;
    }
    .Details p {
        font-size: 15pt;
    } 
    .Projects div figcaption {
        font-size: 12pt;
    }
    .Hero-Section {
        height: 240px;
    }
}

/*Heo Section Adjust*/
@media screen and (min-width:650px) {
    .Hero-Section {
        background-image: url("/images/website-banner-half-res.jpg");
        height: 350px;
    }
}
/*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 li {
        display:inline-block;
        text-align: center;
        width: 140px;
        height: 25px;
        padding: 5px 20px;
        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 li:hover {
        transform: scale(1.05);
        font-weight:1000;     
    }
    .Desktop-Nav-Menu li:active {
        box-sizing: border-box;
        text-align: center;
        width: 140px;
        height: 25px;
        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;
    }
}

/*Project Tiles double column & Hero Image adjustment*/
@media screen and (min-width:960px) {
    /*Project section changes*/
    .Projects {
        grid-template-columns: repeat(2, minmax(410px, 1fr) );
        gap: 2vw;
    }
    .Projects h1 {
        grid-column: 1/-1;
        text-align: left;
        font-size: 35pt;
    }
    .Projects div {
        width: 100%;
        height: 22vw;
        margin: 10px;
    }
    .Projects div figcaption {
        font-size: 15pt;
    }
    /*Hero section changes*/
    .Hero-Section {
        background-image: url("/images/website-banner.jpg");
        height: 500px;
    }
    /*Details section changes*/
    .Details h1 {
        font-size: 28pt;
    }
    .Details p {
        font-size: 17pt;
    }
    /*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;
    }
}
/*Hero Section  Adjust*/
@media screen and (min-width:1440px) {
    .Hero-Section {
        height: 800px;
    }
    
}