@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;
  --color1: rgb(254.74788, 223.19305, 202.56902);
  --color2: rgb(132.27804, 153.36883, 164.12747);
  --color3: rgb(34.72615, 115.23669, 110.64527);
  --color4: rgb(124.53858, 211.34492, 249.87681);
  --color5: rgb(76.41584, 168.15071, 156.45124);
  --start: -200%;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(at 50% var(--start), 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,
    100% 100%;
  filter: contrast(10);
}

.halftone-content {
  background: rgb(0, 0, 0, 0.7);
  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;
}

.centered {
  font-family: sans-serif;

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

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