*{
    margin:0;
    padding:0;
}

html{
    --themeBlue: rgb(2, 112, 155);
    scroll-behavior: smooth;
}

.mobile{
    display:none;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    background-image: url('images/background.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding:0px 20%;
    min-width: 350px;
}

header, section, footer{
    margin:40px auto;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.8);
    border-bottom: white 1px solid;
    border-right: white 1px solid;
}

header{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7db9e8+0,1e5799+100&0.9+0,0.9+100 */
    background: linear-gradient(to bottom,  rgba(125,185,232,0.9) 0%,rgba(30,87,153,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    padding-bottom: 20px;
}

h1, h2, h3{
    font-family: "Audiowide", serif;
    font-weight: 400;
    font-style: normal; 
}

h1{
    color:white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    padding: 80px 0 10px;
    font-size: 50px;
}

h1 a{
    color:white;
    text-decoration: none;
}

nav ul{
    display:flex;
    list-style: none;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
    color:white;

}

nav li + li:before{
    content: "|";
    padding:5px;
}

nav a{
    color:white;
    text-decoration: none;
}

nav a:clicked{
    color:white;
}

nav a:hover{
    color: yellow;
}

.socMedia{
    float: right;
    margin-top: -60px;
    margin-right:40px;
}

.socMedia a{
    text-decoration: none;
}

.socMedia img{
    height:60px;
    border: 1px solid white;
    border-radius:6px;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.8);
    margin-left:5px;
}

.socMedia img:hover{
    border: 1px solid yellow;
}

.jpdPhoto{
    width: 120px;
    border: white 20px solid;
    float:right;
    margin-top: -140px;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.8);
    transform: rotate(5deg);
}

section, footer{
    background-color: rgba(255,255,255,0.85);
}

h2{
    margin-bottom: 20px;
    font-size:30px;
}

p{
    margin: 20px 0;
}

h3{
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--themeBlue);
}

h3 + p{
    margin-top: 10px;
}

#aboutMe, #projects{
    scroll-margin-top: 50px;
}

/*Projects*/
/*============================================================*/

.project{
    display: flex;
}

.imageContainer{
    width:150px;
    height:100%;
    overflow:hidden;
    position: relative;
}

.imageContainer img{
    height:100%;
    width: auto;
    position: absolute; 
    left:50%;
    transform: translateX(-50%);
}

.projectImage{
    width: 150px;
    height: 100px;
    flex-shrink: 0;
    margin-right:20px;
    margin-bottom: 20px;
    background-size: cover;
    background-position: center center;
    border: var(--themeBlue) solid 1px;
}

#fwImage{
    background-image:url(images/firstwriter.png);
}

#pageCheckerImage{
    background-image: url(images/pageChecker.png);
}

#jpandaImage{
    background-image: url(images/jpandaImage.png);
}

#aaImage{
    background-image: url(images/aaImage.png);
}

.headerLink{
    text-decoration: none;
}

.projectDesc p:first-of-type{
    margin-top: 10px; 
}

/*Footer*/
/*=====================================================*/

footer{
    text-align: center;
    font-weight: bold;
}

/*Decrease margins at 1400px*/
@media screen and (max-width: 1400px){
    body{
        padding: 0px 10%;
    }
}

/*Tablet (701-1024px)
=========================================================*/
@media screen and (max-width: 1024px){
    body{
        padding: 0 5%;
    }

    .jpdPhoto{
        width:100px;
        transform:rotate(0deg);
    }

    .socMedia{
        margin-top: -10px;
        margin-right:20px;
    }

    .socMedia img{
        height: 40px;
    }

}

/*Mobile
=========================================================*/

@media screen and (max-width: 700px){

    .mobile{
        display:inherit;
    }

    body{
        background:white;
        padding:0;
    }

    header{
        position:fixed;
        z-index:1000;
        top:0;
        margin:0;
        left:0;
        width:100%;
        box-sizing:border-box;
        border-radius:0;
        padding:3px 20px 8px;
        min-width: 350px;
    }

    h1{
        font-size:30px;
        padding:0;
    }

    .menu{
        color: white;
        font-size: 30px;
        position:absolute;
        top:3px;
        right:10px;
        text-shadow:2px 2px 4px rgba(0,0,0,0.8);
        cursor:pointer;
    }

    nav ul{
        position:fixed;
        display:block;
        text-shadow:none;
        top:52px;
        left:0;
        width:100%;
        text-align: center;
        font-size: 20px;
        box-shadow: 0px 4px 8px rgba(0,0,0,0.8);
        overflow:hidden;
    }

    nav li{
        display:block;
        background-color:rgba(90, 90, 90, 0.95);
        border-bottom: 1px solid rgb(60, 60, 60);
        transition: 0.5s ease;
    }

    nav li + li:before{
        display:none;
    }

    nav li a{
        display:block;
        height: 55px;
        padding: 15px 0;
        box-sizing: border-box;
    }

    nav.closed li{
        margin-top: -56px;
    }

    nav.closed #menuClose{
        display: none;
    }

    nav.open .menu{
        top: 8px;
        right: 14px;
    }

    nav.open #menuOpen{
        display: none;
    }

    .jpdPhoto{
        display:none;
    }

    #mobile-head{
        padding: 140px 40px 60px;
        background-image: url('images/background.png');
        background-size: cover;
        text-align:center;
    }

    .jpdPhoto-mobile{
        width:120px;
        border: white solid 20px;
        box-shadow: 4px 4px 8px rgba(0,0,0,0.8);
    }

    .socMedia{
        display:none;
    }

    .socMedia.mobile{
        display: inherit;
        float:none;
        margin: 10px;
    }

    .socMedia.mobile img{
        height: 60px;
        margin:10px
    }

    section, footer{
        border-radius: 0;
        margin:0;
        padding: 40px 4%;
        box-shadow: 0px 0px 40px rgba(0,0,0,0.8);
    }

    .project{
        flex-direction:column;
        margin-bottom: 40px;
    }

    .projectImage{
        width: 100%;
        height: auto;
        border:none;
        position:unset;
    }

    .imageContainer{
        width:auto;
    }

    .imageContainer img{
        width: calc(100% - 2px);
        height: auto;
        border: var(--themeBlue) solid 1px;
        position:unset;
        transform: translateX(0);
    }

}