@charset "utf-8";

s
/* ----------------------home page---------------------------- */
/*wild card element that allows boxes on webpage to sit flush with each other even with borders*/
*{box-sizing:border-box;}


/* --------------------------columns----------------------------*/

/*creates an organised layout for the webpage in boxes*/
.full-width-col {float:left; text-align:center; width:98%; margin:1%; padding:2%; border:solid blue 1px;}
.half-width-col {float:left; width:48%; margin:1%; padding:2%; border:solid blue 1px;}
.third-width-col {float:left; width:31.3333%; margin:1%; padding:2%; border:solid blue 1px;}
.quart-width-col {float:left; width:23%; margin:1%; padding:2%; border:solid blue 1px;}

section {float:left; width:100%;}


/*---------------------Navigation------------------------*/
nav li{list-style:none;}

nav li {display:inline-block; margin:0px; background-color:lightgray; padding:15px;}


/*----------------------------fonts----------------------------*/
#title {font-family: "Nerko One", cursive; font-size:30px;}

p {font-family: "Cabin", sans-serif;}


/*-----------------------BREAKPOINTS---------------------------*/
/*responsive css for different size screens*/
@media only screen and (max-width: 1200px) {

}
@media only screen and (max-width: 1080px) {
    .quart-width-col {width: 48%;}
}
@media only screen and (max-width: 576px) {
    .half-width-col  {width: 98%;}
    .third-width-col {width: 98%;}
    .quart-width-col {width: 98%;}
}