@import"https://fonts.googleapis.com/css?family=Roboto:100";.headerDiv{width:100%;height:11rem;position:relative;overflow:hidden}.background{width:100%;height:100%;background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/662025/abstract.jpg);background-size:cover}.outer-scratch,.inner-scratch{height:inherit}.outer-scratch:after,.inner-scratch:after{content:"";width:120%;height:100%;position:absolute;top:0;left:0;padding-left:100px;opacity:.08;background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/662025/scratch.png) repeat center center;-webkit-animation:scratch .45s steps(1) infinite;animation:scratch .45s steps(1) infinite}.inner-scratch:after{left:30%;-webkit-animation:inner-scratch 2s infinite;animation:inner-scratch 2s infinite}.grain:after{content:"";width:110%;height:110%;position:absolute;top:-5%;left:-5%;opacity:.11;background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/662025/grain.jpg) repeat center center;-webkit-animation:grain .5s steps(1) infinite;animation:grain .5s steps(1) infinite}h1{position:absolute;top:0;left:0;width:100%;font-family:Roboto,sans-serif;font-weight:100;font-size:3em;text-align:center;color:#fff;-webkit-animation:3s fade;animation:3s fade}h1 span{display:inline-block;position:relative;padding:.2em 1em}h1 span:before{display:block;content:"";width:110%;margin-left:-5%;margin-bottom:5%;border-top:1px solid #fff;-webkit-animation:2.5s draw;animation:2.5s draw}h1 span:after{display:block;content:"";position:absolute;bottom:0;right:0;width:100%;border-bottom:1px solid #fff;-webkit-animation:2.5s draw-bottom;animation:2.5s draw-bottom}@keyframes grain{0%,to{transform:translate(0,0,0)}10%{transform:translate(-1%,-1%)}20%{transform:translate(1%,1%)}30%{transform:translate(-2%,-2%)}40%{transform:translate(3%,3%)}50%{transform:translate(-3%,-3%)}60%{transform:translate(4%,4%)}70%{transform:translate(-4%,-4%)}80%{transform:translate(2%,2%)}90%{transform:translate(-3%,-3%)}}@keyframes scratch{0%,to{transform:translate(0);opacity:.075}10%{transform:translate(-1%)}20%{transform:translate(1%)}30%{transform:translate(-2%);opacity:.09}40%{transform:translate(3%)}50%{transform:translate(-3%);opacity:.05}60%{transform:translate(8%)}70%{transform:translate(-3%)}80%{transform:translate(10%);opacity:.02}90%{transform:translate(-2%)}}@keyframes inner-scratch{0%{transform:translate(0);opacity:.08}10%{transform:translate(-1%)}20%{transform:translate(1%)}30%{transform:translate(-2%)}40%{transform:translate(3%)}50%{transform:translate(-3%);opacity:.06}60%{transform:translate(8%)}70%{transform:translate(-3%)}80%{transform:translate(10%);opacity:.03}90%{transform:translate(20%)}to{transform:translate(30%)}}@keyframes draw{0%{width:0%}to{width:110%}}@keyframes draw-bottom{0%{width:0%}to{width:100%}}@keyframes fade{0%{opacity:0}to{opacity:1}}.sudokuBackground{width:100%;display:flex;background-color:#fcffd6;padding:2rem 0}.sudokuFrame{width:450px;height:360px;margin:0 auto;background:linear-gradient(145deg,#ffffe5,#e3e6c1);box-shadow:5px 5px 10px #656656;border:2px solid black;overflow:hidden}.sudokuFrame h2{font-size:2rem;text-align:center;margin:0}.sudokuFrame .sudokuNumberRow{display:grid;grid-template-columns:repeat(9,1fr);height:40px}.sudokuFrame .sudokuNumber{text-align:center;width:48px;padding:0;background:linear-gradient(145deg,#ffffe5,#e3e6c1);border:none;font-size:24px;border-right:2px solid #d9d9d9;border-bottom:2px solid #d9d9d9}.sudokuFrame .c2,.sudokuFrame .c5{border-right:2px solid black}.sudokuFrame .r2,.sudokuFrame .r5{border-bottom:2px solid black}.buttonSet{width:30%}.buttonSet div{width:60%}.buttonSet div:hover{cursor:pointer;background-position:right center}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;place-items:center;min-width:320px;min-height:100vh;background-color:#fcffd6}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}