* {
    font-family: crossosrgin;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

header {
    height: 100dvh;
    width: 100dvw;
    background-color: black;
    background-image: url(IMAGENES/ojos-lechuza.jpg);
        background-size: 60%;
    
    background-position: center;
    background-repeat: no-repeat;

}



h1 {

    padding-top: 5dvh;
    color: hsl(82 89% 50%);
    font-size: clamp(1.8rem, 5vw, 15rem);
    text-shadow: 1px 1px 1px black;

    text-align: center;

}





.h11 {

    font-size: clamp(1rem, 5vw, 2rem);
    color: hsl(82 89% 50%);
    text-shadow: hsl(82 89% 50%);

    text-align: center;
    padding-top: 8dvh;

}



a {

    color: #ffffff;
    font-size: clamp (1rem, 5vw, 1.50rem);
    text-decoration: none;


}

nav {
    width: 100dvw;
    padding-top: 8.5dvh;
  


}

.nav {

    display: flex;
    flex-direction: column;
    justify-content: space-between;
     height: 50dvh;
   margin-left: 2%;
     z-index: 1;
    
}

.puntos-de-colores-navegacion {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: sticky;
    top: 40dvh;
    margin-left: 1dvw;
    
  

}

.punto-de-enlase-inicio {
    height: 30px;
    width: 30px;
    display: inline-block;
    background-color: black;
    color: black;
    border-radius: 50%;
    box-shadow: 3px 3px 3px black;
    z-index: 1;
     position: sticky;
}
@media(max-width:600px) {
    .punto-de-enlase-inicio {
    height: 50px;
    width: 50px;
    display: inline-block;
    background-color: black;
    color: black;
    border-radius: 50%;
    box-shadow: 3px 3px 3px black;
    z-index: 1;
     position: sticky;
    }
}


.punto-de-enlase-jardin {
     position: sticky;
    height: 30px;
    width: 30px;
    display: inline-block;
    background-color: hsl(120, 67%, 20%);
    color: hsl(120, 67%, 20%);
    border-radius: 50%;
    box-shadow: 3px 3px 3px black;
    z-index: 1;
}

@media(max-width:600px) {
.punto-de-enlase-jardin {
     position: sticky;
    height: 50px;
    width: 50px;
    display: inline-block;
    background-color: hsl(120, 67%, 20%);
    color: hsl(120, 67%, 20%);
    border-radius: 50%;
    box-shadow: 3px 3px 3px black;
    z-index: 1;
}


}

.punto-de-enlase-pradera {
    display: inline-block;
    height: 30px;
    width: 30px;
    color: hsl(82 89% 30%);
    background-color: hsl(82 89% 30%);
    border-radius: 50%;
    box-shadow: 3px 3px 3px black;
    z-index: 1;
     position: sticky;
}
@media(max-width:600px) {
    .punto-de-enlase-pradera {
    display: inline-block;
    height: 50px;
    width: 50px;
    color: hsl(82 89% 30%);
    background-color: hsl(82 89% 30%);
    border-radius: 50%;
    box-shadow: 3px 3px 3px black;
    z-index: 1;
     position: sticky;
}
}


.punto-de-enlase-laguna {
    display: inline-block;
    height: 30px;
    width: 30px;
    background-color: hsl(204, 89%, 20%);
    color: hsl(204, 89%, 20%);
    border-radius: 50%;
    box-shadow: 3px 3px 3px black;
    z-index: 1;
     position: sticky;
}

@media(max-width:600px) {
    
.punto-de-enlase-laguna {
    display: inline-block;
    height: 50px;
    width: 50px;
    background-color: hsl(204, 89%, 20%);
    color: hsl(204, 89%, 20%);
    border-radius: 50%;
    box-shadow: 3px 3px 3px black;
    z-index: 1;
     position: sticky;
}
}

.punto-de-enlase-arroyos {
    display: inline-block;
    height: 30px;
    width: 30px;
    color: hsl(181, 76%, 30%);
    background-color: hsl(181, 76%, 30%);
    border-radius: 50%;
    box-shadow: 3px 3px 3px black;
    z-index: 1;
     position: sticky;
}
@media(max-width:600px) {
    .punto-de-enlase-arroyos {
    display: inline-block;
    height: 50px;
    width: 50px;
    color: hsl(181, 76%, 30%);
    background-color: hsl(181, 76%, 30%);
    border-radius: 50%;
    box-shadow: 3px 3px 3px black;
    z-index: 1;
     position: sticky;
}
}


.punto-de-enlase-mar {
    display: inline-block;
    height: 30px;
    width: 30px;
    background-color: hsl(46, 84%, 30%);
    color: hsl(46, 84%, 30%);
    border-radius: 50%;
    box-shadow: 3px 3px 3px black;
    z-index: 1;
     position: sticky;
}
@media(max-width:600px) {
    .punto-de-enlase-mar {
    display: inline-block;
    height: 50px;
    width: 50px;
    background-color: hsl(46, 84%, 30%);
    color: hsl(46, 84%, 30%);
    border-radius: 50%;
    box-shadow: 3px 3px 3px black;
    z-index: 1;
     position: sticky;
}
}

.tamano-de-enlase-jardin {

    background-color: hsl(120, 67%, 20%);
    color: #fff;
    padding: min(1rem, 5vw);
    font-size: clamp(1rem, 5vw, 2rem);
    text-decoration: none;
    border-style: inset;
    border-color: rgb(4, 43, 1);
 border-radius: 50%;
  

}

.tamano-de-enlase-jardin:hover {

    font-size: 2.5rem;

}

.tamano-de-enlase-pradera {
    background-color: hsl(82 89% 30%);

    color: #fff;
    padding: min(1rem, 5vw);
    font-size: clamp(1rem, 5vw, 2rem);
    text-decoration: none;
    border-style: inset;
    border-color: rgb(4, 43, 1);
 border-radius: 50%;
}

.tamano-de-enlase-pradera:hover {


    font-size: 2.5rem;
}

.tamano-de-enlase-laguna {
    color: #fff;
    padding: min(1rem, 5vw);
    font-size: clamp(1rem, 5vw, 2rem);
    text-decoration: none;
    background-color: hsl(204, 89%, 20%);
    border-style: inset;
    border-color: rgb(15, 1, 43);
 border-radius: 50%;


}

.tamano-de-enlase-laguna:hover {


    font-size: 2.5rem;
}

.tamano-de-enlase-arroyos {
    color: #fff;
    padding: min(1rem, 5vw);
    font-size: clamp(1rem, 5vw, 2rem);
    text-decoration: none;
    background-color: hsl(181, 76%, 30%);
    border-style: inset;
    border-color: rgb(2, 31, 37);
     border-radius: 50%;
}

.tamano-de-enlase-arroyos:hover {
    font-size: 2.5rem;
}

.tamano-de-enlase-mar {
    color: #fff;
    background-color: hsl(46, 84%, 30%);
    font-size: clamp(1rem, 5vw, 2rem);
    padding: min(1rem, 5vw);

    text-decoration: none;
    border-style: inset;
    border-color: hsl(45, 91%, 9%);
     border-radius: 50%;

}

.tamano-de-enlase-mar:hover {

    font-size: 2.5rem;
}





#jardin {

    background-color: hsl(120, 67%, 20%);




}

.titulo-aves-de-jardines {
    color: hsl(120, 67%, 90%);
    font-size: 3rem;
    text-align: center;
    align-items: center;
   padding: 5%;
    text-shadow: 5px 5px 3px black;
}

.tarjeta-jardin {
    height: auto;
    width: 300px;
    background-color: hsl(120, 67%, 5%);
    margin: 4dvh 1dvw;
    padding: 3%;
    box-shadow: 10px 10px 10px black;
}

.tarjeta-jardin:hover {
    transform: scale(1.1);
}


.nombre-ave-jardin {
    width: 300px;
    height: 75.3px;
    color: hsl(120, 67%, 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    text-shadow: 5px 5px 3px black;
}

.nombre-cientifico-ave-jardin {
    color: hsl(120, 67%, 85%);

    text-align: center;

    font-size: 1rem;
    margin-bottom: 10%;
    text-shadow: 5px 5px 3px black;
}

.jardin-caracteristica-ave {
    color: hsl(120, 67%, 70%);
    font-size: 1.25rem;
    text-shadow: 5px 5px 3px black;
    padding-left: 80px;
}

.jardin-caracteristica-nula-ave {
    color: hsl(120, 67%, 10%);
    padding-left: 80px;
}

#pradera {

    background-color: hsl(82 89% 30%);

}

.titulo-aves-zonas-rurales {
    color: hsl(82, 89%, 90%);
    font-size: 3rem;
    text-align: center;
    padding: 5%;
    text-shadow: 5px 5px 3px black;
}

.tarjeta-aves-de-pradera {
    height: auto;
    width: 300px;
    background-color: hsl(82, 89%, 5%);
    margin: 4dvh 1dvw;
    padding: 3%;

    box-shadow: 10px 10px 10px black;
}

.tarjeta-aves-de-pradera:hover {
    transform: scale(1.1);
}

.nombre-ave-pradera {
    color: hsl(82, 89%, 50%);
    width: 300px;
    height: 75.3px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    text-shadow: 5px 5px 3px black;

}

.nombre-cientifico-ave-pradera {
    color: hsl(82, 89%, 85%);

    text-align: center;

    font-size: 1rem;
    margin-bottom: 10%;
    text-shadow: 5px 5px 3px black;
}

.pradera-caracteristica-ave {
    color: hsl(82, 89%, 70%);
    font-size: 1.25rem;
    text-shadow: 5px 5px 3px black;
    padding-left: 80px;

}

.pradera-caracteristica-nula-ave {
    color: hsl(82, 89%, 10%);
    padding-left: 80px;
}

#laguna {
    background-color: hsl(204, 89%, 20%);


}

.titulo-aves-lagunas {
    color: hsl(204, 89%, 90%);
    font-size: 3rem;
    text-align: center;
    padding: 5%;
    text-shadow: 5px 5px 3px black;
}


.tarjeta-aves-lagunas {
    height: auto;
    width: 300px;
    background-color: hsl(204, 89%, 5%);
    margin: 4dvh 1dvw;
    padding: 3%;
    box-shadow: 10px 10px 10px black;
}

.tarjeta-aves-lagunas:hover {
    transform: scale(1.1);
}

.nombre-ave-laguna {
    color: hsl(204, 89%, 50%);
    width: 300px;
    height: 75.3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    text-shadow: 5px 5px 3px black;

}

.nombre-cientifico-ave-de-laguna {
    color: hsl(204, 89%, 90%);

    text-align: center;

    font-size: 1rem;
    margin-bottom: 10%;
    text-shadow: 5px 5px 3px black;
}

.laguna-caracteristica-ave {
    color: hsl(204, 89%, 70%);
    font-size: 1.25rem;
    text-shadow: 5px 5px 3px black;
    padding-left: 80px;
}

.laguna-caracteristica-nula-ave {
    color: hsl(204, 89%, 15%);
    padding-left: 80px;
}

#arroyos {

    background-color: hsl(181, 76%, 30%);

}

.titulo-aves-arroyos-rios {
    color: hsl(181, 76%, 90%);
    font-size: 3rem;
    text-align: center;
    padding: 5%;
    text-shadow: 5px 5px 3px black;
}

.tarjeta-aves-rios {
    height: auto;
    width: 300PX;
    background-color: hsl(181, 89%, 5%);
    margin: 4dvh 1dvw;
    padding: 3%;

    box-shadow: 10px 10px 10px black;
}

.tarjeta-aves-rios:hover {
    transform: scale(1.1);
}

.nombre-ave-rio {
    color: hsl(181, 89%, 50%);
    height: 75.3;
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    text-shadow: 5px 5px 3px black;

}

.nombre-cientifico-ave-de-rio {
    color: hsl(181, 89%, 85%);

    text-align: center;

    font-size: 1rem;
    margin-bottom: 10%;
    text-shadow: 5px 5px 3px black;
}

.rio-caracteristica-ave {
    color: hsl(181, 89%, 65%);
    font-size: 1.25rem;
    text-shadow: 5px 5px 3px black;
    padding-left: 80px;
}

.rio-caracteristica-nula-ave {
    color: hsl(181, 89%, 10%);
    padding-left: 80px;
}

#mar {
    background-color: hsl(46, 84%, 30%);
}

.titulo-aves-costa-marina {
    color: hsl(46, 84%, 90%);
    font-size: 3rem;
    text-align: center;
    padding: 5%;
    text-shadow: 5px 5px 3px black;
}

.tarjeta-aves-mar {
    height: auto;
    width: 300PX;
    background-color: hsl(46, 67%, 5%);
    margin: 4dvh 1dvw;
    padding: 3%;

    box-shadow: 10px 10px 10px black;
}

.tarjeta-aves-mar:hover {
    transform: scale(1.1);
}

.nombre-ave-mar {
    color: hsl(46, 67%, 50%);
    width: 300px;
    height: 75.3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    text-shadow: 5px 5px 3px black;
}

.nombre-cientifico-ave-mar {
    color: hsl(46, 67%, 85%);

    text-align: center;

    font-size: 1rem;
    margin-bottom: 10%;
    text-shadow: 5px 5px 3px black;
}

.mar-caracteristica-ave {
    color: hsl(46, 67%, 50%);
    font-size: 1.25rem;
    text-shadow: 5px 5px 3px black;
    padding-left: 80px;
}

.mar-caracteristica-nula-ave {
    color: hsl(46, 67%, 10%);
    padding-left: 80px;
}




.imagen-ave {
    height: auto;
    width: 99%;
    margin-top: 2%;
    margin-bottom: 2%;



}



li {
    list-style: none;
}


.container-tarjetas-aves {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;


}

footer {
    background-color: black;
    color: white;
    padding: 1dvw;
}