:root{
  font-family: "Special Elite", system-ui;

  /* PALETA */ 
  --amarillo: #FFE066;
  --negro: #151515;
  --gris: #252422;
  --blanco: rgb(251, 252, 255);
}

html, body{
  font-size: 18px;
  scroll-behavior: smooth;
  font-weight: 400;
  hyphens: none; 
  color: var(--negro);
  background-color: #fff4e3;
}

.cuerpo{
  max-width: 36vw;
  /*Centrar el contenido */
  margin: 1rem auto;
  padding: 0 1rem;
  margin-bottom: 0;
}

h1{
  font-size: 2.8rem;
  margin: 0 auto;
  margin-bottom: .8em;
  line-height: 1.1;
  font-weight: 500;
  text-align: center;
  hyphens: none;
}

p{
  margin: 1rem 2px;
  font-size: clamp(1.2rem, 1.3vw, 1.5rem);
  line-height: 1.5;
  margin-bottom: 2rem;
}

s{
  text-decoration-thickness: .15em;
}

::selection{
  background-color: var(--amarillo);
  color: var(--gris);
}

.emoji{
  width: 1.3em; 
  vertical-align:bottom;
}

.cursor {
  display: inline-block;
  width: .5em;
  height: .1em;
  background: var(--gris);
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}




@media (max-width: 800px){
  .cuerpo{
    max-width: 99vw; /* importante que sea max-width y no solo max para que no se generen los callouts mal en móvil */
    margin: 0 auto;
    padding: 0 5px;
    margin-top: 1rem;
  }

  h1{
    padding: 0 2px;
    margin: 0;
    margin-bottom: 0;
    font-size: clamp(2rem, 2vw, 3.5rem);
  }

  p{    
    font-size: clamp(1rem, 1.1vw, 1.4rem);
    margin-bottom: 3rem;
  }

}