*{margin:0;padding:0}body{background-color:#181818;color:#fff;display:flex;flex-direction:column;font-family:Roboto,sans-serif;height:100dvh;width:100vw}#root,.App{height:100%}::selection{background:gray}main{align-items:center;flex:1 1 auto;justify-content:space-between;justify-content:center;min-height:0;width:100vw}.wrapper,main{display:flex;flex-direction:column;height:100%}main p{max-width:min(95vw,60em)}#tools{flex:0 0 auto;padding:1em}.svg-triggle{cursor:pointer;display:inline-block;position:relative}.svg-triggle>svg{height:9vh;width:9vh}.svg-triggle .switch{aspect-ratio:1;background-color:#bcbcbc;border-radius:99999px;height:2.3vh;position:absolute;top:.9vh;transform:translate(-50%);transition:left .1s cubic-bezier(.075,.82,.165,1),top .1s cubic-bezier(.075,.82,.165,1),transform .1s cubic-bezier(.075,.82,.165,1);z-index:2}.svg-triggle .switch:after{background-color:#727272;content:"";height:1vh;left:50%;position:absolute;top:0;transform-origin:bottom;width:.2vh}.svg-triggle[data-position=ipa] .switch{left:33%;top:27.5%}.svg-triggle[data-position=ipa] .switch:after{transform:translateX(-50%) rotate(-45deg)}.svg-triggle[data-position=braille] .switch{left:66%;top:27.5%}.svg-triggle[data-position=braille] .switch:after{transform:translateX(-50%) rotate(45deg)}.svg-triggle[data-position=morse] .switch{left:50%;top:53%}.svg-triggle[data-position=morse] .switch:after{transform:translateX(-50%) rotate(180deg)}.svg-triggle div{font-size:1.7vh}.svg-triggle .text{left:-7%;position:absolute;top:-4%}.svg-triggle .braille{left:100%;position:absolute;top:3%}.svg-triggle .morse{font-size:1vh;left:50%;position:absolute;text-align:center;top:100%;transform:translate(-50%,-50%);width:6vh}h1{align-items:center;display:flex;font-size:2.5em;justify-content:center;margin-bottom:10px}h1 span{display:inline-block}p{font-size:1.3em;line-height:1.5;margin-bottom:20px;text-align:center}#text{align-items:center;display:flex;flex:1 1 auto;flex-direction:column;max-height:100%;min-height:0;overflow-y:scroll;&::-webkit-scrollbar{display:none}}#verset{max-height:100%;overflow-y:scroll;position:relative;&::-webkit-scrollbar{display:none}}#verset:after{content:attr(data-next);display:flex;left:50%;margin:0 auto;position:absolute;top:0;transform:rotateX(-90deg) translateX(-50%);transition:all 1s ease-in-out}#verset-container{align-items:flex-start;display:flex;min-height:9em}button{background-color:#4b4b4b;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:1em;padding:12px 25px;transition:background-color .3s ease}button:hover{background-color:#fff;color:#4b4b4b}.flex-break{flex-basis:100%;height:0}.brailleSentence{display:flex;flex-direction:row;flex-wrap:wrap;gap:1vh}.brailleLetter{display:flex;flex-direction:column;gap:.3vh}.furigana{padding-top:2vh;position:relative}.furigana .superscript{font-size:1.5vh;left:50%;position:absolute;top:-.5vh;transform:translate(-50%)}.row{display:flex;flex-direction:row;gap:.3vh}.dot{fill:#000;background-color:#000;border-radius:100%;filter:drop-shadow(1px 1px 1px rgba(255,255,255,.5));height:.6vh;width:.6vh}.dot.filled{fill:gray;background-color:gray}.morseSentence{font-family:monospace;white-space:pre-wrap}#button-info{background:#0e0e0e;box-sizing:border-box;flex:0 0 auto;flex-direction:column;padding:1vh 1vh 2vh;touch-action:manipulation;width:100vw}#button-info,.loader{align-items:center;display:flex}.loader{flex-direction:column;justify-content:center;min-height:10vh}.loader .spinner{animation:rotate .6s cubic-bezier(.19,.58,.92,.49) infinite;aspect-ratio:1;border-color:#fff #fff #0000 #0000;border-radius:100%;border-style:solid;border-width:.5vh;height:3vh}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media screen and (max-width:800px){h1{font-size:2em}}