:root {
    --text-color: #ffffff;
    --container-color: #3b3b4f;
    --black-color: #1b1b32;
    --back-color: #5d0968d3;
    --button-color:#802f2b;                      
    --output-color:#d484ba;
    }
body{
  background-color:var(--back-color);
  text-align:center;
  font-size:28px;
  color:var(--text-color);
}
.container{
  background-color:var(--container-color);
  border:3.8px solid #ffffff;
  border-radius:2rem;
  margin: auto;
  padding:4rem 2rem;
  width:75%;
  height:200px;
  display:grid;
  gap:8px;
  font-size:2rem;

}
input{
  margin:auto;
  width:50%;
  height:50px;
  border:8px solid var(--back-color);
  font-size:2rem;
  font-weight:bolder;
}
button{
  margin:auto;
  width:51%;
  height:50px;
  background-color:var(--button-color);
  border:3px solid var(--text-color);
  color:var(--text-color);
  font-size:1.5rem;
  font-weight:bold;
  padding:0.3rem 0;
  transition: 0.3s ease-in-out;
}
button:hover{
  cursor:pointer;
  transform:scale(1.1);
}
#output{
  background-color:var(--container-color);
  border:3.8px solid #ffffff;
  margin:1.5rem auto;
  width:80%;
  height:80px;
  font-size:2rem;
  font-weight:bolder;
  display: none;
  padding:1rem;
  
}