#header-bg {
  height: 50vh;
  background-color: brown;
  background: radial-gradient(
      rgba(66, 32, 4, 0.9) 100%,
      rgba(66, 32, 4, 0.9) 100%
    ),
    url("../img/tim-gouw-1K9T5YiZ2WU-unsplash.jpg");
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #edeceb;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#creds {
  padding: 20px;
  color: white;
  text-align: center;
  background-color: rgba(66, 32, 4, 1);
}

#header h1,
#header h3 {
  text-align: center;
  text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.2);
  padding-bottom: 1vh;
}

#root {
  display: flex;
  /* width: 100%; */
  flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
  font-family: "Crimson Text", serif;
  overflow-wrap: break-word;
}

div {
  padding: 0px;
  margin: 0px;
}

#creds a {
  font-weight: bold;
  color: white;
  font-style: italic;
}

#essay {
  padding: 10vh 10vw;
  background-color: #f7f6f5;
  line-height: 170%;
}

.emphasis-block {
  margin: 2vh 0px;
  border-radius: 10px;
  padding: 30px;
  background-color: rgba(66, 32, 4, 1);
  color: white;
  font-style: normal;
}

.quote-block {
  margin: 20px 0px;
  border-left: 0.5vw solid #10a7e3;
  padding-left: 30px;
  padding-bottom: 0vh;
}

html {
  scroll-behavior: smooth;
}

#essay h2 {
  padding-bottom: 2vh;
  font-weight: normal;
}

div.quote-block > h2,
div.emphasis-block > h2 {
  font-weight: 600 !important;
}

@media screen and (min-width: 900px) {
  .quote-block {
    border-left: 0.25vw solid #10a7e3;
  }

  #essay {
    padding: 10vh 15vw;
  }
}

.h {
  background-color: cornsilk;
  color: black;
  font-weight: normal;
}

.sources {
  background-color: #10a7e3;
}

h4 > a {
  color: white;
}