@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

* {
 margin: 0;
 padding: 0;
 font-family: 'Montserrat', sans-serif;
}

body {
 background: #F7F7F7F9;
 background: -webkit-linear-gradient(to right, #F7F7F7F9, #F7F7F7F9);
 background: linear-gradient(to right, #F7F7F7F9, #F7F7F7F9);
}

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

.content > div {
 width: 90%;
 height: 82%;
 background: #FFFFFF;
 padding: 10px;
 border-radius: 10px;
 display: grid;
 grid-template-rows: 15% 75% 10%;
}

.content > div .header {
 display: grid;
 grid-template-columns: calc(45% - 10px) 10% calc(45% - 10px);
 gap: 10px;
 margin-top: 20px;
}

.container {
 border: 1px solid #BCC5D4;
}

.header select {
 height: 60%;
 border: 1px solid #767676;
 border-radius: 5px;
 padding: 5px;
 outline: none;
 cursor: pointer;
}

select::-ms-expand {
 display: none;
}

.icon_btn {
 border: 0;
 background: none;
 font-size: 15px;
 padding: 3px;
 cursor: pointer;
 height: 50%;
}

.icon_btn:hover {
 color: #000000A9;
}

.content_textarea {
 height: 115%;
 display: grid;
 grid-template-columns: 50% 50.5%;
}

textarea {
 width: 99%;
 height: 92%;
 border-radius: 5px;
 font-size: 25px;
 padding: 10px;
 outline: none;
}

.translate {
 border: 0;
 background: #BCC5D4;
 border-radius: 10px;
 cursor: pointer;
}

.translated_text {
 background: #F0F0F0;
}

p.author {
 display: flex;
 justify-content: center;
 font-variant: JIS04;
 gap: 7px;
 color: #333333;
 margin-top: -50px;
}

p.author a {
 text-decoration: none;
 font-weight: 500;
 color: #333333;
}

/* Responsividad */

@media (max-width: 900px) {
 .content > div {
  width: 90%;
  height: 50%;
 }
}

@media (max-width: 767px) {
 .content > div {
  width: 95%;
  height: 40%;
 }

 .content_textarea {
  height: 110%;
  grid-template-columns: 100%;
 }
}

@media (max-width: 480px) {
 .content > div .header {
  grid-template-columns: 1fr 1fr 1fr;
 }
}