@font-face {
  font-family: moonlitFont;
  src: url(moonlit_italic.woff2) format("woff2"),
       url(moonlit_italic.woff) format("woff"),
       url(moonlit_italic.ttf) format("opentype");
  font-display: swap;
}
html {
  background-image: url("imgs/bg/bg-1920w.webp");
  background-repeat: repeat-y;
  background-size: cover;
}
h1 {
  font-size: 4rem;
  margin-bottom: 1rem;
}
h2 {
  font-size: 2rem;
}
h1, h2 {
  font-family: moonlitFont, Arial, Helvetica, sans-serif;
  font-style: italic;
  color: #dd8617;    
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
  width: 100%;
  text-align: center;
}
#titleSection {
  width: 100%;
}
#imageSection {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}
#imageSection > img {
  max-width: 30rem;
  width: 40%;
  height: auto;
  border-radius: 2rem;
  margin: 2rem;
  box-shadow: .5rem .5rem 1rem rgba(10, 10, 10, 0.5);
}
@media (max-width: 320w) {
  html {
    background-image: url("imgs/bg/bg-320w.webp");
  }
}
@media (max-width: 768px) {
  html {
    background-image: url("imgs/bg/bg-768w.webp");
  }
  #imageSection > img {
    width: 80%;
    max-width: 80%;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  html {
    background-image: url("imgs/bg/bg-1024w.webp");
  }
  #imageSection > img {
    max-width: 20rem;
  }
}