* {
    margin: 0;
    border: 0;
}

html, body {
    height: 100%;
}

body {
    background: darkslategrey;
}

.container {
    padding: 10px;
    margin-top: 16px;
}

.outer {
    /*height: calc(100% - 40px);*/
    padding: 20px;
    border: 2px solid lightsteelblue;
}

.sentence-bg {
    height: 200px;
    margin-bottom: 20px;
    transition: background-color 2s;
    display: flex;
}

.sentence-outer {
    width: 0;
    height: 0;
    margin: auto;
    position: relative;
}

.sentence, .fake-sentence {
    font-family: Verdana;
    font-size: 0;
    color: lightsteelblue;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    width: fit-content;
    white-space: nowrap;
}

.sentence {
    transition: color 2s;
}

.fake-sentence {
    pointer-events: none;
}

.letter, .fake-letter {
    font-size: 40px;
    transition: left 2s, top 2s;
}

.fake-letter {
    opacity: 0;
}

.outer input, .outer button {
    height: 26px;
    box-sizing: content-box;
    vertical-align: middle;
}

.outer input[type='text'] {
    padding: 0 5px;
}

button {
    width: 50px;
}