/*
COLORS
#222831;//azul marinho escuro
#2D4059;//azul marinho 
#D9D9D9;amarelo claro(branco creme)
#F89406.laranja main
*/

/*FONT*/
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');


*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family:'Varela Round', sans-serif;
}
body{
  background-color: #222831;
}
header{
  height: 60px;
  width: 100%;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  background-color:#F89406;
  
}
header p{
  display: table;
  font-size: 2.5rem;
}
.obs{
  color: rgb(190, 55, 55);
  font-size: 18px;
  text-align: center;
  padding: 10px;
}
.textk{
  display: flex;
  align-items: center;
  justify-content: center;
}
.text{
  margin: 1rem;
  resize: none;
  width: 250px;
  height: 300px;
  font-size: 1.5rem;
  padding: 0.5rem;
  border-radius: 5px;

}
.text:focus{
  outline: none;
  border: 5px solid #F89406;
}
div.text{
  margin: 1rem;
  width: 250px;
  height: 300px;
  background-color: #F89406;
  color: #000000;
  border-radius: 5px;
  font-size: 1.5rem;
  padding: 0.5rem;

}
.textResult{
  margin: 1rem;
  width: 250px;
  height: 300px;
  overflow-wrap: break-word;
  font-size: 1.5rem;
  padding: 0.5rem;
  border-radius: 5px;
  background-color: #F89406;
}
.copy{
  border: 2px solid #F89406;
  padding: 5px;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 5px;
}
.copy:hover{
  background-color:rgb(19, 119, 166);
  color:#000 ;
  border: transparent;
}

.actionButtons{
  display: flex;
  justify-content: center;
  align-items: center;
}
.actionButtons button{
  margin: 1rem;
  font-size: 1.5rem;
  padding: 0.5rem;
  border: 0.2rem solid #F89406;
  
  border-radius: 3px;
}
.painted{
    background-color:#F89406;
    color: #000000;
    cursor: pointer;
}
.leaked{
  background-color: transparent;
  color: #d9d9d9;
  cursor: pointer;
}
.actionButtons button:hover{
  transform:scale(1,1.1) ;
}
main{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
footer{
  color: #F89406;
}
@media (max-width:620px) {
  .textk{
    flex-direction: column;
  }
  .textResult, .text{
    height: 155px;
  }
  .obs{
    font-size: 12px;
    padding: 5px;
  }
  header{
    height: 50px;
  }
  .text{
    margin: 0;
  }
  .actionButtons{
    margin: 0;
    padding: 0;
  }

}