@import url("https://fonts.googleapis.com/css2?family=Jaro:opsz@6..72&display=swap");

* {
  position: relative;
  box-sizing: border-box;
}

body {
  margin: 20px;
  background: #000;
}

.halftone {
  width: 100%;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5vw;
  margin-bottom: 20vh;
}

.halftone-bg {
  position: absolute;
  user-select: none;
  borer: 4px solid red;
  --startY: -100%;
  --startX: 0%;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(
      at var(--startX) var(--startY),
      var(--color1),
      var(--color2)
    ),
    radial-gradient(var(--color3), var(--color4), var(--color5));
  background-size:
    100% 100%,
    10px 10px;
  background-blend-mode: multiply;
  background-position:
    0 0,
    0 0;
  filter: contrast(10);
}

.halftone-content {
  background: rgb(0, 0, 0, 0.6);
  border-radius: 20px;
  color: #efefef;
  font-family: Jaro;
  padding: 5vw;
  font-size: 1.6em;
  font-family: sans-serif;
  line-height: 1.8em;
}

.halftone-content h1 {
  font-family: Jaro, sans-serif;
  font-size: 3em;
}

.blue {
  --color5: rgb(151.69121, 24.52851, 4.63409);
  --color4: rgb(155.33974, 160.29589, 216.52642);
  --color3: rgb(33.02351, 214.37467, 233.88442);
  --color2: rgb(110.60563, 105.02833, 78.51893);
  --color1: rgb(212.30321, 241.19852, 234.99297);
}

.halftone:nth-of-type(odd) .halftone-bg {
  --startX: 100%;
}

.centered {
  font-family: sans-serif;

  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-direction: column;
}

h2 {
  font-weight: normal;
  color: #ccc;
}