/* I need to replace the four link on the nax with its logo
-photoshop each logo */


*{
    color:black;
    margin:0;
    padding:0;
    font-family: 'Source Sans Pro', sans-serif;
}

:root{
    --darkblue:rgb(17, 26, 50);
    --lightblue:rgb(236, 239, 250);
}

@keyframes preview{
    from{
        width:20%;
        height:20%;
        opacity:.4;
    }
    to{
        width:57%;
        height:60%;
        opacity:1;
    }
}

body{
    
    margin:0;
    padding:0;
}

nav{
    display:flex;
    justify-content:space-between;
    height:100px;
    width:100%;
    align-items:center;
    background:var(--darkblue);
    position:fixed;
    z-index:3;
    border-bottom-color:var(--lightblue);
    border-bottom-style:solid;
    border-bottom-width:2px;
}

nav > div > a{
    color:white;
    text-decoration: none;
    font-size:30px;
    margin-left:30px;
}


ul{
    display:flex;
    justify-content:space-around;
    width:50%;
    height:50px;
    right:0;
    position:absolute;
    /* border:solid black 1px; */
}
/*
li{
    list-style-type:none;
    font-size:30px;
    color:white;
}*/
ul > a{
    text-decoration:none;
    font-size:30px;
    color:white;
    padding:2px 15px;
    border:3.5px solid white;
}

ul > a:nth-child(1){
    background:black;
}

ul > a:nth-child(2){
    background:#0077b5;
}

ul > a:nth-child(3){
    background:rgb(82, 82, 82);
}

/* nav > ul > a:nth-child(4){
    border:white solid 2px;
    padding:5px 15px;
    margin-top:-8px;
} */

li > a{
    color:white;
    text-decoration: none;
}

/*------------------------------------- Intro -------------------------------*/

.intro-div{
    width:100%;
    height:70vh;
    background:rgb(236, 239, 250);
    margin:0;
    
}

.intro{
    position:absolute;
    width:800px;
    height:400px;
   /*border:dashed 1px black;*/
    top:25%;
    margin-left:8%;
    
}

.intro > h1{
    font-size:55px;
    height:80px;
    padding-top:20px;
}

.intro > h2{
    font-size:25px;
    
    padding-top:10px;
}

/*-------------------------------------------------Projects ------------------------------*/
.projects{
    background-color: rgb(17, 26, 50);
    
}

.projects > h2{
    text-align:center;
    color:white;
    font-size:50px;
    text-transform:uppercase;
    text-shadow:10px 10px 100px black;
    padding:40px;
    
}

.project-grid{
    width:950px;
    height:1230px;
    /* height change ---------------------------------------------------------------------------- update----------------*/
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:30px;
    grid-template-rows:250px 250px 250px 250px;  
    /* g-t-r Changed due to adding projects ------------------------------------------------------ update-----------------*/
}

.projectBanner{
    box-shadow: inset 0 0 0 0 rgba(11, 25, 56, 0.85);
    text-align:left;
    font-size:20px;
    width:100%;
    font-family:Arial;
    padding:0px;
    line-height:10px;
    height:50px;
    position:Absolute;
    border-bottom-color:transparent;
    border-bottom-style:solid;
    border-bottom-width:3px;
    transition:background-color 1s, box-shadow .5s ease-in-out, border-color .3s ease-in;
}

.projectBanner > p{
    padding-left:10px;
    color:transparent;
    padding-top:20px;
    transition:color .5s;
}

.project-grid > div:hover .projectBanner>p{
    color:rgb(211, 208, 208);
}

.project-grid > div:hover .projectBanner{
    background:rgba(11, 25, 56, 0.85);
    box-shadow: inset 500px 0 0 0 rgba(11, 25, 56, 0.85);
    border-bottom-color:black;
    transition:border-color 1s,background-color 1s, box-shadow .5s ease-in-out;
}

.project-grid > div{
    border:2px solid black;
    border-radius:5px;
    width:100%;
    background-size: contain; 
    position:relative;
    box-shadow:2px 2px 10px 0 black;
    transition:border .5s;
}

.project-grid > div:hover{
    border-color:white;
}

.project-grid > div:nth-child(1){
    background-image:url('images/flicks.png');
    background-size:102% 100%;
}

.project-grid > div:nth-child(2){
    background-image:url('images/Dota2rosterImage.png');
    background-size:102% 100%;
}


.project-grid > div:nth-child(3){
    background-image:url('images/21pluscover.png');
    background-size:102% 100%;
}

.project-grid > div:nth-child(4){
    background-image:url('images/peacock.png');
    background-size:cover;
}

.project-grid > div:nth-child(5){
    background-image:url('images/pokegen2.png');
    background-size:cover;
}

/* Copy and paste these to add images --------------------------------------------------------------update------------- */

.project-grid > div:nth-child(6){
    background-image:url('images/MacroCalcScreen.png');
    background-size:100% 100%;
}

.project-grid > div:nth-child(7){
    background-image:url('images/weatherCover.png');
    background-size:cover;
}

.project-grid > div:nth-child(8){
    background-image:url('images/replica2Image.png');
    background-size:100% 100%;
}



.view{
    position:relative;
    top:200px;
    border:2px solid black;
    margin:0 auto;
    background:white;
    cursor:pointer;
    border-radius:2px;
    width:180px;
    height:25px;
    text-align:center;
    font-size:20px;
    text-transform: uppercase;
}

.preview{
    position:fixed;
    display:flex;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    border:solid 1px black;
    width:57%;
    height:60%;
    visibility:hidden;
    box-shadow:1px 1px 2px 0 black;
    z-index:2;
}

.reveal{
    animation-name:preview;
    animation-duration:.3s;
    animation-timing-function:ease-in;
    visibility:visible;
}
.xBox:hover{
    cursor:pointer;
}

.xBox{
    position:absolute;
    background:black;
    width:20px;
    height:20px;
    margin:5px;
    right:0;
}

.xBox > svg{
    padding-left:2px;
    padding-top:3px;
}

#P1 > .pLeft{
    background-image:url('images/flicks.png');
}

#P2 > .pLeft{
    background-image:url('images/Dota2rosterImage.png');
}

#P3 > .pLeft{
    background-image:url('images/21pluscover.png');
}

#P4 > .pLeft{
    background-image:url('images/peacock.png');
}

#P5 > .pLeft{
    background-image:url('images/pokegen2.png');
}

/* copy and paste to add for preview ----------------------------------------------------update----------------- */

#P6 > .pLeft{
    background-image:url('images/MacroNutrientSquare.png');
}

#P7 > .pLeft{
    background-image:url('images/weatherCover.png');
}

#P8 > .pLeft{
    background-image:url('images/replica2Image.png');
    background-size: 150% 100%;
    background-position:30% 50%;
}

.pLeft{
    width:63%;
    background:rgb(91, 30, 30);
    background-size: 150% 100%;
    background-repeat:no-repeat;
    background-position:50% 50%;
}

.pRight{
    width:37%;
    position:relative;
    background-color: rgb(121, 147, 214);
}
.pRight>*{
    text-align:left;   
}

.pRight > p > a{
    color:rgb(255, 31, 31);
    font-weight:bold;
    text-decoration: none;
    text-shadow:1px 1px #013147;
}

.link-flex{
    display:flex;
    position:absolute;
    bottom:25px;
    width:100%;
    justify-content:space-around;
    margin:0 auto;
}

.link-flex > a > div{
    width:100%;
    height:25px;
    font-size:18px;
    text-align:center;
    padding:5px 10px;
}

.link-flex > a{
    text-decoration:none;
    font-weight:bold;
    text-transform:uppercase;
}

.site{
    background:rgb(139, 134, 134);
    box-shadow:2px 2px 5px black;
}

.github{
    background:black;
    box-shadow:2px 2px 5px rgb(139, 134, 134);
    color:white;
}

/*-----------------------------------------------Post Projects 1 -----------------------------------------------------*/

.contact{
    width:100%;
    height:200px;
    background-color: rgb(236, 239, 250);
}

.contact-text{
    font-size:30px;
    width:60%;
    position:relative;
    top:45%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
}
.contact-text > h2{
    padding-bottom:10px;
}


/*--------------------------------------------------------------------  Social Links  ---------------------------------------------------------------------*/
.social{
    position:fixed;
    left:0;
    top:50%;
    transform:translateY(-70%);
    height:200px;
    width:150px;
    display:grid;
    grid-template-rows:1fr 1fr 1fr;
    grid-template-columns:1fr;
}

.social:hover .zone{
    opacity:1;
    transition:opacity .7s;
}

.social-flex{
    display:flex;
}

.social-flex > div:nth-child(1){
    width:40%;
}

.social-flex > .zone{
    width:60%;
    align-items:center;
    justify-content:center;
    display:flex;
    font-size:18px;
    opacity:0;
    transition:opacity .1s;
    text-transform: uppercase;
}

.zone > span{
    /*this will be responsive to scroll*/
    color:black;
}


.social-flex:nth-of-type(1) > div:nth-child(1){
    background:white;
}

.social-flex:nth-of-type(2) > div:nth-child(1){
    background:#0e76a8;
}

.social-flex:nth-of-type(3) > div:nth-child(1){
    background:none;
}

svg{
    padding:5px;
}

svg:nth-of-type(1){
    padding-left:2px;
}

/* ---------------------------------------------------------- MEDIA QUERY ------------------------------------------------------------------------------------*/
@media screen and (max-width:1200px) {
    @keyframes preview{
        from{
            width:20%;
            height:20%;
            opacity:.4;
        }
        to{
            width:75%;
            height:60%;
            opacity:1;
        }
    }

    .project-grid{
        width:675px; 
        height:3250px; 
        /* change height -------------------------------------------------------------------------------------------- update----------*/
        margin:0 auto;
        display:grid;
        grid-template-columns:675px;
        gap:30px;
        grid-template-rows:350px 350px 350px 350px 350px 350px 350px 350px;
        /* simply add 350px rows -------------------------------------------------------------------------------------update --------*/
    }

    .project-grid > div:hover .projectBanner{
        box-shadow: inset 675px 0 0 0 rgba(11, 25, 56, 0.85);
    }

    .view{
        top:300px;
    }

    .project-grid > div:nth-child(4){
        background-image:url('images/peacock.png');
        background-size:100% 100%;
    }
    
    .project-grid > div:nth-child(5){
        background-image:url('images/pokegen2.png');
        background-size:100% 100%;
    }

    

    .project-grid > div:nth-child(6){
        background-image:url('images/MacroNutrientSquare.png');
        background-size:cover;
    }

    .project-grid > div:nth-child(8){
        background-size:100% 100%;
    }

    .preview{
        width:75%;
    }

    .link-flex > a > div{
        width:90%;
        height:25px;
        font-size:16px;
        text-align:center;
        padding:5px 10px;
    }
    
}

@media screen and (max-width:950px){
    @keyframes preview{
        from{
            width:20%;
            height:20%;
            opacity:.4;
        }
        to{
            width:80%;
            height:70%;
            opacity:1;
        }
    }
    ul{
        right:5%;
        width:60%;
    }

    .intro-div{
        height:70vh;
    }

    .intro{
        width:80%;
    }

    .intro{
        left:2%;
    }
    
    .social{
        top:60%;
    }

    .project-grid{
        width:610px; 
        grid-template-columns:610px;
        grid-template-rows:350px 350px 350px 350px 350px 350px 350px 350px;
    }

    .project-grid > div:hover .projectBanner{
        box-shadow: inset 625px 0 0 0 rgba(11, 25, 56, 0.85);
    }

    .view{
        top:290px; 
    }

    .preview{
        width:80%;
        height:70%;
    }

    .link-flex > a > div{
        width:80%;
        height:25px;
        font-size:16px;
        text-align:center;
        padding:5px 10px;
    }

    .contact{
        height:20vw;
    }
}

@media screen and (max-width:870px){
    .intro > h1{
        height:40%;
    }
}

@media screen and (max-width:750px){
    ul{
        width:70%;
    }
    ul > a{
        /* right:5%;
        width:60%; */
        font-size:25px;
        padding:2px 3vw;
        /* border:white 1px solid; */
    }

    .project-grid{
        width:500px; 
        height:2900px; 
        margin:0 auto;
        display:grid;
        grid-template-columns:500px;
        gap:30px;
        grid-template-rows:300px 300px 300px 300px 300px 300px 300px 300px;
    }

    .project-grid > div:hover .projectBanner{
        box-shadow: inset 500px 0 0 0 rgba(11, 25, 56, 0.85);
    }

    .view{
        top:250px;
    }

    .project-grid > div:nth-child(4){
        background-image:url('images/peacock.png');
        background-size:100% 100%;
    }
    
    .project-grid > div:nth-child(5){
        background-image:url('images/pokegen2.png');
        background-size:100% 100%;
    }

    .preview{
        flex-direction:column;
        height:75%;
        width:80%;
        top:55%;
    }

    .pLeft{
        width:100%;
        height:50%;
        background-size: 100% 100%;
        background-position:50% 50%;
    }
    
    .pRight{
        width:100%;
        height:50%;
    }
    
    .link-flex{
        bottom:10px;  
    }
}
/*font size p change*/
@media screen and (max-width:600px){
    .project-grid{
        width:440px; 
        height:2800px;
        margin:0 auto;
        display:grid;
        grid-template-columns:440px;
        gap:30px;
        grid-template-rows:300px 300px 300px 300px 300px 300px 300px 300px;
    }

    .dotaText{
        padding:3px;
        line-height:20px;
        padding-top:0px;
        color:red;
        margin-top:-12px;
    }

    .contact-text{
        font-size:5vw;
    }
    
    .contact{
        height:30vw;
    }
    .reveal{
        animation-name:none;
    }

    .pRight>p{
        font-size:15px;
    }

    .intro{
        left:6%;
    }
}

@media screen and (max-width: 550px){
    .project-grid{
        width:380px; 
        height:2500px; 
        display:grid;
        grid-template-columns:380px;
        grid-template-rows:260px 260px 260px 260px 260px 260px 260px 260px;
    }
    

    

    .view{
        top:210px;
    }
    nav{
        height:20vw;
    }

    nav > div{
        display:none;
    }

    nav> ul{
        display:flex;
        width:90%;
        
        left:50%;
        transform:translateX(-50%);
        height:10vw;
    }

    ul > a{
        border-width: .9vw;
    }

    .intro-div{
        height:130vw;
    }
    .intro{
        top:40vw;
    }

    .intro > h1{
        font-size:12vw;
    }

    .intro > h2{
        font-size:6vw;
    }
    .zone, .zone>span{
        display:none;
    }
    .pRight>p{
        font-size:13px;
    }
}

@media screen and (max-width: 450px){
    .project-grid{
        width:340px; 
        height:2050px; 
        display:grid;
        grid-template-columns:340px;
        grid-template-rows:210px 210px 210px 210px 210px 210px 210px 210px;
    }
    .projectBanner > p{
        padding:9px;
        line-height:20px;
    }
    .dotaText{
        padding:3px;
        line-height:20px;
        padding-top:0px;
        color:red;
        margin-top:-7px;
    }

    .view{
        top:165px;
    }

    ul > a{
        font-size:5vw;
    }

    /* nav > ul > a:nth-child(3){
        border:white solid 2px;
        padding:5px 10px;
        
        margin-top:-2vw;
    } */

    .intro > h1{
        height:30%;
    }

    .projects > h2{
        font-size:11vw;
        padding:10vw;
    }
    .pLeft{
        height:40%;
    }
    
    .pRight{
        height:60%;
    }
    .social{
        border: solid 1px black;
        display:fixed;
        grid-template-rows:1fr;
        grid-template-columns:1fr 1fr 1fr;
        width:190px;
        height:60px;
        top:100%;
        left:50%;
        transform:translate(-50%,-100%);
    }
    .social-flex > div:nth-child(1){
        width:100%;
        height:60px;
    }
    .social-flex > div > a > img{
        width:60px;
        height:60px;
    }
    
    
    .social-icon > a > svg{
        height:45px;
        width:60px;
    }
    .contact{
        height:50vw;
    }
}

@media screen and (max-width: 400px){
    .projectBanner{
        font-size:18px;
        height:40px;
        padding-bottom:5px;
    }
    .project-grid{
        width:300px; 
        height:1900px; 
        display:grid;
        grid-template-columns:300px;
        grid-template-rows:200px 200px 200px 200px 200px 200px 200px 200px;
    }
    .view{
        top:160px;
    }

    .intro > h1{
        height:25%;
        font-size:40px;
        /* border:solid red 1px; */
    }

    .intro > h2{
        font-size:5vw;
    }
    .social{
        width:165px;
        height:50px;
    }

    .social-flex > div:nth-child(1){
        width:100%;
        height:50px;
    }
    .social-flex > div > a > img{
        width:50px;
        height:50px;
    }
    
    .social-icon > a > svg{
        height:35px;
        width:50px;
    }
    .pRight>p{
        font-size:12px;
    }

    .link-flex > a > div{
        width:80%;
        height:20px;
        font-size:16px;
        padding:5px 10px;
    }
}

@media screen and (max-width: 350px) {
    .intro > h1{
        height:25%;
        font-size:34px;
        /* border:solid blue 1px; */
    }

    .projectBanner{
        font-size:16px;
    }
    .project-grid{
        width:260px; 
        height:1950px; 
        display:grid;
        grid-template-columns:260px;
        grid-template-rows:200px 200px 200px 200px 200px 200px 200px 200px;
    }

    .view{
        top:160px;
        width:160px;
        font-size:19px;
        height:24px;
    }

    .pRight>p{
        font-size:14px;
    }
    .pLeft{
        height:30%;
    }
    
    .pRight{
        height:70%;
    }
}

@media screen and (max-width: 300px){
    .projectBanner{
        font-size:14px;
        height:45px;
        padding-bottom:0px;
        line-height:20px;
    }
    
    .projectBanner > p{
        padding:5px;
    }
    .project-grid{
        width:210px; 
        height:1900px; 
        display:grid;
        grid-template-columns:210px;
        grid-template-rows:200px 200px 200px 200px 200px 200px 200px 200px;
    }

    .project-grid > div:nth-child(6){
        background-image:url('images/MacroCalcScreen.png');
        background-size:100% 100%;
    }
    
    .project-grid > div:nth-child(7){
        background-image:url('images/weatherCover.png');
        background-size:100% 100%;
    }
    

    .view{
        top:155px;
        width:140px;
        font-size:17px;
        height:24px;
    }

    /* nav > ul > a:nth-child(3){
        border:white solid 2px;
        padding:5px 10px;
        
        margin-top:-2.5vw;
    } */

    .intro > h1{
        height:20%;
        font-size:10vw;
        /* border:solid green 1px; */
    }

    .intro > h2{
        font-size:6vw;
    }


    .social{
        width:135px;
        height:40px;
    }

    .social-flex > div:nth-child(1){
        width:100%;
        height:40px;
    }
    .social-flex > div > a > img{
        width:40px;
        height:40px;
    }
    
    .social-icon > a > svg{
        height:25px;
        width:40px;
    }
    .pRight>p{
        font-size:13px;
        line-height:14px;
    }
    .link-flex > a > div{
        width:70%;
        height:20px;
        font-size:12px;
        padding:4px 11px;
    }
}

@media screen and (max-width:250px){
    .intro > h1{
        height:15%;
        border:solid purple 1px;
    }

    .project-grid{
        width:150px; 
        height:1550px; 
        display:grid;
        grid-template-columns:150px;
        grid-template-rows:150px 150px 150px 150px 150px 150px 150px 150px;
    }
    h3{
        font-size:5px;
    }

    span{
        font-size:10px;
    }

    .view{
        top:115px;
        width:110px;
        font-size:15px;
        height:20px;
    }
    .contact{
        height:66vw;
    }
    .pRight>p{
        font-size:12px;
        line-height:12px;
    }

    .projectBanner > p{
        padding:9px;
        line-height:12px;
        font-size:10px;
    }
}