:root{
    --darkColor: #2A2A2A;
    --lightColor: #CDCDCD;
    --lineColor: #606060;
}

*{
    font-family: "Orbitron", serif;
    font-weight: 800;
    font-style: normal;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

/*--DARKMODE&LIGHTMODE--*/
.dark-mode{
    background-image: url("images/darknoise.svg");
    color: var(--lightColor);
}

.light-mode{
    background-image: url("images/whitenoise.svg");
    color: var(--darkColor);
}

/*MOBILE FIRST*/
@media only screen and (max-width: 768px) {

    body{
        min-width: 360px;
        min-height: 380px;
        text-wrap: nowrap;
    }

    /*--GENERAL--*/
    .wrapper{
        display: flex;
        flex-direction: column;
        padding-left:40px;
        padding-right:40px;
    }

    #main-content{
        display: block;
    }

    section{
        padding: 50px 0;
    }

    /*--NAV BAR--*/
    #side-header{
        position: sticky;
        top:0;
        z-index: 999; 
    }

    #mobile-header{
        display: flex;
        flex-direction: row;
        min-width: 280px;
        padding-top: 30px;
        padding-bottom: 20px;
    }

    #title{
        width:100%;
    }

    #side-header, #title, #nav-bar{
        font-size: 32px;
        letter-spacing: 4px;
        text-wrap: nowrap;
    }

    .section_title{
        padding-bottom: 40px;
        text-wrap: nowrap;
        font-size: clamp(1.4rem, 5.5vw, 3.0rem);
    }
    
    #nav-bar{
        padding-top: 20px;
        min-width: 280px;
        min-height:480px;
        height: 100vh;
        display: none;
    }

    #nav-bar li{
        height: 100px;
        list-style: none;
        padding: 20px 0px;
        display: block;
        text-align: left;
        vertical-align: center;
    }

    #toggle-light {
        width: 50px;
        height: 50px;
        background-image: url("images/dark_icon.png");
        background-size: contain;
        border: none;
    }

    .underline::after {
        content: '';
        position: absolute;
        width: 42%;
        height: 5px;
        background: linear-gradient(to right, var(--lineColor), transparent );
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 400ms ease-out;
        display: block;
    }

    .menu-toggle{
        display: inline-block;
    }

    .fa{
        background: transparent;
    }

    #nav-bar li:hover{
        padding-left: 25px;
    }

    #nav-bar li:hover:last-of-type{
        padding-left: 0;
    }

    #nav-bar li:hover::after{
        transform: scaleX(1);
        padding-left: 25px;
    }

    #nav-bar a{
        text-decoration: none;
        color: var(--lightColor);
        font-weight: bold;
    }
    
    /*--MAIN WINDOW--*/
    #main-content{
        display: flex;
        justify-content: center;
    }

    .project_container{
        border-radius: 5px;
        min-width: 280px;
        min-height: 270px;
        aspect-ratio: 1 / .9; 
        position: relative;
        contain: paint;
        margin-bottom: 40px;
    }

    .project_text{
        padding-left: 15px;
        height: 100%;
        display: flex;
        color: var(--lightColor);
        flex-direction: column;
        justify-content: flex-end;
        transition: transform 500ms ease-in-out;
        margin-bottom: 20px; 
        min-width: 260px;
    }

    .p_box{
        width: 100%;
        height: 100%;
        position: absolute;
    }

    .project_num{
        text-align: left;
        font-size: clamp(10rem, 40.2vw, 20rem);
    }

    .overlay{
        width: 100%;
        z-index: 2;       
    }

    .project_descrip{  
        transition: transform 600ms ease-in-out;
        padding-left: 10px;
    }

    .project_name, .project_tools{
       font-size:clamp(.9rem, 4.0vw, 4.0rem); 
    }

    img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        min-width: 280px; 
        opacity: .1;
        transition: all 500ms ease-in-out;
        filter: grayscale(100%);
        z-index: 1;
    }

    .project_container:hover img{
        opacity: .8;
        filter: grayscale(0%);
    }

    .project_container:hover .project_text{
        transform: translate(0, 100%);
        background-color: var(--darkColor);
        opacity: .6;
        align-self: flex-start;
    }

   a{
        text-decoration: none;
        color: var(--lightColor);
    }

}

/*PC SIZE*/
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 769px) {

    /*--GENERAL--*/
    body{
        display: flex;
        flex-direction: row;
        height: 100%;
    }

    #menu-toggle{
        display: none;
    }

    h2{
        font-size: 38px;
    }

    .section_title{
       padding-bottom: 90px;
       text-wrap: nowrap;
    }

    /*--MAIN WINDOW--*/
    #main-content{
       margin-left: 350px;
       padding: 0 50px; 
       width: 100%;
    }

    /*--NAV BAR--*/
    #nav-bar{
        padding-top: 20px;
        min-width: 280px;
        min-height:480px;
        height: 100vh;
        display: block;
    }

    #nav-bar li{
        height: 100px;
    }

    #side-header, section{
        background: none;
        padding-top: 70px;
        min-height: 100vh;
    }
      
    h1, #side-header, #title{
        text-transform: uppercase;
        font-size: 40px;
    }

    #side-header{
        text-transform: uppercase;
        padding-left: 50px;
        height: 100vh;
        width: 300px;
        position: fixed;
    }

    #toggle-light {
        width: 50px;
        height: 50px;
        background-image: url("images/dark_icon.png");
        background-size: contain;
        border: none;
    }

    #toggle-light:hover{
        cursor: pointer;
        filter: invert(1.0);
    }

    #nav-bar{
        padding: 40px 0px;
        text-transform: uppercase;
        font-size: 32px;
        list-style: none;
    }

    #nav-bar li {
        padding: 10px 0;
        display: flex;
        align-items: center;
    }

    #nav-bar li:hover{
        padding-left: 25px;
    }

    #nav-bar li:hover:last-of-type{
        padding-left: 0;
    }

    .underline::after{
        content: '';
        position: absolute;
        width: 50%;
        height: 5px;
        margin-top: 35px;
        background: linear-gradient(to right, var(--lineColor), transparent );
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 400ms ease-out;
    }

    #nav-bar li:hover::after{
        transform: scaleX(1);
    }

    #nav-bar a{
        text-decoration: none;
        color: var(--lightColor);
        font-weight: bold;
    }

    /*--PROJECTS--*/
    .project_grid{
        display: grid;
        width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(350px,410px));
        row-gap: 50px;
        justify-content: space-between; 
    }

    img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        min-width: 280px; 
        opacity: .3;
        transition: all 500ms ease-in-out;
        filter: grayscale(100%);
        z-index: 1;
    }

    .project_container{
        border-radius: 5px;
        height: 350px;
        width: 400px;
        aspect-ratio: 1 / .9; 
        position: relative;
        contain: paint;
        margin-bottom: 40px;
    }

    .project_text{
        padding-left: 15px;
        height: 100%;
        display: flex;
        color: var(--lightColor);
        flex-direction: column;
        justify-content: flex-end;
        transition: transform 500ms ease-in-out;
        margin-bottom: 20px; 
        min-width: 260px;
    }

    .p_box{
        width: 100%;
        height: 100%;
        position: absolute;
    }

    .overlay{
        width: 100%;
        z-index: 2;       
    }

    .project_num{
        text-align: left;
        font-size: 196px;
    }

    .project_descrip{  
        transition: transform 600ms ease-in-out;
        padding-left: 10px;
        font-size: 18px;
    }

    .project_container:hover img{
        opacity: .8;
        filter: grayscale(0%);
    }

    .project_container:hover .project_text{
        transform: translate(0, 100%);
        background-color: var(--darkColor);
        opacity: .6;
        align-self: flex-start;
    }

    .project_name, .project_tools{
       font-size: 24px;

    a{
        text-decoration: none;
        color: var(--lightColor);
    }


}