style.css

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,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:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:'krazy_nightsregular';src:url('fonts/krazynights-webfont.eot');src:url('fonts/krazynights-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/krazynights-webfont.woff2') format('woff2'),url('fonts/krazynights-webfont.woff') format('woff'),url('fonts/krazynights-webfont.ttf') format('truetype'),url('fonts/krazynights-webfont.svg#krazy_nightsregular') format('svg');font-weight:normal;font-style:normal}body{font-family:helvetica,sans-serif}h1{font-size:2rem;padding:.5rem;text-align:center}h2{font-size:3em;text-align:center;font-family:'krazy_nightsregular',cursive}p{font-size:1.3rem;text-align:center}#game,#arsenal{display:inline-block;height:100vh}#game{width:80%;background-color:lightblue;background-size:cover;background-image:url('http://www.thebarefootbeat.com/wp-content/uploads/2013/10/alice_in_wonderland17.jpg')}#arsenal{width:20%;position:relative}.arsenal{width:100%}.arsenal-top{position:absolute;top:0;height:50vh;background:#e1e1e1;background:-moz-linear-gradient(top, #e1e1e1 -1%, #f6f6f6 0, #e1e1e1 0, #f1f1f1 50%, #fff 100%);background:-webkit-linear-gradient(top, #e1e1e1 -1%, #f6f6f6 0, #e1e1e1 0, #f1f1f1 50%, #fff 100%);background:linear-gradient(to bottom, #e1e1e1 -1%, #f6f6f6 0, #e1e1e1 0, #f1f1f1 50%, #fff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e1e1e1', endColorstr='#ffffff', GradientType=0)}.arsenal-bottom{position:absolute;top:50%;height:50vh;background-color:lightyellow}.arsenal-bottom-wrapper,.arsenal-top-wrapper{position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}@-webkit-keyframes arsenalMove{0%{left:-100%}100%{left:0}}@-moz-keyframes arsenalMove{0%{left:100%}100%{left:0}}@-o-keyframes arsenalMove{0%{left:100%}100%{left:0}}@-ms-keyframes arsenalMove{0%{left:100%}100%{left:0}}@keyframes arsenalMove{0%{left:100%}100%{left:0}}.arsenal-top-wrapper,.arsenal-bottom-wrapper{-webkit-animation:arsenalMove 2s;-moz-animation:arsenalMove 2s;-o-animation:arsenalMove 2s;-ms-transition:arsenalMove 2s;animation:arsenalMove 2s}.score,.level{margin-left:auto;margin-right:auto;text-align:center;margin-bottom:15%}.score h1,.level h1{display:inline-block;border:1px solid grey}.score h1 #score,.level h1 #score,.score h1 #level,.level h1 #level{font-weight:bold;padding-top:1rem}#timer{display:inline-block;margin-top:1rem;width:10vh;height:10vh;line-height:10vh;border-radius:50%;overflow:hidden}@-webkit-keyframes timerSlide{from{box-shadow:inset 0 0 0 0 black}to{box-shadow:inset 0 10vh 0 0 white}}@-moz-keyframes timerSlide{from{box-shadow:inset 0 0 0 0 black}to{box-shadow:inset 0 10vh 0 0 white}}@keyframes timerSlide{from{box-shadow:inset 0 0 0 0 black}to{box-shadow:inset 0 10vh 0 0 white}}@keyframes timerSlide{from{box-shadow:inset 0 0 0 0 black}to{box-shadow:inset 0 10vh 0 0 white}}@keyframes timerSlide{from{box-shadow:inset 0 0 0 0 black}to{box-shadow:inset 0 10vh 0 0 white}}.timer-color-slider{-webkit-animation:timerSlide 12s linear;-moz-animation:timerSlide 12s linear;-o-animation:timerSlide 12s linear;-ms-transition:timerSlide 12s linear;animation:timerSlide 12s linear}.arsenal-bottom{margin:auto auto;text-align:center;background-image:url("http://motoki-y.sakura.ne.jp/kabegami/011/a.gif");background-repeat:repeat}.arsenal-bottom p,.arsenal-bottom h1{padding-left:15%;padding-right:15%;line-height:1.2em}.arsenal-bottom h1{margin-bottom:10%}.arsenal-bottom span{color:red}#game{position:relative}#game div{position:absolute}#game #game-message{color:black;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);text-align:center}#game #game-message h2{z-index:100;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);background-color:rgba(230,230,230,0.8);box-sizing:border-box;padding:1.5rem;border-radius:2%;display:inline-block;overflow:hidden}#game #invisibleDiv{top:0;left:0;right:0;bottom:0}#game .instructions{position:absolute;top:50%;font-size:10vw;color:purple;left:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border:2vw solid purple;display:inline-block;padding:5vw}.displayNone{display:none !important}.invisibleOn{z-index:10}.opacityOn{background-color:rgba(0,0,0,0.7)}@-webkit-keyframes gameMessageAppear{0%{opacity:0}50%{opacity:0}100%{opacity:1}}@-moz-keyframes gameMessageAppear{0%{opacity:0}50%{opacity:0}100%{opacity:1}}@keyframes gameMessageAppear{0%{opacity:0}50%{opacity:0}100%{opacity:1}}@keyframes gameMessageAppear{0%{opacity:0}50%{opacity:0}100%{opacity:1}}@keyframes gameMessageAppear{0%{opacity:0}50%{opacity:0}100%{opacity:1}}#game-message{-webkit-animation:gameMessageAppear 4s ease;-moz-animation:gameMessageAppear 4s ease;-o-animation:gameMessageAppear 4s ease;-ms-transition:gameMessageAppear 4s ease;animation:gameMessageAppear 4s ease}.balloon{position:absolute;width:100px;height:100px;z-index:2;background-color:pink;border-radius:50%;overflow:hidden;background-size:cover;opacity:0;transition:opacity .9s ease-in,left .2s linear,bottom .2s linear;-ms-transition:opacity .9s ease-in,left .3s linear,bottom .3s linear;-moz-transition:opacity .9s ease-in,left .3s linear,bottom .3s linear;-webkit-transition:opacity .9s ease-in,left .3s linear,bottom .3s linear}.balloon.appear{opacity:1}@media (max-width:1150px){html{font-size:80%}h1{padding:.3rem}}@media (max-width:1150px){html{font-size:70%}}@media (max-width:767px){html{font-size:55%}h1{font-size:.8em}}@media (max-width:767px){html{font-size:45%}}