html {
  background-image: url(images/website_background.jpg)
}

.white h1 {
  font-family: "Fascinate", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 200%;
  color: #F2F2F2;
  padding: 0 0 2px 80px;
  border-bottom: 2px #F2F2F2;
  background: url(images/white_hat.png) no-repeat;
}

.white p {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
  color: #F2F2F2;
  font-size: 100%;
  line-height: 150%;
  margin-bottom: 10px;
  line-height: 150%;
}

.red h2 {
  font-family: "Fascinate", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 220%;
  color: #F2060A;
  border-bottom: 2px #F2060A;
  padding: 0 0 2px 80px;
  background: url(images/red_hat.png) no-repeat;
}

.red p {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 100%;
  color: #F2060A;
  line-height: 150%;
  line-height: 150%;
}

.black h3 {
  font-family: "Fascinate", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 210%;
  color: #636363;
  border-bottom: 2px #636363;
  padding: 0 0 2px 80px;
  background: url(images/black_hat.png) no-repeat;
}

.black p {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
  color: #636363;
  font-size: 100%;
  line-height: 150%;
}

.yellow h2 {
  font-family: "Fascinate", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 220%;
  color: #FFE673;
  border-bottom: 2px #FFE673;
  padding: 0 0 2px 80px;
  background: url(images/yellow_hat.png) no-repeat;
}

.yellow p {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
  color: #FFE673;
  font-size: 100%;
  line-height: 150%;
}

.green h1 {
  font-family: "Fascinate", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 200%;
  color: #1D9942;
  border-bottom: 2px #1D9942;
  padding: 0 0 2px 80px;
  background: url(images/green_hat.png) no-repeat;
}

.green p {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
  color: #1D9942;
  font-size: 100%;
  line-height: 150%;
}

.blue h2 {
  font-family: "Fascinate", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 220%;
  color: #0022ED;
  border-bottom: 7px #0022ED;
  padding: 0 0 2px 80px;
  background: url(images/blue_hat.png) no-repeat;
}

.blue p {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
  color: #0022ED;
  font-size: 100%;
  line-height: 150%;
}