/*
Amarillo y Azul
Rocio Sanchez Lomas
*/

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Variables globales */
:root {
    /* Opciones de texto por defecto*/
    --fuente-texto: 'Atkinson Hyperlegible', sans-serif;
    --texto-titulo: 2.3rem;
    --texto-interfaz: 1.2rem;
    --texto-subtitulo: 1.8rem;
    --texto-parrafo: 1.2rem;

    /*Colores por defecto*/
    --color-fondo: #FFFFFF;
    --color-destacado: #FAFFFF;
    --color-faded: #666666;
    --color-alt: #227c9d;
    --color-texto: #000000;
    --color1: #227c9d;
    --color2: #227c9d;
    --color3: #ffcb77;
    --color4: #ffcb77;
    --color5: #ffcb77;

    /* Márgenes por defecto*/
    --padding-barra: 15px;
    --padding-label: 10px;
    --padding-field: 20px;
    --margin-section: 1rem;
    --padding-seccion: 1em; 
    --padding-boton: 8px;
}

/* Fuente */
.atkinson-hyperlegible-regular {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.atkinson-hyperlegible-bold {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.atkinson-hyperlegible-regular-italic {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.atkinson-hyperlegible-bold-italic {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 700;
  font-style: italic;
}

/* Layout */
#enlaces, #enlacesversiones, #enlacesintra {
    float: left;
    width: 17%;
    padding: 0;
    margin: var(--padding-seccion);
    margin-bottom: 0;
    margin-right: 0;
}

#apartados {
    float: right;
    width: 77%;
    padding: var(--padding-seccion);
    margin: var(--padding-seccion);
    margin-left: 0;
}

#resumen, #comentario {
    padding: var(--padding-seccion);
    margin: var(--padding-seccion);
    margin-bottom: 0;
    margin-right: 20px;
    margin-left: 10px;
}


#intro > :not(#titulo), #enlacesintra, #apartados, #enlaces, #enlacesversiones {
    background-color: var(--color-fondo);
}

/* Encabezado */
#titulo {
    background-color: var(--color-fondo);
    align-items: center;
    padding-top: 20px;
    margin: var(--margin-section);
    margin-bottom: 0;
}

#titulo h1 span {
    display: block;
    color: var(--color-texto);
    font-size: var(--texto-titulo);
    font-family: var(--fuente-texto);
    padding-left: var(--padding-field);
}

#titulo h2 span {
    display: block;
    font-size: var(--texto-interfaz);
    font-family: var(--fuente-texto);
    color: var(--color-fondo);
    background-color: var(--color1);
    margin: 0;
    padding: var(--padding-barra);
}

@media (max-width: 1300px){
    #enlaces, #apartados, #enlacesversiones, #enlacesintra {
        float: left;
        width: 95%;
    }
}

@media (min-width: 1300px){

    #enlaces, #enlacesversiones, #enlacesintra {
        float: left;
        width: 17%;
    }

    #apartados {
        float: right;
        width: 77%;
    }
}

/* General */
body {
    color: var(--color-texto);
    background: linear-gradient(to bottom, var(--color4), var(--color5));
    padding: 10px;
}

#apartados h3, #enlaces .recursos, #enlaces .historico {
    font-size: var(--texto-interfaz);
    font-family: var(--fuente-texto);
    color: var(--color1);
    margin-left: 40px;
    margin-right: 40px;
}

#enlacesintra h3, #enlaces .selecciona, #enlacesversiones h3 {
    font-size: var(--texto-interfaz);
    font-family: var(--fuente-texto);
    background-color: var(--color1);
    color: var(--color-fondo);
    padding: var(--padding-barra);
    margin: 0;
}

p {
    font-size: var(--texto-parrafo);
    font-family: var(--fuente-texto);
    margin-left: 35px;
    margin-right: 20px;
}

dd {
    font-size: 1rem;
    font-family: var(--fuente-texto);
    margin-left: 35px;
    margin-right: 20px;
}

dt {
    font-weight: bold;
    font-size: var(--texto-parrafo);
    font-family: var(--fuente-texto);
    margin-top: var(--padding-barra);
    margin-bottom: var(--padding-barra);
    margin-left: 35px;
    margin-right: 20px;
}

a {
    font-size: var(--texto-interfaz);
    font-family: var(--fuente-texto);
    color: var(--color1);
}

a:hover,
a:focus {
    font-weight: bold;
    text-decoration: underline;
    transform: scale(1.1);
}

/* Listas */
ul {
    font-size: var(--texto-parrafo);
    font-family: var(--fuente-texto);
    margin-left: 35px;
    margin-right: 15px;
    padding-right: var(--padding-seccion);
    padding-left: var(--padding-seccion);
}

ul li {
    padding-bottom: 10px;
}

ul li::marker{
    color: var(--color1);
}