/* Datos personales: Ruben Diaz Zapico uo283204 */
/* Esquemas de posicionamiento del proyecto MotoGP-Desktop */

/* Especificidad: 001 */
header {
    display: flex;                      /* Activa Flexbox */
    justify-content: space-between;     /* Maximo espacio posible entre elementos */
    align-items: center;                /* Alinea verticalmente en el centro */
    padding: 1em;
}

/* Especificidad: 001 */
nav {
    display: flex;                      /* Activa Flexbox en los enlaces */
    gap: 1em;                           /* Espacio entre enlaces */
    flex-wrap: wrap;                    /* Permite que los enlaces se acomoden si no caben */
}

/* Especificidad: 013 */
main > section:last-of-type > div {
    width: 50%;
    height: 30em;
    border: 1px solid #ccc;
}

@media (min-width: 320px) and (max-width: 799px) {
    /* Especificidad: 001 */
    header {
        flex-direction: column;         /* Muestra en vertical */  
        align-items: start;             /* Alinea verticalmente arriba, Genera warning al redefinir la propiedad align-items del header */
    }

    /* Especificidad: 001 */
    nav {
        flex-direction: column;         /* Muestra en vertical */
    }

    /* Especificidad: 012 */
    body > p:first-of-type {
        display: none;                  /* No muestra el contenido */
    }

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

    /* Especificidad: 003 */
    article h2 + img {
        width: 100%;       /* Ancho completo del contenedor */
        height: auto;      /* Mantiene la proporción */
        display: block;    /* Elimina espacio inferior por inline-block */
        margin: 0 auto;    /* Centra la imagen si es necesario */
    }

    /* Especificidad: 013 */
    main > section:last-of-type > div {
        width: 50%;         /* Genera warning al redefinir la propiedad width del main > section:last-of-type > div */
        height: 20em;       /* Genera warning al redefinir la propiedad height del main > section:last-of-type > div */
        margin: 0;
    }
}