:root {
  --gap-1: 0.5rem;
  --gap-2: 1rem;
  --gap-3: 1.5rem;
  --gap-4: 2rem;
  --gap-5: 2.5rem;
  --gap-6: 3rem;
  --columnas-3: 3;
  --columnas-4: 4;
  --width-maximo: min(100%, 100rem);
  --texto-claro: white;
  --texto-oscuro: black;
  --color-oscuro: #313534;
  --color-claro-2: linear-gradient(#ffdd9c, #ffd479);
  --color-claro: #fcba18;
  --tinte-claro: #fff3;
  --tinte-oscuro: #0003;
  --margen: 5%;
  --sombra-texto:
    0 2px 4px rgba(0, 0, 0, 0.9), 0 6px 12px rgba(0, 0, 0, 0.8),
    0 12px 24px rgba(0, 0, 0, 0.7);
  --borde: 1px solid var(--color-claro);
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.12);
  --fuente-principal:
    "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
  --fuente-motorcheck:
    "Antonio", "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;

  --white-glow: 0 0 0.5rem #fff2;
}

html {
  font-size: clamp(14px, calc(1px + 15 * ((100vw - 320px) / 1120)), 16px);
}

body {
  font-family: var(--fuente-principal);
  background: var(--color-oscuro);
  color: var(--texto-claro);
  display: flex;
  flex-flow: column;
  font-family:
    "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
}

h1,
h2,
h3 {
  text-align: center;
  font-family: var(--fuente-motorcheck);
}

button {
  background: transparent;
  cursor: pointer;
  color: var(--color-claro);
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 2.5em;
}

h3 {
  font-size: 1.4em;
}

p {
  font-size: 1em;
}