*{padding:0;margin:0}.App{box-sizing:border-box;min-height:100vh;display:flex;justify-content:center;align-items:center;font-family:fira code light;background-color:#000}.container{max-width:950px;margin:5px;width:calc(100% - 10px);padding:30px;border-radius:10px;box-sizing:border-box;border:1px solid #ffffff;box-shadow:0 0 6px #ffffff40}.test{-webkit-user-select:none;user-select:none}.input-field{opacity:0;z-index:-999;position:absolute}span{font-size:20px;-webkit-user-select:none;user-select:none;cursor:text;color:#fff;font-weight:300}span.active{border-bottom:3px solid orange}.char{font-size:24px;font-weight:300}.char.correct{color:#6aff6a}.char.wrong{color:tomato}.char.active{color:#ffd54f}.result{display:flex;justify-content:space-between;align-items:center;margin-top:15px;color:#fff;padding-top:10px;border-top:2px solid #ffffff}button.btn{padding:8px;outline:none;border:1px solid #ffffff;border-radius:4px;cursor:pointer;color:#fff;font-size:15px;background-color:#000;font-weight:700;transition:all .5s}button.btn:hover{background-color:#222}