:root {font-family: 'Roboto', sans-serif}
body {background-color: #1f2937; margin: 0;}
header, aside {background-color: #1f2937; max-width: 1200px; margin: auto;}
header, nav, aside, main div {display: flex; align-items: center; justify-content: space-between;}
header a {font-size: 18px; font-weight: 700; padding: 16px; color: #e5e7eb; text-decoration: none;}
nav a:hover, main a:hover {color: rgb(217, 165, 32);}
aside {padding: 64px 0;}
aside div, aside img, main div, main section {padding: 16px;}
main section h2, main section p {padding: 0 16px;}
h1 {font-size: 48px; font-weight: 900; color: #f9faf8; margin: 0;}
aside p {font-size: 18px; color: #e5e7eb; margin: 0;}
aside img {max-width: 600px; min-width: 220px;}
figure img {width: 100%; object-fit: cover;}
#dh path {fill: #f9faf8;}
#dh:hover path {fill: rgb(217, 165, 32);}
main {background-color: #f9faf8;}
main section, main div, blockquote {max-width: 1200px; margin: auto;}
h2 {font-size: 36px; font-weight: 900; color: #1f2937; text-align: center;}
section p {font-size: 18px; color: #1f2937; text-align: center;}
.row {padding: 32px 0 64px 0;}
.col {width: 100%; background-color: #3882f6; margin: auto; border-radius: 8px;}
.col button {background-color: #3882f6; font-size: 18px; font-weight: 700; padding: 16px; color: #f9faf8; margin: 24px auto; text-align: center; border: 3px solid; border-radius: 8px;}
.col button:hover {background-color: #f9faf8; color: #3882f6;}
footer {font-size: 18px; text-align: center; color: #e5e7eb;}
figcaption {font-size: 16px; text-align: center;}
main a {color: #1f2937; text-decoration: none;}
main img:hover {filter: brightness(80%);}
blockquote p {font-size: 28px; font-weight: 300; color: #1f2937; background-color: #e5e7eb; padding: 64px; border-radius: 8px;}
@media screen and (max-width: 600px) {
  header, nav, aside, main div {flex-direction: column; text-align: center;}
  aside img {max-width: 300px;}
  .col {width: 90%;}
}