:root{--primary-color: #ee2b47;--secondary-color: hsl(222.2, 84%, 4.9%)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--secondary-color);font-family:Arial,Helvetica,sans-serif;color:#f5f5f5;height:100vh}.home-link{color:#00f;text-decoration:none;font-size:20px;font-weight:700}.home-link:hover{color:#00008b}h1{text-align:center;grid-area:title}.centered-table{margin-left:auto;margin-right:auto;border-collapse:collapse;width:50%}.centered-table th,.centered-table td{padding:8px;text-align:center;vertical-align:middle}.centered-table th{padding-top:12px;padding-bottom:12px;text-align:center;background-color:var(--primary-color)}.scrollable-div::-webkit-scrollbar{width:10px}.scrollable-div::-webkit-scrollbar-thumb{background-color:var(--primary-color)}.scrollable-div::-webkit-scrollbar-track{background:#d3d3d3}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.btn{background-color:var(--primary-color);opacity:1;border:none;color:#fff;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:4px 2px;cursor:pointer;border-radius:4px;transition:opacity .3s}.btn:disabled{background-color:#ccc;cursor:not-allowed}.btn:not(:disabled):hover{opacity:.8}.form{width:100%;max-width:400px;padding:15px;margin:0 auto}.form-group{margin-bottom:15px}.form-control{display:block;width:100%;padding:10px;font-size:14px;line-height:1.5;color:var(--primary-color);background-color:var(--secondary-color);background-clip:padding-box;border:1px solid #ced4da;border-color:var(--primary-color);border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control:focus{color:var(--primary-color);background-color:var(--secondary-color);border-color:var(--primary-color);outline:none;box-shadow:none}input[type=range]{-webkit-appearance:none;width:100%;background-color:var(--secondary-color);border:none}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:8.4px;cursor:pointer;box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d;background:var(--secondary-color);border-radius:1.3px;border:.2px solid var(--primary-color)}input[type=range]::-webkit-slider-thumb{box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d;border:1px solid var(--primary-color);height:36px;width:16px;border-radius:3px;background:var(--primary-color);cursor:pointer;-webkit-appearance:none;margin-top:-14px}input[type=range]:focus::-webkit-slider-runnable-track{background:var(--secondary-color)}input[type=checkbox]{appearance:none;background-color:#f2f2f2;border:2px solid #cdd1da;border-radius:4px;display:inline-block;position:relative;height:20px;width:20px;transition:all .5s ease}input[type=checkbox]:checked{background-color:var(--primary-color);border-color:var(--primary-color)}input[type=checkbox]:checked:after{content:"";display:block;position:absolute;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg);top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg)}.background-image{position:absolute;inset:0;z-index:-1;background-image:url(/assets/background.png);background-repeat:no-repeat;background-position:center center;background-size:cover;opacity:.2;filter:blur(5px)}.icon{font-size:24px;color:var(--primary-color)}.styled-table{border-collapse:collapse;text-align:center;width:60%;margin:20px auto}.styled-table th,.styled-table td{padding:10px}.styled-table thead{background-color:#ee2b47;font-weight:700}.app{display:grid;grid-template-areas:". title ." ". game controls";grid-template-columns:repeat(3,1fr)}.controls{grid-area:controls}.board{border:2px solid black;-webkit-user-select:none;user-select:none;margin:auto;grid-area:game}.row{display:flex}.cell{width:30px;aspect-ratio:1;border:1px solid rgba(200,200,200,.349)}.cell.Empty{background-color:#0000}.cell.I{background:linear-gradient(to bottom right,#50e3e6,#358f91);border:4px solid rgb(53,143,145);box-shadow:inset -4px -4px #ffffff4d,inset 4px 4px #0003,0 4px 8px #0000004d}.cell.J{background:linear-gradient(to bottom right,#245fdf,#153988);border:4px solid rgb(21,57,136);box-shadow:inset -4px -4px #ffffff4d,inset 4px 4px #0003,0 4px 8px #0000004d}.cell.L{background:linear-gradient(to bottom right,#dfad24,#967418);border:4px solid rgb(150,116,24);box-shadow:inset -4px -4px #ffffff4d,inset 4px 4px #0003,0 4px 8px #0000004d}.cell.O{background:linear-gradient(to bottom right,#dfd924,#8a8616);border:4px solid rgb(138,134,22);box-shadow:inset -4px -4px #ffffff4d,inset 4px 4px #0003,0 4px 8px #0000004d}.cell.S{background:linear-gradient(to bottom right,#30d338,#1a751e);border:4px solid rgb(26,117,30);box-shadow:inset -4px -4px #ffffff4d,inset 4px 4px #0003,0 4px 8px #0000004d}.cell.T{background:linear-gradient(to bottom right,#843dc6,#47216b);border:4px solid rgb(71,33,107);box-shadow:inset -4px -4px #ffffff4d,inset 4px 4px #0003,0 4px 8px #0000004d}.cell.Z{background:linear-gradient(to bottom right,#e34e4e,#7e2b2b);border:4px solid rgb(126,43,43);box-shadow:inset -4px -4px #ffffff4d,inset 4px 4px #0003,0 4px 8px #0000004d}.cell.penalty{background:linear-gradient(to bottom right,#787878,#505050);border:4px solid rgb(60,60,60);box-shadow:inset -4px -4px #ffffff26,inset 4px 4px #0003,0 4px 8px #0000004d}