*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --medium: #6894A6; 
    --light: #AAC9D0;
    --dark: black;
}

main{
 
 overflow: hidden;
}

footer{
    margin-right: 80px;  
}

body{
    line-height: 1.5;
    font-family: 'Ubuntu', sans-serif;
    color: var(--dark);
}

header{
    background-color: var(--dark);
    max-width: 100%;
    max-height: 70px;
}

h1{
    color: var(--dark);
    background-color: var(--light);
    padding: 1px 5px 1px 100px;
    display:inline-block;
    margin-top: 0;
    position: relative;
    top:10px;
    font-size: 30px;   
}


h2{
    font-size: 28px;
    font-weight: 400;    
}

p{
    margin-right: 10px; 
}

/* Class */

.nav-li:hover{
    font-size: 30px;
    padding: 10px;
    cursor: pointer;  
}

nav .nav-li{
    margin: 20px 25px 25px 25px;
    font-size: 20px;
    color: var(--light);
    text-decoration: underline;
    text-underline-offset: 5px;
}

ul{
    list-style: disc;
    margin-left:50px;
}

.work-title-position{
    position: relative;
    left: 60px;
    top: 40px;
}

.link-color{
    color: var(--light);
 }

.flex-box{
    display:flex;
    flex-wrap: wrap;
}

.p{
    position:absolute;
    top: 50%;

    background-color: var(--medium);
    padding: 5px;
    z-index:1;
}

.placeholder-images{
    width: 100%;
    opacity: 50%;  
 }

 .placeholder-images:hover{
    opacity: 100%;
    cursor: pointer;
    
 }

 .articles{
   width: 90.5%;
   margin-left:7px;
   margin-bottom: 20px;
   display: flex;
     
 }

 .secondary-articles-size{
    width: 100%;
    border: 5px solid var(--medium);
    z-index: 1;
    margin-left: 20px;
 }

 .contact-list{
    text-decoration: underline;
    text-underline-offset: 10px;
    height:50px;
 }
 
 .contact-list:hover{
     background-color:var(--light);
     cursor: pointer;
     padding: 10px;
 }

 .contact-list-links{
    color:var(--dark);
 }
 
 /* ID */

 #flex-box-nav{
    display: flex;
    justify-content: right;
    position:relative;
} 

nav #nav-ul {
    display: flex;
    list-style: none;
    position:relative;
    bottom: 40px;
    right: 30px;
}

#background-image{
    width: 100%;
    max-height: 200px;
}



#cool-header{
    background-color: var(--light);
    padding: 5px;
    font-size: 25px;
    position: relative;
    left: 900px;
    bottom:70px;
    display: inline-block;
      
}

#main-image{
    max-height: 150px;
    width:auto;
    border-radius: 50%;
    position:absolute;
    bottom:            
}

#main-image-position{
    position: relative;
    bottom:180px;
    left: 20px;
}


#first-section-position{
    border-left: 3px solid var(--dark);
    margin-left: 143px;
    padding-left: 20px;
}


#section2-border{
    border-left: 3px solid var(--dark);
    margin-left: 140px;
}

#first-article-position{
    position: relative;
    width: 89%;
    
}

#second-articles-position{
    position:relative;
    
}

#article-position{
    display:flex;
    margin-top: 50px;
    
    
}

#about-me{
    margin-left:50px;
    position: relative;
    top: 80px;  
}

#me{
    margin-left: 37px;
}

#first-work-article{
    display: flex;
    justify-content: start;
    margin-left:26px;
    margin-bottom: 20px;
    margin-right: 20px;
    opacity: 100%;
    z-index:1;
    width: 100%;   
}

#first-image{
    width: 100%;
    opacity: 50%;
    border:5px solid var(--medium);   
}

#first-image:hover{
    opacity: 100%;
    cursor: pointer;
}

#footer-border{
    margin-top: 50px;
    border-right: 3px solid var(--dark);  
}

#contact-ul li{
    list-style-type: none;
    position:relative;
    margin-right:10px;
    margin-left: 20px;
    font-size: 20px;     
}

#contact-ul{
    
    
    justify-content: center;
    position: relative;
    top: 65px;
}

#contact-margin{
    margin-left:30px;
    padding-right: 10px;   
}

#contact-me{
    position: relative;
    left:60px;
}


/* Media Querries max-height= 950 */

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

    header{
       background-color: var(--light);
       position: relative;
    }

    h1{
        width: 100%;
        height: 90px;
        text-align: center;
        font-size: 70px;
        padding: 0px;    
    }

    nav{
        position: absolute;
        top: 40px;
        right: 200px;    
    }

    .flex-box{
        display:block;
    }

    .articles{
        display: block;
    }

    .position-articles{
        margin-top:20px;
    }

    #background-image{
        width: 100%;
        position: relative;
        top:80px;
    }

    #main-image-position{
        bottom: 95px;
    }

    #cool-header{
        position: relative;
        left: 600px;
        bottom: 0px;
    }

    #about-me{
        margin-left: 20px;
        position: relative;
        top: 135px;  
    }
    
    #me{
        position:relative;
        left:55px;
        bottom:42px;
    }

    #first-section-position{
        border-top: 3px solid var(--dark);
        border-left:none;
        margin-left:20px;
        margin-right: 20px;
        padding-left: 0px;
        margin-top:100px;
        padding-top: 20px;
    }

    #section2-border{
        border-top: 3px solid var(--dark);
        padding-top: 20px;
        border-left:none;
        margin-left: 20px;
        margin-right: 20px;
    }

    #work-title-position{
        top:0px;
        left:20px;
    }

    #first-article-position{
        width:90%;
    }


   #footer-border{
    border-right:none;
    border-top:3px solid var(--dark);
    margin-left: 20px;
    
   }

   #contact-margin{
    position:relative;
    bottom:50px;
   }

   #contact-me{
    position:absolute;
    left: 110px;
    bottom: 0px;
   }

   #contact-ul{
    top:0px;
    margin-left:0px;
   }

   .contact-list:hover{
    background-color:var(--light);
    display: inline-block;
    cursor: pointer;
    padding: 10px;
}
}

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

    nav{
    position:absolute;
    right:0px;
    left:70px;
    }

    #cool-header{
        position: relative;
        left: 250px;
        bottom: 0px;
    }
}

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

    nav{
        position: absolute;
        left: 0px;
    }

    #cool-header{
        font-size:20px;
        left: 210px;
        top: 10px;
    }

}