@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;900&display=swap');
*{outline: none;}
html, body{width:100%;height:100%;padding:0;margin:0;background:#f1c40f;}
button{font-family: 'Varela Round', sans-serif;cursor:pointer;color:#fff;padding:5px 10px;font-size:1.3em;display:flex;align-items: center;justify-content: center;border:solid 2px #2980b9;border-top:none;border-bottom-width:4px;background:#3498db;}
button:active{border-top:solid 2px transparent;border-bottom-width: 2px;}
.container{width:100%;height:100%;display:flex;justify-content: center;align-items: center;}
.container, .container *{box-sizing: border-box;}
.container menu{margin:0;padding:0;list-style: none;flex: 0 0 auto;margin-right:1em;font-family: 'Varela Round', sans-serif;width:100px;}
.container menu li{margin-bottom:0.4em;}
.container menu li a{color:#000;font-size:1.1em;}
.container .actions{width:150px;margin-left:1em;display:flex;flex-direction: column;}
.container .actions h2{text-align: center;font-family: 'Varela Round', sans-serif;margin:0;}
.container .actions h3{text-align: center;font-family: 'Varela Round', sans-serif;}
.container .actions button{padding:10px;}
.container .actions .tryagain{color:#c0392b;}
.container .actions .alright{color:#27ae60;}
.container .grid{border:solid 2px #242424;width:500px;height:500px;display:flex;flex-wrap: wrap;background:#000;font-family: 'Source Code Pro', monospace;}
.container .subgrid{border:solid 2px #7c7c7c;flex:0 0 auto;width:calc(100% / 3);height:calc(100% / 3);display:flex;flex-wrap: wrap;}
.container .grid .cell{border:solid 1px #c3c3c3;flex: 0 0 auto;width:calc(100% / 3);height:calc(100% / 3);background:#fff;font-weight:300;display:flex;justify-content: center;align-items: center;font-size:2.5em;pointer-events: none;}
.container .grid .cell.editor{pointer-events: all;cursor: pointer;}
.container .grid .cell.edited{position:relative;}
.container .grid .cell.edited::after{position: absolute;top:0;right:0;font-size:0.3em;display:block;content:attr(data-availables);font-weight:normal;}
.container .grid .cell.fillable{pointer-events: all;cursor: pointer;color:#999;}
.container .grid .cell.fillable:hover{background: #e7e7e7;}
.container .grid .cell.error{background: #ffe4e4;color: #b50404;}

.overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:50;background:rgba(255, 255, 255, 0);display:none;}
.wheel{position:fixed;left:300px;top:300px;z-index:55;}
.wheel .numbers{position:relative;}
.wheel .numbers span{font-family: 'Source Code Pro', monospace;font-size:1em;font-weight:bold;position:absolute;display:flex;justify-content: center;align-items: center;width:30px;height:30px;border-radius: 50%;background:#f1c40f;border:solid 2px #7c7c7c;cursor: pointer;box-sizing: border-box;transform: translate(-50%, -50%);}
.wheel .numbers span:hover{background:#7c7c7c;color:#fff;}

.setup{position:fixed;bottom:20px;right:20px;display:flex;flex-direction: column;align-items: flex-end;font-family: 'Varela Round', sans-serif;}
.setup>div{display:flex;margin-top:1em;align-items: center;}
.setup label{color:#2c3e50;}
.setup button{margin-left:5px;}