html,*{box-sizing:border-box}html,body{margin:0;padding:0}#root{background:var(--background);min-height:100vh;width:100vw}#app{text-align:center;color:#fff;font-family:Oswald,sans-serif}.home{text-align:center}.home a{display:block;background:#efefef;color:#000;text-decoration:none;padding:20px;font-size:20px;margin:4px 0}header{position:fixed;left:0;top:0;width:100%;z-index:2}header button,header a{display:inline-block;background:#fff;text-decoration:none;font-size:20px;border:none;padding:5px 20px;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0)}header .left{position:absolute;left:0;top:0;display:flex}header .left button:last-child,header .left a:last-child{border-radius:0 0 10px}header svg path{fill:#00072e}header .right{position:absolute;right:0;top:0;display:flex}header .right button:first-child,header .right a:first-child{border-radius:0 0 0 10px}.activity-headline{padding:0 0 40px}.activity-headline h1{margin:0;padding:0;font-size:30px}.container{margin:0 auto;width:100%;max-width:800px}.activity{padding:80px 20px 20px}.overflow-activity{position:absolute;left:0;top:0;z-index:3;width:100%;min-height:100%;background:var(--background)}ul.question-choice{list-style-type:none;margin:0;padding:0}ul.question-choice button{width:100%;margin:10px 0;font-size:30px;padding:10px;cursor:pointer;border:1px solid #fff;animation:fly-in 1s}ul.question-choice button.selected,ul.question-choice button.not-selected{pointer-events:none}ul.question-choice button.not-selected:not(.correct){opacity:.5}ul.question-choice button.correct{background:#0f0;border-color:#0f0}ul.question-choice button.not-correct.selected{background:red;border-color:red;color:#fff}ul.question-choice:not(.selected) button .translation{margin-top:-16px;opacity:0}ul.question-choice .translation{font-size:16px;transition:all .3s}@keyframes fly-in{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.question-spell .hint{letter-spacing:2px;font-size:30px}.question-spell.correct .hint{color:#0f0}.question-spell.incorrect .hint{color:red}.question-spell .buttons{margin-top:30px;animation:fly-in 1s}.question-spell button{font-size:30px;padding:5px 10px;margin:5px;cursor:pointer}.question-spell button.selected{visibility:hidden}.stats-progress{--radius: 10px;--border: #666;display:flex;width:100%;border:1px solid var(--border);border-radius:var(--radius)}.stats-progress button{flex-grow:1;width:100%;border:none;background:#f0f8ff;height:20px}.stats-progress button:first-child{border-radius:var(--radius) 0 0 var(--radius)}.stats-progress button:last-child{border-radius:0 var(--radius) var(--radius) 0}.stats-progress button:not(:first-child){border-left:1px solid var(--border)}.stats-progress button.correct{background:#0f0}.stats-progress button.incorrect{background:red}.question-container .question{font-size:30px;margin:50px 0}.question-container .next-container{margin-top:50px}.question-container .next-container .result{font-size:20px}.question-container .next-container button{margin-top:30px;font-size:30px;padding:5px 50px;cursor:pointer}.question-container .audio-playback{margin:20px auto 0;text-align:center}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.audio-playback{--borderWidth: 4px}.audio-playback .icon{display:inline-block;width:40px;height:40px;background:#245465;border-radius:20px;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0)}.audio-playback .icon .inner{position:absolute;width:calc(100% - var(--borderWidth) * 2);height:calc(100% - var(--borderWidth) * 2);top:var(--borderWidth);left:var(--borderWidth);border-radius:20px;background:#184150;color:#fff;display:flex;flex-direction:column;justify-content:center}.audio-playback .icon .inner svg{align-self:center}.audio-playback .icon .inner svg path{fill:#7495a1}.audio-playback.playing .icon{background:#47cbff}.audio-playback.loading .icon{background:linear-gradient(90deg,#47cbff,#7495a1);animation:rotate 4s linear infinite}.results ul{list-style-type:none;margin:0;padding:0}.results ul li{background:var(--color-secondary);margin:3px;text-align:left;padding:10px;display:flex;justify-content:space-between}.results ul li.correct svg path,.results ul li.correct .word .inner div:first-child{fill:#0f0;color:#0f0}.results ul li.incorrect svg path,.results ul li.incorrect .word .inner div:first-child{fill:red;color:red}.results ul li .left{display:flex}.results ul li .left>div{display:flex;flex-direction:column;justify-content:center}.results ul li .left>div:first-child{padding-right:10px}.results ul li .listen{display:flex;flex-direction:column;justify-content:center}.results ul li .listen .audio-playback{margin-top:0}.app-confirm{position:fixed;z-index:3;left:0;top:0;width:100%;height:100%}.app-confirm:not(.shown){pointer-events:none}.app-confirm:before{content:"";display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:#fff;opacity:.3;transition:all .5s}.app-confirm .dialog{position:absolute;max-width:600px;width:calc(100vw - 30px);top:50px;left:50%;padding:30px;transform:translate(-50%);background:var(--color-base);border:2px solid var(--color-secondary);transition:all .5s;font-size:20px}.app-confirm:not(.shown):before{opacity:0}.app-confirm:not(.shown) .dialog{opacity:0;transform:translate(-50%) translateY(-100%)}.app-confirm .buttons{margin-top:30px}.app-confirm .buttons button{font-size:20px;padding:5px 20px;margin:0 5px;cursor:pointer;background:#fff;border:none}.category h1{margin-bottom:0}.category small{display:block;margin-bottom:20px}.category .buttons{display:flex}.category .buttons a,.category .buttons button{display:block;background:#efefef;text-decoration:none;color:#000;flex-grow:1;border:none;margin:2px 2px 20px;font-size:20px;padding:5px 30px}.category ul{list-style-type:none;margin:0;padding:0}.category ul li{background:var(--color-secondary);margin:3px;text-align:left;padding:10px;display:flex;justify-content:space-between}.category .audio-playback{margin:0}:root{--color-base: #00072e;--color-secondary: #2e2f54;--background: linear-gradient(-45deg,#00072e 0%, #101c5e 100%)}.settings{text-align:left;font-size:20px}.settings select{font-size:20px;padding:5px 10px}.settings .rows{display:grid;grid-template-columns:1fr 1fr;grid-row-gap:10px}.settings .rows .field{text-align:right}