body {

margin:0;

font-family: Georgia, serif;

background:#f8f5f0;

color:#222;

}


header {

background:#1f2a44;

color:white;

padding:25px 40px;

display:flex;

justify-content:space-between;

align-items:center;

}


.logo {

font-size:30px;

font-weight:bold;

}


nav a {

color:white;

text-decoration:none;

margin:15px;

}


.hero {

background:

linear-gradient(
rgba(31,42,68,.8),
rgba(31,42,68,.8)
),

url('../images/history.jpg');


background-size:cover;

background-position:center;

padding:120px 20px;

text-align:center;

color:white;

}


.hero h1 {

font-size:55px;

}


section {

padding:50px;

}


.card {

background:white;

padding:25px;

margin-bottom:30px;

border-radius:12px;

box-shadow:0 5px 20px rgba(0,0,0,.1);

}


.card img {

width:100%;

max-width:500px;

}


.card a {

display:inline-block;

background:#b08d57;

color:white;

padding:10px 20px;

text-decoration:none;

border-radius:5px;

}


footer {

background:#111;

color:white;

text-align:center;

padding:25px;

}



@media(max-width:700px){


header{

display:block;

}


.hero h1{

font-size:35px;

}


section{

padding:20px;

}


}
.featured {

background:white;

padding:40px;

margin-bottom:40px;

border-radius:15px;

box-shadow:0 5px 20px rgba(0,0,0,.1);

}


.featured h1 {

font-size:40px;

}


.featured a {

background:#b08d57;

color:white;

padding:12px 25px;

text-decoration:none;

border-radius:5px;

}
.share-buttons {

margin-top:40px;

}


.share-buttons a {

display:inline-block;

background:#1f2a44;

color:white;

padding:10px 20px;

margin:5px;

text-decoration:none;

border-radius:5px;

}


.share-buttons a:hover {

background:#b08d57;

}