/* Tipografía sacada de Google Fonts */
@font-face {
  font-family: "Sour Gummy";
  src: url("/static/fonts/SourGummy-Medium.ttf")
}

/* Colores globales, el tema predeterminado es el oscuro */
:root {
  --bg-color-1: #1c1c1c;
  --bg-color-2: #292929;
  --fg-color-1: #eaeaea;
  --fg-color-2: #eaeaea;
  --link-color-normal: #00aaff;
  --link-color-active: #e60000;
  --border-color-normal: #a17bc0;
  --border-color-hover: #7978fc;
  --border-color-active: #0c59c2;

  /* Cursores */
  --hachiware-normal: url("/static/hachiware/hachiware_cursor.png");
  --hachiware-pointer: url("/static/hachiware/hachiware_link.png");
}

/* Colores globales para el tema claro */
[data-theme="light"] {
  --bg-color-1: #fff0f4;
  --bg-color-2: #ffcdda;
  --fg-color-1: #0f0f0f;
  --fg-color-2: #eaeaea;
  --link-color-normal: #1395d6;
  --link-color-active: #e60000;
  --border-color-normal: #ff89cb;
  --border-color-hover: #6fb9d6;
  --border-color-active: #61a0f6;

  body {
    background-image: url("/static/backgrounds/topography-light.svg");
  }
}

/* Eliminamos los posibles bordes que pudiera tener la página */
html, body {
    margin: 0;
    padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 95%;
  max-width: 1000px;
  margin: auto;
  background-color: var(--bg-color-1);
  background-image: url("/static/backgrounds/topography-dark.svg");
  background-repeat: repeat;
  color: var(--fg-color-1);
  font-family: "Sour Gummy", sans-serif;
  font-size: 20px;
  cursor: var(--hachiware-normal), auto;
}

/* Logo de Autumn64 */
#autumn64_logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  margin-top: 50px;
  margin-bottom: 30px;
}

#autumn64_logo img {
  max-width: 550px;
  width: 95%;
  transition: transform 0.2s ease;
}

#autumn64_logo img:hover {
  transform: scale(1.1);
}

#autumn64_logo img:active{
  transform: scale(0.9);
}

#back-btn {
  margin-top: 50px;
}

main {
  margin: 20px auto;
}

footer {
  margin-top: 50px;
}

a, button {
  cursor: var(--hachiware-pointer), auto;
}

a, a:visited {
  color: var(--link-color-normal);
  text-decoration: none;
}

/* El underline sólo se aplicará a los a que no contengan botón. */
a:not(:has(button)):hover {
  text-decoration: underline;
}

a:active {
  color: var(--link-color-active);
}

a:hover button {
  text-decoration: none;;
}

button {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  padding: 10px 20px;
  margin: 10px;
  background-color: var(--bg-color-2);
  color: var(--fg-color-1);
  font-family: "Sour Gummy", sans-serif;
  font-size: 20px;
  border-radius: 10px;
  border: none;
  outline: 3px var(--border-color-normal) solid;
  transition: transform 0.2s ease;
}

button:hover {
  outline: 3px var(--border-color-hover) solid;
  transform: scale(1.07);
}

button:active {
  outline: 3px var(--border-color-active) solid;
  transform: scale(0.93);
}

/* Sección para centrar los botones. */
.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

h1 {
  font-size: 42px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 32px;
}

h4 {
  font-size: 28px;
}

h5 {
  font-size: 22px;
}