/* ===========================
   A carta 1 foi feita sem o reset do base.css.
   Estas regras desfazem o reset só aqui, para
   ela continuar exatamente como era.
=========================== */

* {
  box-sizing: content-box;
}

h1 {
  margin-top: 0.67em;
}

p {
  margin-top: 1em;
}

body {
  background: #f5e6c8;

  font-family: "Lora", Georgia, serif;

  margin: 0;

  padding: 40px;

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;
}

/* folha da carta */

/* border-box para o padding não estourar a largura em tela estreita;
   920px = os mesmos 800px de texto + 60px de padding de cada lado */
.carta {
  box-sizing: border-box;

  max-width: 920px;

  width: 100%;

  background: #fffdf7;

  padding: 60px;

  border-radius: 12px;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);

  line-height: 1.9;

  position: relative;

  overflow: hidden;

  animation: aparecerCarta 0.9s ease;
}

/* selo */

.carta::before {
  content: "✉";

  position: absolute;

  top: 20px;

  right: 25px;

  background: radial-gradient(
    circle at 35% 30%,
    #d8a13a,
    #b8860b 65%,
    #96690a
  );

  color: white;

  width: 45px;

  height: 45px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.35);
}

/* dobra de papel no canto */

.carta::after {
  content: "";

  position: absolute;

  width: 0;

  height: 0;

  right: 0;

  bottom: 0;

  border-style: solid;

  border-width: 0 0 34px 34px;

  border-color: transparent transparent #eadfc4 transparent;

  box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.08);
}

/* animação da carta */

@keyframes aparecerCarta {
  from {
    opacity: 0;

    transform: translateY(20px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/* animação escalonada dos elementos internos */

@keyframes aparecerItem {
  from {
    opacity: 0;

    transform: translateY(14px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

.carta > * {
  opacity: 0;

  animation: aparecerItem 0.7s ease forwards;
}

.carta > h1 {
  animation-delay: 0.2s;
}
.carta > .poema {
  animation-delay: 0.45s;
}
.carta > p:nth-of-type(1) {
  animation-delay: 0.7s;
}
.carta > p:nth-of-type(2) {
  animation-delay: 0.9s;
}
.carta > .frase-final {
  animation-delay: 1.15s;
}
.carta > .assinatura {
  animation-delay: 1.4s;
}

/* título */

h1 {
  font-family: "Playfair Display", serif;

  text-align: center;

  color: #5a3e2b;

  margin-bottom: 50px;

  font-size: 38px;
}

/* texto normal */

p {
  font-size: 20px;

  color: #333;

  text-align: justify;

  margin-bottom: 25px;
}

/* abertura */

.poema {
  text-align: center;

  font-style: italic;

  margin: 45px 0;

  font-size: 24px;

  color: #4b3728;

  line-height: 1.8;
}

/* frase final */

.frase-final {
  margin-top: 70px;

  text-align: center;

  font-family: "Playfair Display", serif;

  font-size: 25px;

  font-weight: 600;

  color: #5a3e2b;

  padding: 20px;
}

/* assinatura */

.assinatura {
  text-align: right;

  margin-top: 70px;

  font-style: italic;

  font-size: 19px;

  color: #5a3e2b;
}

/* voltar */

/* dentro da folha, centralizado abaixo da assinatura */
.voltar {
  display: block;

  width: fit-content;

  margin: 40px auto 0;

  padding: 12px 26px;

  border-radius: 30px;

  background: #8b5e3c;

  color: #fffdf7;

  text-decoration: none;

  font-weight: bold;

  font-size: 15px;

  transition: 0.3s;

  opacity: 0;

  animation: aparecerItem 0.7s ease forwards;

  animation-delay: 1.6s;
}

.voltar:hover {
  transform: translateY(-3px);

  background: #734a2c;

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

/* foco pelo teclado (não aparece no clique do mouse) */
a:focus-visible {
  outline: 3px solid #8b5e3c;

  outline-offset: 4px;
}

/* ===========================
RESPONSIVO
=========================== */

@media (max-width: 700px) {
  body {
    padding: 20px;
  }

  .carta {
    padding: 38px 28px;
  }

  h1 {
    font-size: 30px;
  }

  p {
    font-size: 18px;

    /* justificado em tela estreita abre buracos entre as palavras */
    text-align: left;
  }

  .poema {
    font-size: 20px;
  }

  .frase-final {
    font-size: 21px;
  }
}