::placeholder {
   color: aqua;
font-size: 1rem;
font-weight: 300;
font-family: 'Courier New', Courier, monospace;}

html{
   background-image:url(.//img/bg.png) ;
}

header{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 10vh;
   color: rgb(200, 195, 195);
   background-color: rgba(11, 21, 48, 0.7);
   font-size: 1.2rem;
}

header p{
   font-size: .9rem
}

main{
   border-top: 1px solid gray;
   border-bottom: 2px solid gray;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   padding: 1rem;
}

.texto-original{
   margin-right: 1vw;   
}

.textarea-io{
   resize: vertical;
   width: 44vw;
   height: 45vh;
   border-radius:0 0 1rem 1rem;
   padding: .5vw;
   font-size: 1.2rem;
   font-weight: 300;
   border-bottom: 1px solid white;
   border-left: 1px solid white;
   border-right: 1px solid white;
   font-size:clamp(.6rem, calc(.6rem + 0.6vw), 1.2rem);
   color: white;
}
.textarea-i{
   background: rgba(164, 192, 224,.7);
}
.textarea-i:hover{
   background-color: rgba(164, 192, 224,.5);
   transition:background-color 0.4s ease ;
}

.textarea-o{
   background: rgba(250, 26, 26,.7);
}

.textarea-o:hover{
   background-color: rgba(250, 26, 26,.5);
   transition:background-color 0.4s ease ;
}

label{
   width: 44vw;
   font-size:clamp(.5rem, calc(.5rem + 0.6vw), 1.20rem);
}

label h2{
   height: 2.5rem;
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: monospace;
   text-align: center;
   border-radius:1rem 1rem 0 0;
   border: 1px solid white;
   border-width: 1px;
   border-style: solid;
   padding: .4rem;
   background-color: rgba(83, 80, 80,.7);

}

.color-io{
   color: rgb(202, 206, 238);
}

.button{
   display: inline-block;
   width: 21.2vw;
   height: 5vh;
   border-radius: .5rem;
   border: 1px solid white;
   background-color: rgba(124, 117, 117,.8);
   box-shadow: 2px 2px 3px #000;
   font-size:clamp(.3rem, calc(.3rem + 0.6vw), 1.2rem);
   margin:1vw 0;
   color: white;
}

.button:hover{
   font-size: calc(.3rem + 0.8vw);
   background-color: rgba(124, 117, 117,.5);
}

button.copiar, .borrar{
   width: 15.8vw;
}

.borrar, .copiar{
   background-color: rgba(4, 4, 80,.7);
   color: white;
}

.borrar:hover{
   background-color: rgba(4, 4, 80,.1);
   font-size: calc(.3rem + 0.7vw);
   color: white;
} 

.copiar:hover{
   background-color: rgba(4, 4, 80,.1);
   font-size: calc(.3rem + 0.7vw);
   color: white;
}

.borrador{
   resize: vertical;
   width: 89.5vw;
   height: 12vh;
   border-radius: .5rem;
   padding: .5rem;
   font-size: 1rem;
   font-family: monospace;
   border-bottom: 5vh;
   background: rgba(00, 00, 00,.6);
   border: 1px solid white;
}

footer{
   display: flex;
   flex-direction: column ;
   justify-content: space-evenly;
   align-items: center;
   height: 10vh;
   font-size: 0.9rem;
   color: white;
   background-color: rgb(29, 28, 28);
}

.copyright{
   font-size: calc(.2rem + 0.7vw);
}