@charset "utf-8";
/* CSS Document */


* {box-sizing: border-box;}
img {max-width: 100%;}


/* layout */
header {float: left; width: 100%; height: auto; background-color: rgb(207, 169, 92);}
footer {float: left; width:100% ; height:auto ; background-color: beige;}
#main-content {float:left; width:100%;}
section {float:left; width:100%;}

.full-width-col {float:left; width: 98%; margin: 1%; padding: 2%;}
.half-width-col {float:left; width: 48%; margin: 1%; padding: 2%;}
.thirds-width-col {float:left; width: 31.33%; margin: 1%; padding: 2%;}
.quarter-width-col {float:left; width: 23%; margin: 1%; padding: 2%;}

/*typograpgy*/
nav ul {list-style: none;}
nav li {display: inline-block; margin: 0 10px; background-color: rgb(0, 245, 86); padding: 15px;}


/* x-large */
@media only screen and (max-width: 1200px) {

}
/* large */
@media only screen and (max-width: 1080px) {
    .quarter-width-col {width: 48%;}
}
/* x-small */
@media only screen and (max-width: 576px) {
    .half-width-col {width: 98%;}
    .thirds-width-col {width: 98%;}
    .quarter-width-col {width: 98%;}
}


nav ul {list-style: none;}
nav ul {display: inline-block; margin 0 10px; padding: 15px;}
nav ul:hover {color:#10FF10;}

#site-logo{float:left; height: 120px; width: 200px; } 
#social{float:right; height: 40px; width: 200px;} 


button {#min-width: 80px; border: none; padding: 10px; border-radius: 50px; background-color: black;}
button a {color: #fff;}