:root {
/* change your color choices below */
--shade1: #d7d9d0;
--shade2: #cdc0d4;
--shade3: #c1c4b5;
--shade4: #b1b5a3;
--shade5: #9ea38c;
--shade6: #868c6f;
--shade7: #686f4b;
--shade8: #424b1e;
--shade9: #2f380f;


/* Change fonts here (make sure to get new fonts from Google fonts) */
--header-font: 'Roboto', sans-serif;
--text-font: 'Alegreya', serif;
}

body,html {
margin: 0;
background-color: var(--shade3);
font-family: var(--text-font);
font-size: 1.2em;
line-height: 1.4em;
}

h1, h2, h3 {
font-family: var(--header-font);
}

#header {
position: relative;
max-width: 1500px;
margin-left: auto;
margin-right: auto;
}

#header img {
max-width: 100%;
height: auto;
margin: 0;
}

#hquote {
position: absolute;
top: 50px;
left: 10px;
font-size: 0.8em;
color: white;
}

#hquote h1 {
text-align: center;
}

#hquote a {
color: white;
}

#main {
color: var(--shade8);
}

#main div {
padding: 20px;
}

#main a {
color: var(--shade9);
font-weight: bold;
}

#main img {
display: block; 
border-radius: 5px;
margin: auto;
max-width: 50%;
height: auto;
}

#main section:nth-child(even) {
background-color: var(--shade4);
}

.page-footer {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  color: var(--shade1);
  background-color: var(--shade9);
}

.footer-left,
.footer-mid,
.footer-right {
display: flex;
gap: 25px;
}

.page-footer a {
text-decoration: none;
font-weight: bold;
color: var(--shade1);
}

.fade-in { animation: fadeIn 3s; }
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

/* Target mobile phones */
@media screen and (max-width: 590px) {
  #hquote {
  font-size: 0.6em;
  }

  #main img {
  max-width: 70%;
  height: auto;
  }

  .title {
    display: none;
  }
}

/* Printing */
@media print {
  header {
  display: none;
  }
}