@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: 10 5px; padding: 15px; background-color: #e515f8}
li:hover {background-color: #ffffff}

/* grid styles*/

.fullwidth {float:left; width: 100%;}
.half-width-column {float: right; 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: #e515f8;}
footer {float:left; width: 100%;  background-color: #ffffff;}
section {float: left; width: 100%;}
#main-content {float:left; width: 100%;}

#logo {float: left; width: 200px; 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: 400px; height:300px; background-image: url("/home/jay/Desktop/Pawfection/assets/img/Logo\ -\ Text.jpg"); background-size: 
cover; background-repeat: no_repeat;}
#image_hover:hover {background-image: url("/home/jay/Desktop/Pawfection/assets/img/Logo\ -\ Text.jpg");}

/*--- Breakpoints ---*/



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

}

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

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