*{

    padding: 0px;
    margin: 0px;

}

:root{

--color-primario: #0a3871;
--color-secundario: #A2A2A2;

}

body {
    width:100vw;
    background-color: #e5e5e5;
    box-sizing: border-box;
    height:100%;
  
}

.container{
  
  display: flex;
  justify-content:space-between;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
  
  

}

.container__left{
  margin-top: 40px;
  margin-left: 40px;
  gap: 40px;
  box-sizing: border-box;
  
 }

.container__left__input{

  margin-top: 128px;
  margin-left: 20%;


}

.container__left__logo{
  
 width: 7.5rem;
 height: 3rem;

}

.container__left__botones{
 justify-content: space-around;
 margin-top: 70%;
 
}

.textare__encriptar{
 
 width: 100%;
 height: 80%;
 align-items: center;
 font-family:'Inter , sans-serif';
 font-size: 2rem;
 font-weight: 400;
 color: var(--color-primario);
 background-color: #e5e5e5;
 border-style: none;
 resize: vertical;
 
 
}

 .container__left_indicacion{
   font-family: 'Inter, sans-serif';
   font-size: 0.75rem;
   font-weight: 400;
   color: rgb(156 163 175);
   vertical-align: middle;
   padding: auto;
   margin-top: 1px;
 }

 .container__left__iconoAdvertencia{
  
   margin-right: 5px;
   padding: 0;
   vertical-align: middle;

 }

 .container_right{
  
    background-color: white;
    width: 25rem;
    height: 59rem;
    margin-top: 40px;
    margin-right: 40px;
    border-radius: 32px;
    box-sizing: border-box;
    
      

 }

 .container_right__mensaje__error{

   font-family: 'Inter, sans-serif';
   font-size: 1.5rem;
   font-weight: 400;
   color: #A2A2A2;
   font-weight: 700;
   text-align: center;
   margin-top: 50%;

 }
 .container_right__mensaje__resultado{

  font-family: 'Inter, sans-serif';
  font-size: 1rem;
  font-weight: 400;
  color: #A0AEC0;
  text-align: center;
  margin-top: 16px;

  
 }

 .container__right__fotoBuscar
 {
   margin-top: 243px;
   align-items: center;
   

 }

 .button{

 width: 20.5rem;
 height: 4.1817rem;
 font-size: 1rem;
 font-weight:400;
 color: var(--color-primario);
 border-radius: 24px;
 font-family: 'Inter , sans-serif';
 
 
 }

 .button__encriptar{ 
  
  background-color:var(--color-primario);
  color:white;


}

.button__copiar{ 
  
  margin-top: 0,625rem;
  margin-left: 10%;
  

}

.icono__advertencia{

 

}

.footer{

  text-align: center;
  background-color: var(--color-primario);
  color:var(--color-secundario) ;
  width: auto;


}



/*Media query para adaptar a tablets*/
@media (max-width:768px)
{
   .container{
   
  
   flex-direction: column;
   align-items: center;

   }

   .container_right{
     
    width: 90%;
    align-items: center;
    margin: auto;
    box-sizing: border-box;
      

 }

 .container__left{
  width: 90%;
  align-items: center;
  

 }

  img.container__right__fotoBuscar{

      display: none;

   }
   .container_right__mensaje__error{

    margin-top: 32px;


   }
   


   .textare__encriptar{

   width: 80%;

   }
   
   
   .button{

       width: 300px;
    
    }

    .button__copiar{ 
  
       
      width: 80%;
    
    }

    .container__left__input{

      margin-top: 40px;
      margin-left: 5%;
    
    
    }

    .container__left__botones{
      
      justify-content: space-around;
      margin-top: 70%;
      
     }

    

}



/*Media Query para adaptar a celulares */
@media  (max-width:375px)
{
  
  .container{
    
    
     flex-direction: column;
     align-items: center;
     box-sizing: border-box;
 
    }
 
  .container_right{
    
     
     align-items:center;
     width: 90%;
     margin: auto;
     padding: auto;
     box-sizing: border-box;

    }
       
 
 
  .container__left{
   
    width: 90%;
    height: 100%;
    align-items: center;
    margin: auto;
    box-sizing: border-box;  
 
  }
 
   img.container__right__fotoBuscar{
 
       display: none;
 
    }

    .container_right__mensaje__error{
 
     margin-top: 32px;
 
 
    }
    
 
 
    .textare__encriptar{
 
    width: 90%;


    }

        
    .button{
 
     width: 343px;
     height: 67px;
          
     }
 
     .button__copiar{ 
  
      margin-left: 15px;
      width: 90%;
         
    }
     
     .container__left__botones{
      justify-items: center;
      gap: 20px;
      margin: auto;
           
     }


}