/*Adriana Herrero Gonzalez UO287543*/
/* Esquemas de posicionamiento del proyecto MotoGP-Desktop*/


/* Especificidad 001 */
header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: auto;
}

/* Especificidad 001 */
nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;

}

/* Especificidad 002*/
body>div {
    width: 100%;
    height: 60vh;
}

/* Especificidad 002*/
section img, section video {
    display: flex;
}


@media (min-width: 320px) and (max-width: 799px) {

    /* Especificidad 001 */
    header {
        flex-direction: column; /* Advertencia: redefinición ya que la dirección de los elementos cambia en el móvil: pasa de row a column*/
    }

    /* Especificidad 002 */
    header h1 {
        text-align: center;
        width: 100%;
    }

    /* Especificidad 001 */
    nav {
        flex-direction: column;/* Advertencia: redefinición ya que la dirección de los elementos cambia en el móvil: pasa de row a column*/
    }

    nav a {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* Especificidad 011 */
    header+p {
        display: none;
    }


    /* Especificidad 001 */
    video {
        width: 100%;
        height: auto;
    }

    /* Especificidad 001 */
    audio {
        width: 100%;
    }

    /* Especificidad 003 */
    article h2+img {
        width: 100%;
        height: auto;
    }

    /* Especificidad 002 */
    section img {
        max-width: 100%;
        height: auto;
    }


    /* Especificidad 002 */
    body>div {
        width: 100%; /* Advertencia: redifinición del tamaño del mapa en móviles*/
        height: 100vh;/* Advertencia: redifinición del tamaño del mapa en móviles*/
    }

    /* Especificidad 011 */
    input[type="file"] {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Afecta a todos los enlaces dentro de párrafos en secciones con h2 o h4 (Parrafos con referencias largas para q no sobresalga)*/
    /* Especificidad 004 */
    section h2~p a,
    section h4~p a {
        line-break: anywhere;

    }

    /* Especificidad 001*/
    svg {
        width: 100%;
    }

}