body{
margin: 0;
}

.page-wrap{   
    height: 100%;
    font-family: 'Lato', sans-serif;
    }

header::after{
  display:block;
  position:fixed;
}

header{
 // Why 100vh? Using this will keep the image header height in 100% proportion to the viewport height. Using 100% will do the same but is not a good practice. Critical to know!!!  
    height:100vh; 
    background-image: url("http://studioflow.nl/background.jpg");
    background-size: cover;
    // Now this will center the header text
    z-index: 2;
    display: flex;
    flex-flow: column;
    justify-content: center;
    position: relative;
    height: 100%;
}

.header-wrap{
    position: relative;
}

h1 {
    position: relative;
    display: inline-block;
    text-align: center;
    margin-bottom:-10px;
    z-index: 1;
    font-size: 50px;
    color: ghostwhite;
    text-shadow: -2px 2px 5px rgba(0,0,0,0.7); // this shadow is maintained across header items
}

.head-link{
    position: relative;
    display: inline-block;
    font-size: 25px;
    color: white;
    margin: 20px auto 20px; //brings the link to center
    -webkit-font-smoothing: antialiased;
    text-shadow: -2px 2px 5px rgba(0,0,0,0.7);
}

// hover effect to intuit user to click on the link to enable scrolling
.head-link:hover{
    position: relative;
    display: block;
    font-size: 27px;
    color: white;
    text-decoration: none;
    margin: 20px auto 20px;}
   

// Adding psudo class before to create an overlay on header background
header::before{
    content:"";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(9,9,9, 0.7);
        }

.content{
// this encapsulates all the content below header
    
     display: block;
     position:relative;
     left:60px;
     padding:15px;
     margin:0px;
     background-color: whitesmoke;   
}

p { 
    max-width: 600px; 
    padding: 20px;
    left:0;
    font-size: 15px;
    margin: 0px auto 0px; 
    display: block;
    color: darkslategrey;
    }

// decorating footer menu of the page here 
.footer{
  margin:20px 0 0 0;
  display:flex;
  flex-flow:row;
  justify-content:center;
  padding-bottom:2px;
  align-content:space-between;
  background: #ffffff;
  
}
 .footer ul{
  cursor:pointer;
  list-style:none;
  color:black;
  -webkit-font-smoothing: antialiased;
   :hover{
    color:rgba(89,89,89, 0.9);
    text-decoration:none;
}
}


// next up is adding a sticky nav bar on the page

.sidebar{
  display:block;
  position:fixed;
  top: 0px;
  bottom: 0;
  left: -30px;
  width: 120px;
  padding: 10px;
  background: #333;
  z-index:0;
}
.sidebar ul {
  cursor:pointer;
  list-style:none;
  color:whitesmoke;
  -webkit-font-smoothing: antialiased;
  :hover{
    color:rgba(189,189,189, 0.7);
    text-decoration:none;} 
}