@charset "utf-8";

* {
box-sizing: border-box;
}

html {
background-color: #17324d;
}

body {
font-family: Verdana, Geneva, sans-serif;
color: rgb(91, 91, 91);
background-color: ivory;
}

header img {
display: block;
width: 100%;
}

h1,
h2 {
text-shadow: gray 4px 6px 5px;
}

nav {
background-color: #17324d;
width: 100%;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}

nav ul::after {
content: "";
display: table;
clear: both;
}

nav a {
display: block;
background-color: #17324d;
color: white;
line-height: 2.8em;
text-decoration: none;
text-align: center;
}

nav a:hover {
background-color: #d7a84b;
color: black;
}

main {
padding: 20px;
}

main ul {
list-style-type: square;
}

footer {
clear: both;
background-color: #17324d;
color: white;
text-align: center;
padding: 10px;
}


/* VACATION GALLERY */

.gallery {
display: flex;
flex-flow: row wrap;
width: 100%;
gap: 10px;
margin: 20px 0 30px 0;
}

.gallery img {
display: block;
width: calc(25% - 8px);
height: 180px;
object-fit: cover;
border-radius: 4px;
}

.vacation-intro {
text-align: center;
margin-bottom: 20px;
}

.vacation-card {
background-color: white;
padding: 15px;
margin-bottom: 15px;
border-left: 5px solid #17324d;
}


/* MOBILE */

@media only screen and (max-width: 768px) {

body {
width: 100%;
margin: 0;
}

nav li {
float: none;
font-size: x-large;
width: 100%;
}

nav a {
border-bottom: 1px solid black;
}

main > img {
width: 90%;
float: none;
}

.gallery img {
width: calc(50% - 5px);
}

}


/* SMALL PHONE */

@media only screen and (max-width: 480px) {

.gallery img {
width: 100%;
}

}


/* DESKTOP */

@media only screen and (min-width: 769px) {

html {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}

body {
width: 90%;
margin: 0 auto;
}

nav li {
display: block;
width: 20%;
float: left;
}

main > img {
width: 25%;
padding: 25px;
float: right;
}

}