/* applies styles to <header> */
* {margin: 0; padding: 0px; box-sizing: border-box;}

body{
    background-color:rgb(206, 208, 211);
    font-family: Arial, Helvetica, sans-serif;
    color: darkorchid
    
}

header
    {padding: 15px 15px;
    background-color: lightslategray;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

header img{
    inline-size: 150px;
}

header h1{ 
    font-weight: bold;
    font-size: 45px;
    color: purple;
    margin: 0;
    }

header nav {
    margin: 10px 0;
}

header nav ul{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    list-style: none;
}

header nav ul li a{
    padding: 10px 15px;
    font-weight: lighter;
    font-size: 1.5vw;
}

h2{
    border-right: 3px solid rgb(95, 93, 93);
    padding: 10px;
}

p{
    margin-left: 40px;
}

li {
    display:inline;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 50px;
    }


/*jumbotron section*/

.jumbotron{
    background-image: url('../assets/images/purple-calla.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center; 
    flex-wrap: wrap;
    color: whitesmoke;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 25px;
    height: 300px;
    
}



#about-me{
    display: flex;
    padding: 10%;
}

/*Work project pages*/
.container{
    display: flex;
    padding: 10%; 
    flex-wrap: wrap;   
}

.child{
    flex: 50%;
    padding: 40px;
    display: inline-block;
}

.child img{
    max-width: 100%;
    height: auto;
}


#big-pic{
    width: 100%;
}


#contact-me{
    display: flex;
    padding: 10%;
}





/*Media Query for smaller screens*/

@media screen and (max-width: 980px) {
    
    header {
        padding-bottom: 0;
        justify-content: center;
        font-size: 80px;
      }
    
      header h1 {
        width: 100%;
        text-align: center;
        
      }
    
      header nav ul {
        margin-top: 20px;
        width: 100%;
        justify-content: center;
      }
    
      header nav ul li a {
        font-size: 20px;
      }
    
      footer h2, footer div {
        text-align: center;
        width: 100%;
      }
    }
}

@media screen and (max-width:768px) {
    header {
        padding-bottom: 0;
        justify-content: center;
      }
    
      header h1 {
        width: 100%;
        text-align: center;
        font-size: 60px;
      }
    
      header nav ul {
        margin-top: 20px;
        width: 100%;
        justify-content: center;
      }
    
      header nav ul li a {
        font-size: 15px;
      }
    
      footer h2, footer div {
        text-align: center;
        width: 100%;
    }
}

@media screen and (max-width:575px){
    header {
        padding-bottom: 0;
        justify-content: center;
      }
    
      header h1 {
        width: 100%;
        text-align: center;
        font-size: 40px;
      }
    
      header nav ul {
        margin-top: 20px;
        width: 100%;
        justify-content: center;
      }
    
      header nav ul li a {
        font-size: 20px;
      }

      .container{
          flex: 0 100%;
          flex-wrap: wrap;
      }
    
      footer h2, footer div {
        text-align: center;
        width: 100%;
    
    
}