body {
 display: grid;
 height: 100vh;
 margin-top: 20px;
 padding: 0;
}
main{
 display: grid;
 grid-gap: 1rem;
 grid-template-rows: 1fr 2fr;
 margin: 1rem;
}
textarea {
 background: #fff;
 border-radius: 4px;
 border: 1px solid #888;
 box-sizing: border-box;
 color: #000;
 display: block;
 line-height: 1.25;
 outline: none;
 padding: .25rem .5rem;
 resize: none;
}

h1 {
    font-family: monospace;
}
#number {
 font-size: 1.75rem;
}
#number:focus {
 background: #cef;
 border-color: #09f;
 box-shadow: 0 0 0 .2rem rgba(0,153,255,.5);
}
#english {
 font-size: 1.25rem;
}
#english:focus {
 background: #cfd;
 border-color: #0f6;
 box-shadow: 0 0 0 .2rem rgba(0,255,102,.5);
}
#english.oops {
 background: #fce;
 border-color: #f09;
}
#english.oops:focus {
 box-shadow: 0 0 0 .2rem rgba(255,0,153,.5);
}


.article{
    font-family: monospace;
    padding: 0 20% 0% 1%;
    font-size:1.2em;
}