body{
    margin:0;
    background:#aca4a4;
}
.container{
    display:grid;
    grid-template-columns: 1fr 100px 1fr;
    align-items: center;
    height: 100vh;
    box-sizing: border-box;
    padding: 20px;
    gap:20px;
}
.large-area{
    height: 100%;
    padding:20px;
    box-sizing: border-box;
    color:#aaaaaa;
    background:#333333;
    border:none;
    border-radius:10px;
    outline:none;
    resize:none;
    font-family: monospace;
    transition: background 0.3s,color 0.3s;

}
.large-area:hover,
.large-area:focus{
    background: #4a4a4a;
}
.large-area:focus{
  color:#eeeeee;      
}
.controls__button{
    padding: 8px 14px;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 5px;
    border:none;
    outline:none;
    cursor:pointer;
    background: #007865;
    color:#ffffff;
    font-weight:bold;
}
.controls__button:active{
    background: #4a4a4a;
}