/* cosmetics */

@import url(https://fonts.googleapis.com/css?family=Muli);

* {
	margin: 0;
	padding: 0;
}

li {
	list-style-type: none;
}




/* page layout */




header{
	grid-column: 1/5;
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
	background-color: #90FAF0; /* For browsers with no colour-grad support */
    background-image: linear-gradient(0deg, #90FAF0, #07A99A);
	}

/* Header formatting */

a{
    color: #EEF315;
    text-decoration: none;
}


h1{
    grid-column: 1/2;
    display: grid;
    font-size: 3vw;
    padding: 2%;
    
}


nav{
    grid-column: 2/5;
    display: grid;
    grid-template-columns: 75% 25%;
     
}



#nav li{
    display: inline-block;
    padding: 20% 4% 1% 6.25%;
    font-size: 1.6vw;
         
}

#sn li{
    display: inline;
    
}




#sn img{
    width: 45%;
    padding-top: 45%;
  }



body {
	display: grid; /* all children of the body in a grid */
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr ; 
	/* five columns using the fr unit */

	/* cosmetics */
    
	padding: 1% 1% 1% 18%;
	font-family: Muli;
    
    
}






/* Main Body - Grid for gallery */


#gallery{
            grid-column: 2/5;
            display: grid;
            grid-template-columns: 25% 25% 25% 25%;
            padding: 4%;
        }
        
#gallery li{
    padding: 3%;
    font-size: 0.65vw;
}     

aside{
            grid-column: 1;
            grid-row: 2;
            padding-top: 13.25%;
                
}


 img {
	width: 100%;

}      

/* footer formatting */

footer{
	padding: 1.5%;
	grid-column: 1/5;
    display: grid;
    grid-template-columns: 1fr 1fr;
	background-color: #90FAF0; /* For browsers with no colour-grad support */
    background-image: linear-gradient(0deg, #90FAF0, #07A99A);
    font-size: 0.5vw;
	
}

#validation {
                text-align: right;
}