@import url('https://fonts.googleapis.com/css?family=VT323&display=swap');input::placeholder,textarea::placeholder{opacity:1;transition:opacity .2s;color:inherit}input:focus::placeholder,textarea:focus::placeholder{opacity:.2}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;transition:opacity .2s;color:inherit}input:focus:-ms-input-placeholder,textarea:focus:-ms-input-placeholder{opacity:.2}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}*{box-sizing:border-box;-webkit-appearance:none;-webkit-tap-highlight-color:transparent!important;-webkit-tap-highlight-color:rgba(0,0,0,0)!important;outline:none;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:default;letter-spacing:0}html,body{margin:0;padding:0;background:#f2f3f7;font-size:13px;overflow:auto;height:100%;width:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Ubuntu,Cantarell,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}.blinker{animation:blinker 1s step-end infinite}@keyframes blinker{50%{opacity:0}}#scores{font-family:'VT323';font-size:5.4vw;width:16em;margin:auto;text-shadow:0 0 .1em rgba(0,0,0,.5);padding:2em 0}#scores a{color:blue;cursor:pointer}#scores p{text-align:center}#scores div{position:relative}#scores span{display:inline-block;background:#f2f3f7;z-index:1;position:relative;outline:.1em solid #f2f3f7}#scores span:last-child{float:right}#scores div::after{content:"....................................";position:absolute;bottom:0;left:0}#show-scores{height:1.5em;width:5em;border-radius:6px;color:black;font-weight:bold;text-align:center;line-height:1.5em;font-size:1.5vh;background:rgba(255,255,255,.5);color:#96a0bc;position:absolute;top:.75em;z-index:99;left:50%;transform:translateX(-50%);box-shadow:0 3px 6px rgba(0,0,0,.1);cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}#tetris-container{width:100%;max-width:30vh;margin:auto;position:relative;top:5vh}#tetris-container::before{content:'';display:block;padding-top:calc(220% - 14px)}#tetris{position:absolute;top:0;width:100%;height:100%;box-sizing:border-box}#tetris::after{content:attr(data-info-text);display:block;bottom:-5vh;position:absolute;width:100%;text-align:center;font-family:'VT323';font-size:2vh;font-weight:bold;color:black;text-shadow:0 0 .1em rgba(0,0,0,.5);transform:scaleX(120%)}#tetris.key-press [class^="piece--"]:not([class^="piece--next"]){transition-duration:.025s;transition-timing-function:linear}#controls>div{height:15vw;width:15vw;border-radius:25%;background:rgba(255,255,255,.5);position:absolute;box-shadow:0 3px 6px rgba(0,0,0,.1);cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}#controls>div::after,#controls>div::before{content:'';display:block;color:#96a0bc;border:3vw solid transparent;border-radius:25%;height:0;width:0;top:50%;left:50%;position:absolute}#controls .control--left{left:5vw;bottom:18vw}#controls .control--left::after{border-right-color:currentColor;transform:translate(-85%,-50%)}#controls .control--down{left:21vw;bottom:5vw}#controls .control--down::after{border-top-color:currentColor;transform:translate(-50%,-15%)}#controls .control--right{left:37vw;bottom:18vw}#controls .control--right::after{border-left-color:currentColor;transform:translate(-15%,-50%)}#controls .control--rotate{right:5vw;bottom:5vw;height:30vw;width:30vw;border-radius:100%}#controls .control--rotate::after{border:0;background:currentColor;border-radius:100%;height:4vw;width:4vw;transform:translate(-50%,-50%)}#controls .control--push{right:2vw;bottom:35vw;left:auto;border-radius:999px}#controls .control--push::after{border-top-color:currentColor;transform:translate(-50%,0%)}#controls .control--push::before{border-top-color:currentColor;transform:translate(-50%,-30%)}#game-over{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.5) url('../img/game-over.svg') no-repeat center;background-size:contain;height:25vw;max-height:300px;width:100%;backdrop-filter:blur(5px);box-shadow:0 5px 20px -10px rgba(0,0,0,.6);display:none}#save-score-form{width:300px;position:absolute;top:110%;left:50%;transform:translateX(-50%)}#save-score-form input[type=text]{background:rgba(255,255,255,.97);border-radius:6px 0 0 6px;box-shadow:0 5px 60px rgba(0,0,0,.6),inset 0 -4px rgba(0,0,0,.1);color:black;font-weight:bold;text-align:center;border:0;padding:0;margin:0;height:45px;width:70%;float:left}#save-score-form input[type=submit]{border-radius:0 6px 6px 0;background-color:#19a187;box-shadow:0 5px 60px rgba(0,0,0,.6),inset 0 -4px rgba(0,0,0,.1);color:white;font-weight:bold;height:45px;text-transform:lowercase;width:30%;border:0;margin:0;padding:0;float:right;cursor:pointer}@media only screen and (min-width:700px){#show-scores{font-size:16px;bottom:30px;top:auto}#scores{font-size:45px}}@media only screen and (min-width:500px){#controls>div{height:75px;width:75px}#controls>div::after,#controls>div::before{border-width:15px}#controls .control--left{left:25px;bottom:90px}#controls .control--right{left:185px;bottom:90px}#controls .control--down{left:105px;bottom:25px}#controls .control--rotate{right:25px;bottom:25px;height:150px;width:150px}#controls .control--rotate::after{height:20px;width:20px}#controls .control--push{right:10px;bottom:175px}}