body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #f4f1eb;
  /* background: radial-gradient(
          circle at 50% 40%,
          #fbfaf6 0%,
          #ede8dd 100%
        ); */
}

/*.hero-title .kerning-t {
        letter-spacing: -0.08em;
      } */

.hero-title {
  font-family: "Montserrat", sans-serif;
  font-size: 12rem;
  font-weight: 800;
  color: #202020;
  letter-spacing: -0.01em;
  margin: 0;
  user-select: none;

  /* The Letterpress Effect:
    1. A slight white highlight on the bottom/right edges to simulate light hitting the indent.
    2. A soft dark shadow on the top/left to simulate the depth of the cut.
    */
  text-shadow:
    1px 2px 2px rgba(255, 255, 255, 0.9),
    -1px -2px 3px rgba(0, 0, 0, 0.15);
}

.hero-title .eopen,
.hero-title .eclose {
  color: #d69456;
}

.hero-title .phonetic-ipa {
  font-family: "Source C/**/ode Pro", monospace;
  font-size: 2rem;
  text-align: center;
  color: #8e7d71;
  letter-spacing: 0;
  font-style: normal;
}

.hero-title p {
  font-size: 1.5rem;
  font-weight: lighter;
  font-style: italic;
  color: #6d0807;
  margin-top: 20px;
  letter-spacing: 0.05em;
  text-align: center;
  /* text-shadow: none; */
}

/* .hero-title .eopen {
        position: relative;
        transform-origin: center;
        transform: rotate(-15deg);
        display: inline-block;
      }
      .hero-title .eclose {
        top: +0.6em;  
        position: relative;
        transform-origin: center;
        transform: rotate(15deg);
        display: inline-block;
      } */

/* Make it responsive for smaller screens */
@media (max-width: 768px) {
  .hero-title {
    font-size: 20vw;
  }

  .hero-title p {
    font-size: 4vw;
  }
}