/* Importar todas las configuraciones de Open Sans desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}

body, html {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    line-height: 1.5; /* Aumenta el espacio entre las líneas de texto */
    margin: 0;
    background: var(--background-color-4);
}

:root {
  --background-color-1: #dae6ff;   /* Fondo principal – blanco hielo */
  --background-color-2: #fafafa;   /* Tarjetas – gris muy claro azulado */
  --background-color-3: #05102a;   /* Botón – azul cristalino */
  --background-color-4: #ffffff;   /* Caja destacada – blanco puro */
  --background-color-5: #e5e5e5;   /* Fondo alternativo – gris azulado pastel */
  --background-color-6: #c8c8c8;   /* Iconos apagados – gris azulado */

  --text-color-1: #1a2633;         /* Texto principal – azul gris oscuro */
  --text-color-2: #5c6b7a;         /* Texto secundario – gris frío */
  --text-color-3: #ffffff;         /* Texto sobre botones */
  --text-color-4: #cacaca;         /* Texto sobre botones */
  --accent-color: #4781ff;         /* Acento – celeste vibrante */

  --rank-color-1: #4781ff;         /* Texto principal – azul gris oscuro */
  --rank-color-2: #4781ff;         /* Texto secundario – gris frío */
  --rank-color-3: #4781ff;         /* Texto sobre botones */
}

dt, button, a{
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

header, main, footer {
    width: 100%;
}

header {
    display: flex;
    z-index: 10;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px; /* Menor espacio entre secciones para mejorar la legibilidad */
}

footer {
    display: flex;
}

/* Encabezados */
h1 {
    font-size: 2rem; /* Un poco más grande para destacar */
    font-weight: 700;
}

h2 {
    font-size: 1.5rem; /* Título secundario más grande */
    font-weight: 600;
}

h3 {
    font-size: 1.3rem;
    font-weight: 500;
}

h4 {
    font-size: 1.1rem;
    font-weight: 500;
}

h5 {
    font-size: 1rem;
    font-weight: 400;
}

h6 {
    font-size: 0.5rem;
    font-weight: 400;
}

/* Párrafos */
strong, p {
    font-size: 1.1rem; /* Texto de párrafo más normal */
    line-height: 1.6; /* Mejor espaciado entre líneas */
}

/* Listas */
ul, ol {
    margin-bottom: 20px;
    margin-left: 20px;
}

li {
    margin-bottom: 8px; /* Espaciado entre los elementos de lista */
}