.modal-bg{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5)}.modal-bg .modal{position:relative}.modal-bg .modal .modal-content{position:relative;background:#fff;max-width:500px;border-radius:5px;box-shadow:2px 2px 5px rgba(0,0,0,0.3);padding:20px 35px;margin:20px;box-sizing:border-box}@media (max-width: 420px){.modal-bg .modal .modal-content{padding:20px}}.modal-bg .modal .modal-content h3{margin-top:5px}.modal-bg .modal #modal-close{position:absolute;top:27px;right:30px;font-size:20px;cursor:pointer;color:#afaeae}.modal-bg .modal #modal-close:hover{color:#909090}.btn{border-radius:50%;background-color:#fff;border:none;box-shadow:2px 2px 5px rgba(0,0,0,0.5);cursor:pointer}.btn:active{box-shadow:inset 2px 2px 2px rgba(0,0,0,0.5)}.sm-btn{width:50px;height:50px;font-size:30px}.bg-btn{width:100px;height:100px;font-size:35px}#play{color:#ea1f1f}#play.pulse:before{animation:pulse 1.3s infinite}@keyframes pulse{0%{opacity:0}50%{opacity:1}100%{opacity:0}}#hint,#change-lang{color:#afaeae;margin:0 10px}#hint:hover,#change-lang:hover{color:#909090}.lang-btn{display:block;width:300px;font-size:24px;cursor:pointer;padding:10px;margin-bottom:15px;background:transparent;border:1px solid #cecece;border-radius:5px}.lang-btn:hover{background:#f1f1f1}.lang-btn:focus{box-shadow:inset 0px 1px 3px rgba(0,0,0,0.3)}*:focus{outline:none}html,body{margin:0;padding:0}html,body{width:100%;height:100%}body{font:14px sans-serif;color:#222}main{height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}footer{height:10vh;display:flex;align-items:center;justify-content:space-between}.unsupported-msg{font-style:italic}#result{font-size:20px}.hidden{display:none}