/* REQUISITO: Utilizar Google Fonts para cambiar el tipo de fuente del documento */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


    /* Regla 1. Utilizar el selector universal * para cambiar el tipo de fuente del documento */
    *{
        font-family: "Roboto", sans-serif;
    }

    /* Regla 2. El elemento body tendrá margen 0 y relleno de 20% únicamente a la derecha y izquierda */
    body{
        margin: 0;
        margin-right: 20%;
        margin-left: 20%;
    }

    /* Regla 3. Los elementos h1 estarán subrayados (text-decoration: underline;), de color darkcyan y alineados al centro */
    h1{
        text-decoration: underline;
        color: darkcyan;
        text-align: center;
    }

    /* Regla 4. Los elementos con clase selector tendrán color lightcyan */
    .selector{
        color: lightcyan;
    }

    /* Regla 5. Los elementos con clase selectors tendrán un relleno de 5%, un border: solid darkcyan 1px; y esquinas redondeadas border-radius con valor de 5px */
    .selectors{
        padding: 5%;
        border: solid darkcyan 1px;
        border-radius: 5px;
    }

    /* Regla 6. Los elementos con identificador (id) universal tendrán color lightgoldenrodyellow */
    #universal{
        color: lightgoldenrodyellow;
    }

    /* Regla 7. Los elementos h2 con clase selector y los elementos h2 con identificador (id) universal tendrán color de fondo darkcyan, relleno de 1% y esquinas redondeadas con valor de 5px */
    h2.selector,
    h2#universal{
        background-color: darkcyan;
        padding: 1%;
        border-radius: 5px;
    }

    /* Regla 8. Los elementos span tendrán font-weight: 900; color de fondo negro y color de texto blanco */
    span{
        font-weight: 900;
        background-color: black;
        color: white;
    }

    /* Regla 9. Los elementos a que sean hijos directos de algún li tendrán text-decoration: none */
    li a{
        text-decoration:none;
    }

    /* Regla 10. Los elementos h3 tendrán color de fondo background-color: rgba(0, 139, 139, 0.529);, relleno de 0.5px y esquinas redondeadas con valor de 5px */
    h3{
        background-color: rgba(0, 139, 139, 0.529);
        padding: 0.5px;
        border-radius: 5px;
    }

    /* Regla 11. Los elementos div que sean descendientes de un elemento con id "gallery" tendrán un ancho width de 100% */
    #gallery div{
        width: 100%;
    }

    /* Regla 12. Los elementos img tendrán un ancho width de 100%, un border: solid darkcyan 1px; y esquinas redondeadas con valor de 5px */
    img{
        width: 100%;
        border: solid darkcyan 1px;
        border-radius: 5px;
    }

    /* --- ESTILOS PARA EL BONUS: TABLA DE SELECTORES (Se aplicaron estilos para imitar la apariencia del PDF) --- */
    
    .vorde-tabla {
    margin-top: 30px;
    padding: 4px;
    border: solid darkcyan 1px;
    border-radius: 5px;
}


table {
    width: 100%;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid darkcyan;
}

th {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    padding: 10px;
}

td {
    padding: 8px;
    text-align: left;
}

tr:nth-child(even) {
    background-color: rgba(120, 120, 120, 0.1);
}


    th, td {
        border: 1px solid #ddd;
        padding: 5px;
        text-align: left;
        vertical-align: top;
        color: black;
    }

    th {
        background-color: #f2f2f2;
        font-weight: 1200;
    }

    /* Efecto "Cebra" para las filas pares */
    tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    /* Estilo de la primera columna para imitar el PDF */
    td:first-child {
        text-decoration: underline;
        font-weight: bold;
    }