/*Valores por defecto del modo claro*/

:root{
    --background-color:linear-gradient(61deg, rgba(255,255,255,1) 0%, rgba(202,233,240,1) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 80%, rgba(202,233,240,1) 100%, rgba(255,255,255,1) 100%);
    --text-color:#0A3871;
    --text-color-hover:#FFA100; 
    --background-button: #052051;
    --text-color-button: white;
    --box-shadow: 10px 14px 12px -10px rgba(0,0,0,0.33);
    --box-shadow-buttons: 15px 16px 12px -2px rgba(124,161,207,0.48);
    --box-shadow-header:  0px 20px 21px -17px rgba(0,0,0,1);
    --background-areas:white;
}    
  
*{  
    margin: 0;
    padding: 0;
    box-sizing: border-box;    
}

html{
    font-size: 62.5%;  /*1rem = 10px*  1em = 10px*/  
    font-family: 'Inter', sans-serif;
    line-height: 1.5;    
}

body{
    color: var(--text-color);
    background:var(--background-color);   
}

nav{   
    width: 100%;
    min-width: 375px;
    display: flex;  
    justify-content: space-around;
    align-items: center;   
    height: 80px;
    border-bottom: solid;
}

.nav__menu{ 
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-start;    
}

.hamburguer{
    width: 30px;
    height: 30px;
    margin: 2em; 
    cursor: pointer;    
}

.hamburguer:hover{
    transform: scale(1.2);
}

.links{        
    display: none; 
    z-index: 1000;         
    position: absolute;
    top: 80px;
    width: 200px;  
    padding-left: 1.5em;   
    color: var(--text-color);   
    background:var(--background-color);     
    border-radius: 0 0 20px 0;
    box-shadow: var(--box-shadow-buttons);
    list-style: none;

}

.menu-abierto{
    display:block;
}


.social-image{
    width: 50px;
    height: 50px;  
}

.social-link{     
    display: block;
    padding: 0.5em;
    font-size: 1.6rem;
    color: var(--text-color);
    text-decoration: none;    
}

.social-link:hover{
    color: var(--text-color-hover);
}


.links-deployed{
    visibility: hidden; 
}
   

.nav__menu p{
    visibility: hidden; /*Decido esto para que respete el espacio despues del menu hamburguesa*/
    font-size: 1.6rem;
    
}
.nav__icons{
    width: 50%;
    display: flex; 
    justify-content: flex-end;
    align-items: center;       
    text-align: center;  
}

.nav__icons a{
    width: 80px;   
    height: auto;      
}

.switche{
    width: 60%;
    margin: 0.5em auto;         
    transition: 0.5s;  
    border-radius: 50px;
    opacity: 0.9;
    
}
.switche:hover{
    transform: scale(1.2);

}

.main{
    width: 100%;
    min-width: 375px;
    margin: 0 auto;

}

.main__form{
    width: 80%;  
    margin: 0 auto;
    text-align: center;  
}

.input{    
    width: 100%;   

}

.input__textarea{
    width: 100%;  
    min-height: 300px;    
    margin-top: 40px;
    padding: 1em;    
    font-size: 1.6rem;  
    color: var(--text-color);
    text-align: center;      
    background: var(--background-areas);  
    border: solid;
    border-radius: 20px;
    resize: none;     
}

.input__alert{    
    max-width: 100%;  
    padding: 0.2em;  
    font-size: 0.5rem;
    text-align: left;  
    font-style: italic;
    color:var(--text-color);
}

.buttons{
    width: 100%; 
    margin: 0 auto;
}

.button{
    width: 100%;
    height: 90px;
    margin: 0 auto;
    margin-top: 4em;
}


.copiar{
    display: block;
    width: 50%;  
 }

.buttons__btn{
    width: 70%;
    margin: 0.5em auto;
    min-height: 50px;
    padding: 1em;  
    font-size: 2.2rem;   
    border: 1px solid var(--background-color);
    border-radius: 20px;
    cursor: pointer;
    border: var(--dark-blue-300) solid #000;
    transition: 1s background;;
    background: var(--background-button);
    box-shadow: var(--box-shadow-buttons);
    color: var(--text-color-button);
}

.buttons__btn:hover{    
    transform: scale(1.1);
}

.main__output{
    width: 80%;
    margin: 0 auto;     
    border-radius: 20px;

}

.container{    
    width: 100%;  
    margin: 0 auto;
    margin-top: 1em;
    background: var(--white);
    border-radius: 20px;

   /* height: 50hv;*/
}

.container__img{
    display: none;
    width: 70%;    
    margin: 0 auto;       
    
}

.search-img{
    width: 80%;    
    margin:0 auto;
}

.container__message{
    width: 100%;
    min-width: 250px;
    max-width: 600px;
    min-height: 200px;
    margin: 0 auto;
    color: var(--text-color);
    text-align: center;
    line-height: 2rem;
}

.container__message h4{
    padding: 2em;
    font-size: 1.8rem;
    font-weight: 600;
}

.container__message h5{
    padding: 1em;
    font-size: 1.2rem;
}

.ocultar{
    display:none;
}

.container__result{
    display: none; 
    width: 100%; 
    min-height: 500px;
    text-align: center;
    border-radius: 20px;    
}

.tittle{
    margin: 0 auto;
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color);
}


.hero{
    width: 100%;    
    min-width: 375px; 
    max-width: 450px;
    min-height: 200px; 
    margin: 10px auto;     
    background-image: url(./img/oracle.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    background-position:center;    
    background-color:var(--background-color);
    box-shadow: 16px 20px 18px -8px rgba(0,0,0,0.33);

}

.footer{    
    width: 100%;
    height: 93px;     
    min-width: 375px;     
    margin: 0 auto;   
    border-top: solid;
}

.footer__socials{
    display: flex;    
    align-items: center; 
    justify-content: center;
    width: 100%;    
    
}

.footer__img-link{
    display: inline-block;
    width: 40px;    
    height: 40px;      
    margin: 0.5em;
}

.footer__img-link:hover{
    transform: scale(1.2);
}

.image{
    width: 100%;
}

.footer__text{
    margin: 0 auto;
    font-size: 1rem;
    color: var(--text-color);
    text-align: center;

}

.dark-mode{
    --background-color:linear-gradient(317deg, rgba(46,122,138,1) 0%, rgba(35,92,104,1) 4%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 80%, rgba(35,92,104,1) 96%, rgba(46,122,138,1) 100%);    

    --text-color:white; 
    --text-color-button:white;    
    --box-shadow: 12px 7px 5px 0px rgba(88,102,130,0.49);
    --box-shadow-header:0px 20px 21px -17px rgba(255,255,255,0.5);   
    --background-areas:black;    
}