:root {
  --poppins: "Poppins", sans-serif;
	--josefin: "Josefin Sans", sans-serif;
	--b612-mono: "B612 Mono", monospace;
  --moraito: #ba68c8;
	--lite-moradito: #d6a4de;
	--black-bg: #27272c;
	--agua: #68c8ba;
	--casi-blanco: #f2f0f3;
	--verde-code: #61CE70;
	--sea-green: #00916E;
	--lime-green: #bced09;
	--terra-lite: #c9ba6b;
	--terra-golden: #dea800;
	--terra-dark: #926E00;
	--rojito: #cc3366;
	--azul-elect: #6475f1;
	--azul-gris: #35474f;
  --gris-text: #54595F;
		
}

/* centrado vertical y horizontal */
body {
  color: var(--gris-text);
  font-family: var(--b612-mono);
  font-weight: 400;
  font-style: normal;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
  justify-content: space-around;
  /*margin: 0;*/
  text-align: center;
}

/* Asegura que el contenedor principal mantenga un diseño limpio */
main.container {
  width: 100%;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 5vh; /* flex to gap */
}

h1 {
  color: var(--sea-green);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 20px;
}

h2 {
  font-family: var(--josefin);
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 3px;
}

p, footer {
  letter-spacing: 2px;
}

h1,
div#logo {
  padding: 5vh;
}

#logo a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  font-family: var(--b612-mono);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 20px;
}

#logo a {
  color: var(--black-bg);
}

#logo a span {
  color: var(--moraito);
}

@media (max-width: 768px) {
  body {
    line-height: 5vh;
  }
  h1 {
      font-size: 20px;
    }
  #logo a {
    font-size: 18px !important;
  }
}