@charset "utf-8";

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

/*navigation styles */

nav ul {list-style: none;}
nav li {display: inline-block; margin: 10px 5px; padding: 15px; background-color: #ffffff;}
nav li:hover {background-color: #f0f0f0}

/* grid styles*/

.fullwidth {width: 100%;}
.half-width-column {float: left; width: 46%; margin: 2%; padding: 5%;}
.third-width-column {float: left; width: 29.33%; margin: 2%; padding: 5%;}
.quarter-width-column {float: left; width: 21%; margin: 2%; padding: 5%;}

/*--- layout style ---*/

body {margin: 0; padding: 0; background-color: #ffffff;}
header {float:left; width: 100%; background-color: #ffffff;}
footer {float:left; width: 100%;  background-color: #ffffff;}
section {float: left; width: 100%;}
#main-content {float:left; width: 100%;}

#logo {float: left; width: 20vw; max-width: 300px; height: auto; margin-right: 20px;}
#social {float: right; width: 120px; height: auto; margin-left: 20px;}
#social-media {float: left; width: 120px; height: auto; margin-left: 20px;}

/* layout */
#image {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 4 / 3;
    background-image: url("assets/healthyquest.png");
    background-size: cover;
}

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

}

/* Large */
@media only screen and (max-width: 1000px) {
    .quarter-width-column {width: 46%;}
    #logo {width: 50vw; max-width: 150px;}
}

/* Small */
@media only screen and (max-width: 576px) {
    .half-width-column {width: 96%; margin: 0;}
    .third-width-column {width: 96%; margin: 0;}
    .quarter-width-column {width: 96%; margin: 0;}
    #logo {width: 50vw; max-width: 150px;}
}