:root {
  --theme-dark: rgba(22, 16, 50, 1);
  --theme-hilight: rgba(221, 96, 49, 1);
  --theme-primary-dark: rgba(98, 23, 8, 1);
  --theme-bright: rgba(253, 253, 255, 1);
  --theme-off-white: rgba(254, 245, 236, 1);
  --theme-primary-content: rgba(246, 208, 189, 1);
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--theme-off-white);
}

body {
  height: 100vh;
  height: 100dvh;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Domine", serif;
}

.hero-wrap {
  position: relative;
  width: 32rem;
  max-width: 92vw;
}

.hero {
  padding: 2rem 2rem;
  color: var(--theme-off-white);
  background-color: var(--theme-hilight);
  font-size: 1.25rem;
  line-height: 1.5em;
  overflow: hidden;
  position: relative;
}

.hero h1 {
  /* font-size: 1.25rem; */
  font-family: "Domine", serif;
  color: var(--theme-dark);
}

.nw {
  white-space: nowrap;
}

.para,
.para-neg {
  position: absolute;
  top: 1rem;
  right: -1.5rem;
  font-size: 5rem;
  user-select: none;
}

.para svg,
.para-neg svg {
  display: block;
  width: 4rem;
  height: auto;
}

.hero .extra {
  font-size: 1rem;
  color: var(--theme-primary-content);
  line-height: 1.375;
}

/* Minimum width */
@media (min-width: 1080px) {
  .hero-wrap {
    width: 42rem;
  }

  .hero {
    padding: 3rem 4rem;
    font-size: 1.5rem;
  }

  .hero h1 {
    font-size: 3.75rem;
    margin-bottom: 3rem;
  }

  .hero .extra {
    font-size: 1.25rem;
  }
}