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

*{box-sizing: border-box;} 

img {max-width: 100%;}

/* typography */ 

h1, h2, h3, h4 {font-family: "Playfair Display", serif;}

html {font-family: "SUSE", sans-serif;}


/* layout */


#test-image {width: 250px; height: auto;}
#test-image2 {width: 250px; height: 250px; background-image: url("../assests/e099a8_be7fb51856614e35bdc67e63dc351957~mv2.webp"); background-size: contain; background-repeat: no-repeat;}
#test-image2:hover {background-image: url("../assests/filename-394145-383977391617815.jpg");}

.img-with-border {border: #000000; border-width: 5px; border-style: solid;}
.half-width-col-border {float: left; width: 48%; margin: 1%; padding: 2%; border: #000000; border-style: solid; border-radius: 5px; border-width: 5px; background-color: #a1b172;}

#main-content {width: 100%;} 
#site-logo {float:left; width: 200px; height: 120px;}
#social {float:right; 200px; height: 35px;} 

.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%;}
.quarters-width-col {float: left; width: 23%; margin: 1%; padding: 2%; border: #000000; border-style: solid; border-radius: 5px; border-width: 5px; background-color: #a1b172;}

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

body {padding: 0; margin: 0; background-color: #8FA157;}

header {float: left; width: 100%; height: auto; background-color: #3d6a06;}
footer{float: left; width: 100%; height: auto; background-color: #3d6a06; border: solid; border-width: 4px; border-color: #000000; text-align: left;}

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



/* navigation */

nav ul {list-style: none;}
nav li {display:inline-block;margin:0 10px 0 10px; background-color:#8FA157;padding: 15px; border-radius: 10px; border: #000000; border-style: solid;}
nav li:hover {background-color:#3d6a06;}
nav li a {color: #000000;}


/*--------------------| BREAKPOINTS |--------------------*/

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

}

/* large */
@media only screen and (max-width: 1000px) {
    .quarters-width-col {width: 48%;}
}

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