html{height:100%}body{height:100%;margin:0;font-family:"Noto Serif","DejaVu Serif","Bitstream Vera Serif","Georgia",serif;-moz-font-feature-settings:"lnum";-webkit-font-feature-settings:"lnum";font-feature-settings:"lnum"}#rhythm-game{height:100%}.menu{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-content:stretch;align-items:center;transition-duration:500ms}.menu .menu-challenges{max-width:900px;padding:15px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.menu .menu-title{font-size:30px;text-shadow:4px 4px 1px #bef1ff;font-style:italic;margin:30px 30px 0 30px}@media(min-width: 660px){.menu .menu-title{font-size:34px;margin:40px 30px 10px 30px}}@media(min-width: 900px){.menu .menu-title{font-size:38px;margin:40px 30px 10px 30px}}.menu .menu-challenge-entry{display:block;border-radius:5px;padding:10px 15px;transition:box-shadow 300ms;text-decoration:none;background-color:rgba(0,0,0,.05);border-bottom:3px solid rgba(0,0,0,.15);color:rgba(0,0,0,.3);flex:0 0 auto;box-sizing:border-box;height:110px;margin:15px;width:calc(100% - 30px);display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between}.menu .menu-challenge-entry:hover{box-shadow:0px 4px 8px rgba(0,0,0,.3)}@media(min-width: 660px){.menu .menu-challenge-entry{width:calc(50% - 30px)}}@media(min-width: 900px){.menu .menu-challenge-entry{width:calc(33.333% - 30px)}}.menu .menu-challenge-title{font-size:22px}.menu .menu-challenge-info{font-size:16px;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:baseline}.menu .menu-challenge-info .menu-challenge-difficulty{font-size:22px}footer{font-family:monospace;font-size:12.5px;display:flex;flex-flow:column;justify-content:space-between;align-items:stretch;align-content:flex-start;margin:15px 0 10px 0;align-items:center;color:#666}@media(min-width: 900px){footer{flex-flow:row wrap}}footer>*{margin:2px 10px}footer a{color:#666;text-decoration:none}footer a:hover{text-decoration:underline}.game-container{height:100%;overflow:hidden;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center}@media(min-width: 900px){.game-container{align-items:flex-start;justify-content:center;flex-direction:row}}.game-container .game-menu{flex:0 0 auto;width:100%;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-around;justify-content:space-evenly;flex-direction:row;padding:0;transition:opacity 1s;border-bottom:1px solid rgba(0,0,0,.1);background:#fff;z-index:10}@supports(backdrop-filter: blur(10px)){.game-container .game-menu{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.7)}}@media(min-width: 900px){.game-container .game-menu{backdrop-filter:none;background:none;align-items:flex-start;justify-content:center;align-content:stretch;flex-direction:column;border-bottom:0}}.game-container .game-menu button,.game-container .game-menu a{flex:0 1 auto;align-self:stretch;border:0;padding:0;border:0;background:none;cursor:pointer}.game-container .game-menu button::-moz-focus-inner,.game-container .game-menu a::-moz-focus-inner{border:0}.game-container .game-menu button:focus,.game-container .game-menu a:focus{outline:0;border:0}.game-container .game-menu button:focus img,.game-container .game-menu a:focus img{opacity:.25}.game-container .game-menu button:hover img,.game-container .game-menu a:hover img{opacity:.45}.game-container .game-menu button.hidden img,.game-container .game-menu a.hidden img{opacity:.08;transition:opacity 1200ms}.game-container .game-menu button img,.game-container .game-menu a img{width:100%;height:auto;opacity:.25;transition:opacity 300ms}.game-container .game-menu .score{flex:0 1 auto;align-self:stretch;padding:7px 0;min-width:50px;margin:14px 8px 16px 8px;color:rgba(0,0,0,.8);border-radius:5px;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;background-color:rgba(0,0,0,.25)}.game-container .game-menu .score .curr-score{text-align:center;font-size:16px;font-weight:bold;transition:transform 500ms,opacity 1000ms;transition-timing-function:ease-in}@media(min-width: 900px){.game-container::after{content:""}.game-container .game-menu,.game-container::after{width:80px;padding:30px}}.game-container .game-view{box-sizing:border-box;width:100%;max-width:560px;padding:0 20px;position:relative}.game-container .game-view .modal{position:absolute;top:150px;left:50%;max-width:60%;transform:translate(-50%, -50%);transition:opacity 400ms,transform 400ms;background:rgba(0,0,0,.75);color:#fff;border-radius:5px;padding:16px;font-size:30px;text-align:center}@supports(backdrop-filter: blur(10px)){.game-container .game-view .modal{backdrop-filter:blur(5px);background:rgba(0,0,0,.7)}}.game-container .game-view .modal div{font-style:italic;font-size:16px}.game-container .game-view .timer-view-container{position:relative;perspective:1000px}.game-container .game-view .timer-view-container .timer-view,.game-container .game-view .timer-view-container .result-view{backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;width:100%;top:0;left:0;transform-style:preserve-3d;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.game-container .game-view .timer-view-container .result-view{font-size:20px;line-height:250%;padding:30px;text-align:center;background:rgba(0,0,0,.1);border-bottom:3px solid rgba(0,0,0,.1);border-radius:0 0 25px 25px}.game-container .game-view .timer-view-container .result-view .big{font-size:160%}.game-container .game-view .timer-view-container .result-view .it{font-style:italic}.timer-view{position:relative;transition:top 1s}.timer-view .head{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-content:flex-start;align-items:center;font-weight:bold;text-align:center;padding-top:30px}.timer-view .head .challenge-title{font-size:20px;margin:0 12px 30px 12px;width:100%}.timer-view .head .challenge-title span{font-weight:normal;font-style:italic;margin-left:5px}.timer-view .head .time-signature{flex:0 1 auto;line-height:85%;font-size:20px;margin:0 12px}@media(min-width: 560px){.timer-view .head{flex-wrap:nowrap}.timer-view .head .time-signature{order:-1}.timer-view .head .challenge-title{width:auto;margin-bottom:0}}.timer-view .head .metronome-intro{flex:0 0 auto;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-content:flex-start;align-items:center;margin:0 6px}.timer-view .head .metronome-intro div{border-radius:50%;background-color:#000;color:#fff;opacity:.25;width:19px;height:19px;font-size:14px;margin:0 4px;display:flex;justify-content:center;align-items:center}.timer-view .head .metronome-intro div.intro-highlight{opacity:1}@media(min-width: 460px){.timer-view .head .time-signature{font-size:24px}.timer-view .head .metronome-intro div{width:21px;height:21px;font-size:16px;margin:0 5px}}.timer-view .bar{display:flex;position:relative;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-content:flex-start;align-items:stretch;margin:30px 0;padding-left:8px}.timer-view .bar::before{left:0;top:0;position:absolute;content:"";height:56%;width:100%;border-bottom:1px solid #999}.timer-view .bar .group{display:inline-flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-content:flex-start;align-items:stretch;order:0;flex:0 1 auto;align-self:auto;min-width:0;margin-right:auto}.timer-view .bar .group:last-child{margin-right:0}.timer-view .bar .item{position:relative;order:0;flex:0 1 auto;align-self:auto;width:30px;height:100%;margin-right:auto;margin-left:-0.1px}.timer-view .bar .item:last-child{margin-right:0}@media(min-width: 460px){.timer-view .bar .item{width:36px}}@media(min-width: 560px){.timer-view .bar .item{width:40px}}.timer-view .bar .divider{width:0;height:auto;margin-top:10px;margin-bottom:20px;border-left:1px solid #999}.timer-view .bar .indicator-inner{fill-opacity:.3}.timer-view .bar .indicator-outer{fill-opacity:0}.timer-view .bar .note-highlight .indicator-inner{fill:#005dff;fill-opacity:1}.timer-view .bar .note-highlight .indicator-outer{fill:#0033fc;fill-opacity:.26}.timer-view .bar .note-highlight-correct .indicator-inner{fill:#009a29;fill-opacity:1}.timer-view .bar .note-highlight-correct .indicator-outer{fill:#0bd300;fill-opacity:.36}.timer-view .bar .note-highlight-fail .indicator-inner{fill:#d33f00;fill-opacity:1}.timer-view .bar .note-highlight-fail .indicator-outer{fill:#d35300;fill-opacity:.36}.timer-view .bar .flag{position:absolute;left:-15px;top:-webkit-calc(56% - 7px);top:-moz-calc(56% - 7px);top:calc(56% - 7px);width:15px;height:15px;background-color:rgba(0,0,0,.3);mask:url(flag.svg);-webkit-mask-image:url(flag.svg);-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center;mask-image:url(flag.svg);mask-repeat:no-repeat;mask-size:contain;mask-position:center;transform:scale(1)}.timer-view .bar .play-note{position:absolute;left:-5px;top:-10px;font-style:italic;font-size:14px}@media(min-width: 560px){.timer-view .bar .play-note{font-size:16px}}.timer-view .bar .play-note.higher{top:-20px}@keyframes highlight-flag{33%{background-color:#d35300;transform:scale(1.5)}}.timer-view .bar .flag.highlight{animation:highlight-flag 3s linear 0s 1 normal}/*# sourceMappingURL=style.css.map */