body,html{margin:0;height:100%;overflow:hidden}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}.ipod{width:320px;height:525px;border:2px solid #ebebeb;margin:50px auto auto;border-radius:25px;font-family:"PT Sans",sans-serif}.mobile{position:fixed;z-index:2;background-color:rgba(0,0,0,.75);top:0;left:0;width:100%;margin:auto;height:100vh;text-align:center;display:flex;justify-content:center;align-items:center}.mobile,.mobile a{color:#fff}@media only screen and (min-width:990px){.mobile{display:none}}.bezel{height:40%;padding:20px 15px}.screen{width:95%;margin:auto;border:3px solid #000;height:100%;border-radius:5px;position:relative;overflow:hidden}.screen__overlay{position:absolute;width:100%;height:100%;background:transparent;z-index:1}.status-bar{top:0;width:100%;z-index:1;text-align:center;padding:5px 2px;background:#8da4b2;background:linear-gradient(0deg,rgba(141,164,178,.683911),#ceddf3 51%,#d3e2f8)}.status-bar__title{font-weight:900;font-size:16px;word-wrap:none;width:100%}.status-bar .battery{position:absolute;right:2px;text-align:right;padding-right:2px}.status-bar .status{position:absolute;left:2px;text-align:left;width:50%;width:15px;height:15px}.status-bar .status .arrow-right{position:absolute;width:0;height:0;left:2px;border-top:8px solid transparent;border-left:16px solid #036ee9;border-bottom:8px solid transparent}.controls{display:flex}.menu-item{display:block;font-weight:700;text-decoration:none;color:#000;padding:4px 5px}.menu-item:after{content:">";position:absolute;right:5px}.menu-item.active{background:#036ee9;color:#fff}.clicker-buttons{margin:30px;height:200px;width:200px;overflow:hidden;border-radius:50%;background:#e4e3e3}svg{height:100%;width:100%}polygon{fill:transparent;stroke:none;stroke-linejoin:round}polygon:hover{fill:#6495ed}.wheel{position:relative;cursor:pointer;margin:auto}.clicker{width:60px;height:60px;background:#fff;position:absolute;border-radius:50%;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1}.clicker:hover{background:#6495ed}.page{position:absolute;width:100%;height:85%;overflow:scroll;overflow-x:hidden}.page.no-scroll{overflow:hidden}.page .page-container{padding:5px}.page h4{font-weight:700}.fade-exit{right:100%}.fade-exit-active{-webkit-animation:exit .5s ease-in-out;animation:exit .5s ease-in-out}.fade-enter{right:0}.fade-enter-active,.fade-enter-done{-webkit-animation:enter .5s ease-in-out;animation:enter .5s ease-in-out}@-webkit-keyframes exit{0%{right:0;display:block}to{right:100%;display:none}}@keyframes exit{0%{right:0;display:block}to{right:100%;display:none}}@-webkit-keyframes enter{0%{right:-100%}to{right:0}}@keyframes enter{0%{right:-100%}to{right:0}}.back-fade-exit{right:100%}.back-fade-exit-active{-webkit-animation:back-exit .5s ease-in-out;animation:back-exit .5s ease-in-out}.back-fade-enter{right:0}.back-fade-enter-active,.back-fade-enter-done{-webkit-animation:back-enter .5s ease-in-out;animation:back-enter .5s ease-in-out}@-webkit-keyframes back-exit{0%{right:0}to{right:-100%}}@keyframes back-exit{0%{right:0}to{right:-100%}}@-webkit-keyframes back-enter{0%{right:100%}to{right:0}}@keyframes back-enter{0%{right:100%}to{right:0}}.battery img{width:25px;padding-right:2px}.square{height:200px;background:pink;-webkit-transform:rotate(45deg);transform:rotate(45deg);cursor:pointer}.square .row{height:100px;display:flex}.square .row>div{height:100px;width:100px;background:#d1d1d1;position:relative}.square .row>div>span{position:absolute;top:30%;left:25%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);text-transform:uppercase;font-weight:700;color:#fff;font-size:14px}.square .row>div>span>img{width:15px;height:10px;position:absolute}.square .row>div>span.prev{top:60%;left:32%}.square .row>div>span.next{top:38%;left:49%}.square .row>div>span.play{top:62%;left:50%}.square .row>div:hover{background:#e9e9e9}.skill-group{padding-top:5px}.skills{padding-top:25px;padding-left:5px}.now-playing{display:none}.now-playing.playing{display:block}.artwork{display:flex;flex-direction:row;align-items:center;height:80%}.artwork .artwork-image{width:33.33333%;padding-left:5px}.artwork .artwork-image>img{width:80%}.artwork .meta{width:66.66667%}.artwork .meta>p{font-weight:700;font-size:1em;padding-bottom:5px}.progress-bar{height:15px;width:94%;background:#fff;background:linear-gradient(180deg,#fff 34%,#bebebe 47%,#fff 57%);margin:auto;border:1px solid #c5c5c5;overflow:hidden;position:relative}.progress-bar .progress{height:100%;width:0;position:absolute;background:rgba(3,110,233,.85)}h3{font-weight:700}.smaller-p{font-size:.8em}.instructions{padding-top:25px;top:0;left:0;z-index:2;text-align:center;display:flex;flex-direction:column;justify-content:center}.instructions span{font-weight:700}.instructions>p{padding-bottom:10px}.instructions .close-button{position:absolute;top:25px;right:25px;cursor:pointer}
/*# sourceMappingURL=main.1482b22d.chunk.css.map */