html,body{padding:0;margin:0;background:black;max-width:100vw;max-height:100vh;display:grid;font-family:arial,sans-serif}.hidden{visibility:hidden}.visible{visibility:inherit}#main-menu{z-index:10;position:absolute;background:#191919;color:#cecece;justify-self:center;align-self:center;width:100%;height:100%;margin:0 auto;display:grid;grid-template-areas:"header" "main" "footer";grid-template-rows:100px auto 100px;grid-template-columns:auto;gap:10px}#main-menu img{position:absolute;width:100%;height:100%;object-fit:cover;filter:brightness(.5);z-index:0}#main-menu .header{z-index:10;grid-area:header;display:grid;grid-template-rows:auto auto;grid-auto-flow:column}#main-menu .header div{display:flex;color:#fff;filter:drop-shadow();align-items:center;justify-content:space-between;width:100px;margin-left:22px}#main-menu main{width:100%;z-index:10;display:flex;grid-area:main;align-items:center;justify-content:center;flex-flow:column}#main-menu footer{z-index:10;grid-area:footer;display:flex;flex-direction:column;justify-content:flex-end;margin-left:22px;margin-bottom:22px}button{display:inline-block;padding:10px 20px;font-size:100%;font-weight:600;margin-top:20px;height:60px;width:100%;max-width:200px;background-color:orange;color:#000;border:4px solid black;border-radius:8px;outline:none;cursor:pointer;transition:background-color .3s,border-color .3s,box-shadow .3s;position:relative;overflow:hidden}button.disabled{background-color:gray}button:before{content:"";position:absolute;top:-1%;left:0;width:100%;height:4%;background-color:#fff;opacity:.5;transition:opacity .3s}button:after{content:"";position:absolute;bottom:-1%;left:0;width:100%;height:4%;background-color:#00000080;transition:opacity .3s}button:hover:before{opacity:.7}button:hover:after{opacity:.7}button:active{background-color:#ff8c00;border-color:#000;color:#000;font-weight:900;box-shadow:0 2px 4px #00000080}.switch{position:relative;display:inline-block;width:48px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;width:100%;height:100%;background-color:#000;border-radius:24px;transition:background-color .3s}.slider:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;border-radius:50%;transition:transform .3s}input:checked+.slider{background-color:orange}input:checked+.slider:before{transform:translate(24px)}.slider.round{border-radius:24px}.slider.round:before{border-radius:50%}.modal{display:none;position:fixed;z-index:100;align-items:center;flex-direction:column;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:#0006}.modal-hidden{display:none}.modal-visible{display:flex;position:fixed;align-items:center;flex-direction:column}.modal-content{position:relative;display:flex;flex-direction:column;align-items:center;background-color:#2e2e2eab;border:4px solid darkorange;border-radius:4px;color:#e2e2e2;width:80%;height:60%;overflow-y:auto;overflow-x:hidden}.modal-content h2{text-align:center}.modal-content div{display:flex;flex-flow:row;width:100%;align-items:center;justify-content:space-between;padding:0 20px}#close-button-container{position:relative;height:100px;width:80%}#close-button{z-index:101;float:right;font-size:28px;font-weight:700;width:60px;height:60px;right:-25px;bottom:-25px;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;position:absolute}#close-button:after,#close-button:before{display:none}.my-score{font-weight:bolder;color:#ff8c00}.game-over span{margin-top:40px}