@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&display=swap');
* { 
  font-family: 'Source Code Pro', monospace;
  margin: 0;
  padding:0;
  
  
 
}
body{
  background: #5c4b7a;
  
  
}

header{
  height: 125px;
  
}
main {
  
  display: flex;
  margin-left: 80px;  
}
img{
  position:relative;
  top:25px;
  
}

p{
 color: white;
}


.left-encript {
  
  width: 640px;
  
  
  
}

.txt-encriptar {
  
  display: block;
  background: #292b36;
  color: white;
  width: 75%;
  height:250px;
  border: none;
  outline: none;
  margin:auto;
  border-radius: 4px;
  font-size: 2em;
  
}
.aviso {
  text-align: center;
  font-size: 15px;
  margin:10px;
  
}
.btn-encriptar-y-desencriptar {
  display: flex;
  width: fit-content;
  margin:auto; 
  gap: 20px;
}
.botones {
  width:150px;
  height: 50px;
  background: #292b36;
  color: white;
  border:none;
  border-radius: 4px;
  font-size: 18 px;
  font-weight: bold;
}
.botones:active{
  background: white;
  color:#5c4b7a;
}

.rigth-encript {
  width: 300px; 
  
}
.desc-box {
  
  text-align: center;
  width: fit-content;
  
}
.txt-mensaje {
  width: 325px;
  height: 250px;
  background: url("imagenes/muñeco.png");
  background-size: contain;
  color: white;
  border: none;
  outline: none;
  font-size: 25px;
  border-radius: 4px;
  
  
}
.mensaje-aviso  {
  margin:20px;
  font-size: 20px;
}


#btn-copiar{
  width: 250px;
  display: none;
  margin: 20px auto 0px auto;

}


@media screen and (max-width:480px){
  header{
    height: 75px;
  }  
  main{
    margin: auto;
    display: block ;
  }
  
  .rigth-encript{
    
    width: auto;
    position: static;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  img{
    position:relative;
    top:20px;
  }
  h1{
    display:inline;
    border:black solid 1px;
    
  }
  .left-encript{
    width: auto;
    
    
    
  }
  .txt-encriptar{
    width: 80%
  }
  .desc-box{
    width: 80%;
    margin: auto;
  }

}