@import url('https://fonts.googleapis.com/css2?family=PT+Sans&family=Smokum&display=swap');

* { box-sizing: border-box; }

body { font-family: 'PT Sans', sans-serif; margin: 0; }

.logo { float: left; }

header > div {
    padding: 10px;
    font-family: 'Smokum', cursive;
    background-color: #eee;
}

.heading { font-size: 4em; color: black; text-align: center; }
.subheading { font-size: 2.5em; color: #333; text-align: center; margin-bottom: 30px; }

/* Navigation */
header nav { background-color: #222; clear: both; }
header nav ul { list-style: none; padding: 0; margin: 0; overflow: hidden; }
header nav ul li { float: left; }
header nav a {
    display: block;
    padding: 0 20px;
    line-height: 50px;
    color: white;
    text-decoration: none;
}
header nav a:hover { background-color: red; }

.menu { display: none; padding: 15px; color: white; background: black; cursor: pointer; }

/* Main Content */
.main { background-color: #eee; padding: 20px; clear: both; }
.main img { float: left; max-width: 100%; border: 10px white solid; margin: 10px; }
.main article { overflow: hidden; border-bottom: 1px solid #ccc; padding: 20px; }
.main article p::first-letter { font-size: 2em; color: red; }

/* Footer */
.footer { background-color: black; color: white; padding: 20px; text-align: center; }
.footer:after { content: ""; display: table; clear: both; }
.footer > div { float: left; width: 33.3%; border: 1px solid #333; padding: 10px; }

/* Responsive Media Query */
@media (max-width: 740px) {
    header nav ul li { width: 100%; }
    .menu { display: block; text-align: center; }
    .hide { display: none; } /* Used by JS to toggle menu */
    .footer > div { width: 100%; }
    .heading { font-size: 2.5em; }
}