#controlBar{padding:10px;position:absolute;bottom:0;left:0;right:0}#controls{transition:transform .3s ease}.controls-hidden{transform:translateY(150%)}#controlsToggle{background-color:transparent;border:none;cursor:pointer;color:hsla(0,0%,100%,.7);border-radius:50%;height:33px;width:33px;font-size:30px;rotate:90deg}.button{background-color:#e7e7e7;color:#000;border:none;text-align:center;text-decoration:none;border-radius:2px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.button,input{padding:5px 15px;display:inline-block;font-size:12px;margin:1px;font-weight:700}input{border-radius:2px}#verseInput{width:100px}.selector{display:inline-block;font-size:11px;border-radius:2px;padding:5px 5px;font-weight:700;text-transform:uppercase;background-color:#e2e2e2}#translationInput{width:150px}.button:hover{background-color:#b4b4b4}.button:active{background-color:#919191}#bgImgCustomUrlInput{width:100px}.toggle{--width:80px;--height:calc(var(--width)/3.3);position:relative;display:inline-block;width:var(--width);height:var(--height);box-shadow:0 1px 3px rgba(0,0,0,.3);cursor:pointer;margin-bottom:-8px;font-weight:700;margin-left:3px}.toggle input{display:none}.toggle .labels{position:absolute;top:0;left:0;width:100%;height:100%;font-size:12px;font-family:sans-serif;transition:all .4s ease-in-out;overflow:hidden}.toggle .labels:after{content:attr(data-off);left:0;color:#4d4d4d;background-color:#e2e2e2}.toggle .labels:after,.toggle .labels:before{position:absolute;display:flex;justify-content:center;align-items:center;top:0;height:100%;width:100%;transition:all .1s ease-in-out}.toggle .labels:before{content:attr(data-on);left:calc(var(--width)*-1);color:#fff;background-color:#585858;text-align:center}.toggle input:checked~.labels:after,.toggle input:checked~.labels:before{transform:translateX(var(--width))}#errorDisplay{color:#ff4141;margin-left:10px;font-weight:700}#textShade{position:absolute;border-radius:clamp(.1rem,2vw + 3vh,4rem);top:clamp(.1rem,1vw + 2vh,2rem);left:clamp(.1rem,1vw + 2vh,2rem);right:clamp(.1rem,1vw + 2vh,2rem);bottom:clamp(.1rem,5vw + 7vh,5rem)}#verseTitleTranslationContainer{position:relative;white-space:nowrap}#verseTitle{color:#fff;text-transform:uppercase;font-size:clamp(.1rem,2.3vw + 2.3vh,3.6rem)}.verse-container{position:relative;display:inline-block}.arrow{position:absolute;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .2s;color:hsla(0,0%,100%,.4);font-size:clamp(.8rem,.7vw + 2vh,1.5rem);border-radius:15px;padding:12px 16px;cursor:pointer;background-color:rgba(0,0,0,.4)}.arrow:active{background-color:rgba(0,0,0,.5)}.verse-container:hover .arrow{opacity:1}.left{left:0;transform:translateX(-130%) translateY(-50%)}.right{right:0;transform:translateX(130%) translateY(-50%)}.unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}#verseVersion{color:#ff0;display:inline-block;font-style:oblique;text-transform:uppercase;margin-bottom:10px;margin-top:clamp(.2rem,.6vw + 1.2vh,.8rem);font-size:clamp(.1rem,1.8vw + 1.8vh,2.7rem);cursor:pointer}#versionsDropdown{position:absolute;top:100%;left:0;z-index:1000}#versionsDropdown ul{list-style:none;padding:12px;margin:0;background:#f0f0f0;box-shadow:0 2px 4px rgba(56,56,56,.1);border-radius:16px;background-color:#f0f0f0;color:#000}#versionsDropdown li{padding:8px 12px;cursor:pointer;transition:background-color .2s}#versionsDropdown li:hover{background-color:#e0e0e0;color:#202020}#versionsDropdown li:active{background-color:#d0d0d0}#verseContainer{border-radius:80px;font-family:Arial,Helvetica,sans-serif;height:77%;position:absolute;top:10px;left:10px;right:10px;outline:none;padding-top:clamp(.1rem,2vw + 5vh,6rem);padding-left:clamp(.1rem,6vw + 2vh,7rem);padding-right:clamp(.1rem,5vw,20rem)}#verseContent{color:#fff;text-align:center;margin-top:clamp(.1rem,1vw + 1vh,2rem)}@media screen and (max-height:280px) and (min-width:700px){#verseTitleTranslationContainer{margin-top:clamp(.1rem,2vw + 3vh,1rem);margin-left:clamp(.1rem,.5vw + 1vh,.2rem)}#verseContainer{padding-top:clamp(.1rem,1vw + 2vh,2rem);padding-left:clamp(.1rem,3vw + 2vh,3rem);padding-right:clamp(.1rem,5vw,3rem);display:flex}#verseContent{margin-top:clamp(.1rem,1vw + 3vh,10rem);font-size:clamp(.5rem,1.5vw + 3.5vh,6rem);margin-left:clamp(.1rem,1vw + 3vh,10rem);margin-right:5px}}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;background-size:100% 100%;margin:0}#app,#baseDiv,body,html{height:100%}body,html{margin:0}