@import"https://fonts.googleapis.com/icon?family=Material+Icons";@import"https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap";:root{--length: 90dvmin;--btnSize: calc(var(--length)/10);--btnOuterGap: calc(var(--btnSize)/3);--btnInnerGap: calc(calc(var(--length) - calc(calc(var(--btnSize) + var(--btnOuterGap)) * 2)) / 2)}html,body{margin:0;padding:0;height:100%}body{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--md-sys-color-surface-variant)}h1{font-size:15vmin;font-family:Dancing Script,cursive;color:var(--md-sys-color-on-surface-variant)}@media (orientation:landscape){body{flex-direction:row;justify-content:space-evenly}}main{height:var(--length);width:var(--length);background-color:#2f2f2f;display:flex;align-items:center}section{position:absolute;width:var(--length);aspect-ratio:1;z-index:0;display:flex;overflow-x:scroll;scroll-snap-type:x mandatory;scroll-behavior:smooth}img{width:100%;height:100%;flex:0 0 100%;scroll-snap-align:start}button{height:var(--btnSize);aspect-ratio:1;border:none;color:inherit;background-color:#fff7;z-index:1;border-radius:50%}.material-icons{font-size:var(--btnSize);display:flex;justify-content:center;color:#0007}button#left{margin-left:var(--btnOuterGap);margin-right:var(--btnInnerGap)}button#right{margin-left:var(--btnInnerGap);margin-right:var(--btnOuterGap)}#settings{position:absolute;top:var(--btnOuterGap);left:var(--btnOuterGap);width:var(--btnSize);background:none;color:var(--md-sys-color-on-surface-variant);transition:transform .7s}#settings:active{transform:rotate(180deg)}#settingsContainer{font-family:monospace;display:flex;flex-direction:column;text-align:center;position:absolute;z-index:3;padding:var(--btnOuterGap);background-color:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface-variant);border-radius:5vmin;animation:appear .5s ease-in-out}i{color:inherit!important}input{background:none;border:2px solid var(--md-sys-color-outline);border-radius:5vmin;color:inherit;width:100%}#overlay{position:absolute;z-index:2;height:100%;width:100%;background-color:#0007}.hide{display:none!important}#settingsActions{display:flex;justify-content:flex-end;width:100%}#settingsActions button{font-family:inherit;background:none;font-size:4dvmin;margin-left:14%;margin-right:5%}#radio{margin:4dvmin 0;overflow-y:scroll;padding-left:4dvmin}div span{width:max-content;height:10dvmin;display:flex;align-items:center}div span input{margin:0;margin-right:3dvmin}@keyframes appear{0%{transform:scale(.5)}}
