@charset "utf-8";

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

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

/* ----------------------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; width: 98%; margin: 1%; padding: 2%; border: 1px solid blue;}
.half-width-col {float: left; width: 48%; margin: 1%; padding: 2%; border: 1px solid blue;}
.third-width-col {float: left; width: 31.33%; margin: 1%; padding: 2%; border: 1px solid blue;}
.quart-width-col {float: left; width: 23%; margin: 1%; padding: 2%; border: 1px solid blue;}

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


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

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

/*-----------------------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%;}
}