html, body {
    width:100%;
    height:100%;
    margin:0;
    background-color:var(--theme1);
    overflow:hidden;
}
main > input {
    position:fixed;
    top:100%;
    left:100%;
    opacity:0;
}
main > .sections {
    display:flex;
    flex-direction:column;
    gap:0;
}
main > .sections > .head {
    box-sizing:border-box;
    height:200px;
    padding:16px;
}
main > .sections > .head > .en {
    height:100%;
    border:1px solid #333;
}

main > .sections > .body {
    position:relative;
    padding:50px;
}

main > .sections > .body > .rows {
    display:flex;
    flex-direction:column;
    gap:10px;
}
main > .sections > .body > .rows > .row:nth-child(even) {
    text-align:right;
}

main > .sections > .body > .rows > .row > .word.current {
    /* background-color:gainsboro; */
    color:#6f9eb3;
}
main > .sections > .body > .rows > .row > .word > .char {
    padding:0 .5px;
}
main > .sections > .body > .rows > .row > .word > .char.complete {
    color:#008000;
}
main > .sections > .body > .rows > .row > .word > .char.wrong {
    color:#BF0210;
}
main > .sections > .body > .rows > .row > .word > .char.current {
    color:#21343c;
}

main > .sections > .body > .caret {
    position:absolute;
    margin-top:2px;
    width:10px;
    height:2px;
    background-color:#6f9eb3;
    transition:left .1s ease-in-out;
}