body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}:root{--bg-color:#969696;--color-0:#eaeaea;--color-1:#f60;--color-2:#eec900;--color-3:#00f;--color-4:#c0f;--color-5:#0f0;--color-6:#6cf;--color-7:red;--cols:10;--rows:18;--tile-size:20px;--border-width:5px}.color-0{background-color:#eaeaea;background-color:var(--color-0)}.color-1{background-color:#f60;background-color:var(--color-1)}.color-2{background-color:#eec900;background-color:var(--color-2)}.color-3{background-color:#00f;background-color:var(--color-3)}.color-4{background-color:#c0f;background-color:var(--color-4)}.color-5{background-color:#0f0;background-color:var(--color-5)}.color-6{background-color:#6cf;background-color:var(--color-6)}.color-7{background-color:red;background-color:var(--color-7)}.App{--col-side:calc(var(--tile-size)*4);--col-center:calc(var(--tile-size)*10);--grid-height:calc(var(--tile-size)*18);grid-gap:20px 20px;grid-gap:var(--tile-size) var(--tile-size);display:grid;grid-template-areas:"h h h" "r c l" ". b .";grid-template-columns:var(--col-side) var(--col-center) var(--col-side);grid-template-rows:100px var(--grid-height) 100px;margin:auto;width:400px;width:calc(var(--tile-size)*20)}.App-header{grid-area:h}.grid-square{border:1px solid #eaeaea;height:20px;height:var(--tile-size);width:20px;width:var(--tile-size)}.grid-board{grid-gap:0;grid-area:c;grid-template-columns:repeat(10,20px);grid-template-columns:repeat(var(--cols),var(--tile-size))}.grid-board,.next-block{align-self:flex-start;display:grid}.next-block{grid-area:l;grid-template-columns:repeat(4,20px);grid-template-columns:repeat(4,var(--tile-size))}.score-board{display:flex;flex-direction:column;grid-area:r}.score-board-button{display:block;padding:1em}.controls{display:flex;flex-direction:row;grid-area:b}.control-button{--size:calc(var(--tile-size)*2.5);display:block;height:var(--size);text-align:center;width:var(--size)}.message-popup{background-color:#ffffff80;height:200px;height:calc(var(--tile-size)*10);left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%);width:200px;width:calc(var(--tile-size)*10)}.message-popup.hidden{display:none}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{-webkit-animation:App-logo-spin 20s linear infinite;animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:5vh}.App-link{color:#61dafb}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
/*# sourceMappingURL=main.9dacd4fa.css.map*/