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

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

/* typography */
h1, h2, h3, h4, h5 {font-family: "Roboto Serif", serif;}

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

header {float: left; width: 100%; background-color: #a3711a;}
footer {float: left; width: 94%; height: auto; margin: 3%; border: solid #a3711a; background-color: #E5E5D1;}
#main-content {float: left; width:100%; margin: 0%;}

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

/* navigation styles */
nav{float: right; margin-top: 10px; margin-right: 20px;}
nav ul {list-style: none;}
nav li {display: inline-block; margin:0 10px; padding: 5px; background-color: #CFB584;}

nav li:hover {background-color: #A1834F;}

/* grid styles */
.full-width {float: left; width: 100%;}
.full-width-center {float: none; width: 94%; margin: 3%; padding: 1%; border: solid #a3711a; background-color: #E5E5D1;}
.half-width-column {float: left; width: 46%; margin: 2%; padding: 1%; border: solid #CFB584; background-color: #E5E5D1;}
.third-width-column{float: left; width: 29.33%; margin: 2%; padding: 1%; border: solid #CFB584; background-color: #E5E5D1;}
.special-third-width-column {float: left; width: 33.33%; margin: 0%; padding: 1%}
.right-third-width-column{float: right; width: 33.33%; margin: 0%; padding: 1%}
.two-third-column {float: right; width: 62.66%; margin: 2%; padding: 1%}
.foot-third-column {float: left; width: 29.33%; margin: 1%; padding: 1%;}
.quarter-width-column {float: left; width: 21%; margin: 2%; padding: 1%; border: solid #CFB584;}


/* Layout */

body {background-color: #4e7b26; margin: 0%; padding: 0%;}
#intro {background-color:  #799930;}
#info {background-color: #799930;}
#image1{width: fit-content; height: 300px;}
#image2 {width: 50%; height: 300px; background-image: url("../assets/images/image-placeholder_square.png"); background-position: center; background-repeat: no-repeat; background-size: cover;}
#bannerimg{width: 100%; height: 600px; background-image: url("../assets/images/HeaderImage.png"); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative;}
#logo {width: 50%; height: auto;}
#facelogo {width: 50%; height: auto;}
#instalogo {width: 30%; height: auto;}
#pettingzoo {width: 80%; height: auto;}

/* Breakpoints */

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

}

/* large */
@media only screen and (max-width: 1080px) {
    .quarter-width-column {width: 46%;}
}

/* x-small */
@media only screen and (max-width: 576px) {
    .half-width-column {width : 96%;}
    .third-width-column {width: 96%;}
    .quarter-width-column {width: 96%;}
}