body{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;

}
.container{
    display: flex;
    flex-wrap: row;
    width: 100%;
    align-items: center;
    justify-content: center;
    width: 100vw;
    gap: 4rem;
   
}
.salida{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    Height:50rem;
    border-Radius:3px;
    box-shadow: border-box;
    width: 30%;
}

.entrada{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 80%;
    height: 944px;
}
.entrada label{
margin-top: 50px;
padding: 50px;
font-size: 2rem;
color: #0A3871;
margin-right: 30%;

}
.entrada #text{
    width: 100%;
    height: 50%;
    border:white 1px solid;
    border-Radius:32px;
    box-shadow: 1px 1px grey;
}
.btn{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:  space-between;
    padding: auto;
    width: 100%;
    margin-top: 1rem;
    
}

.btn input{
Width:328px;
Height:67px;
border-radius: 24px;
border: solid 1px #0A3871;
font-size: larger;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.btn-encriptar{
    background-color: #0A3871;
    color: white;

}
.btn-desencriptar{
    color:#0A3871 ;
}
.btn-copiar{
    Width:328px;
    Height:67px;
    border-radius: 24px;
    border: solid 1px #0A3871;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: larger;
    color: #0A3871;
}
.btn-copiar:hover{
    box-shadow: 3px 3px 10px #0A3871;
}

.ocultar{
    display: none;
}
.resultado{
    margin: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    box-shadow: border-box;
    font-size: 20px;
    color: #0A3871;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    height: 40rem;
    padding: 2rem;
}
#text{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 30px;
    font-size: 30px;
    color: #0A3871;
}
.sec-copiar{
    position: relative;
    bottom: 0;
}
.sec-copiar{
    padding-top: 6rem;
    display: block;
    margin: auto;

}
#btn{
Width:328px;
Height:67px;
border-radius: 24px;
border: solid 1px #0A3871;
font-size: larger;
color: #0A3871;
font-size: 20px;
display: block;
margin: auto;
}
.header{
    background-color: #5d8cc5 ;
    padding: 3px;
}
.div__logo{
    padding: 4px;
}

 .btn-encriptar:hover, .btn-desencriptar:hover,#btn:hover{
box-shadow: 3px 3px 10px #0A3871;
 }
.footer{
    height: 4rem;
    background-color: #0A3871;
    width: 100%;
    margin: none;
}
 @media (max-width: 768px) {
    .container{
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
        justify-content: center;  
        padding: 0;
        margin: 0;
   };
   .salida, .resultado{
    margin: 0;
    padding: 0;
   
   }
   .entrada, .salida {
    width: 60%;
    justify-content: center;
    align-items: center;
   }
   .conteiner-munieco img{
    width: 80%;
    display: block;
    margin: auto;
   }
   .conteiner-h3, .conteiner-p {
    text-align: center;
    padding: 1rem;
   }
   .btn-copiar{
    height: 3rem;
    width: 100%;
   }
   
   .entrada label{
    margin: 0;
    width: 100%;
   }
}