/*estilos----------------------------------------------------------------------------*/
*{font-family: 'arial', cursive; font-size: 20px; text-align: justify;}
.h1{text-align:center; color: brown; font-size:70px;}
.h2{text-align: justify; color: orange; font-size: 60px;}
.h3{text-align: justify; color: green; font-size: 50px;}
p{text-align: justify; font-size: 20px;}
.marginText{margin: 20px 60px;}
.center{ text-align: center;}


.ColorBlanco{ color: #fff;}
.ColorNegro{ color: #050404;}

.fondoVerde{background: #378a53;}
.fondoNegro{background: #131614;}
.fondoBlanco{background: #fff;}


.logo{
    max-width: 300px;
    max-height: 300px;
}






.separador{padding-top: -100px;}/*Con esto subimos el separador*/
body{padding-top: 30px;} 
.nav{
    padding-top: 120px; /*Bajamos el nav*/ 
    width: 100%;   /*Anchura muy grande para rellenar*/ 
    background:#0a0e0b;
    position:fixed;  
    margin: -150px; /*con el margin subimos el nav*/ 
    margin-left: 0px;
    z-index: 10;
}

    
        
    

.nav__li { display: inline-block; padding: 12px;} /*ponemos links en misma fila y separacion*/ 
.nav__li a{color: #fff; text-decoration: none;} /*color blanco texto y sin decoracion*/ 
.nav__li:hover > a{color: #bbb;}/*cuando pase por texto cambia de color*/
.section{margin: 40px 40px;}
.article{margin: 40px 40px;}
.footer{ padding: 20px 20px; color: #fff; background: #378a53; text-align: center; width: 100%; }










/*Efecto blour*/



.background-container{
    width: 100%;
    height: 100vh;
    position: relative;
    /*Al final del url decimos no repeat y center que es la posicion*/
    background:url(../../ClasesAdicionales/img/fondo1.jpeg)
    no-repeat center;
    z-index: -10;
    background-size: cover;
    display:flex;
    align-items: center;

    /*(https://images.pixexid.com/a-4k-ultra-hd-wallpaper-of-a-futuristic-cityscape-at-night-with-neon-lights-ill-u12ywmlh.jpeg)
    /*(https://img.freepik.com/foto-gratis/pintura-lago-montana-montana-al-fondo_188544-9126.jpg)*/
    
    /*(https://media.sproutsocial.com/uploads/landscape-hero-bg-1.jpg)*/
}

.card-container{
    width: 25rem;
    height: 28rem;
    border: 3px solid #fafafa10;
    margin: 0 auto;
    border-radius: 1rem;
    z-index: 0;
}

.glass-effect{
    background-color: #fafafa10;;
    backdrop-filter: blur(0.4rem);
    -webkit-backdrop-filter: blur(0.4rem);
}