main.css

:root{--board-columns-count: 10;--board-rows-count: 15}body{min-height:100vh;background-color:#0e1e0b;color:#fff;font-family:"Segoe UI",sans-serif}.container{margin:auto;width:90%;text-align:center}img{display:block;max-width:100%}*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6{margin:0}.header{text-align:center;padding-top:2rem;line-height:1.2}.header__title{margin:0}.header__subtitle{margin:0}.board{width:100%;display:inline-grid;place-content:center;grid-template-columns:repeat(var(--board-columns-count), min(calc(90vw / var(--board-columns-count)), 3rem));grid-template-rows:repeat(var(--board-rows-count), min(calc(90vw / var(--board-columns-count)), 3rem));font-size:min(calc(90vw / var(--board-columns-count)), 3rem);filter:drop-shadow(10px 10px 0px rgba(0, 0, 0, 0.15));margin:2rem 0}.board .board__square{all:unset;box-sizing:border-box;user-select:none;transition:background-color 200ms linear;display:grid;place-items:center;font-size:60%;font-weight:bold}.board .board__square[data-type=bomb]{background-color:#0d0d0d}.board .board__square[data-type=grass],.board .board__square[data-type=bomb][data-status=hidden],.board .board__square[data-type=bomb][data-status=marked]{background-color:#449438}.board .board__square[data-type=grass][data-status=discovered]{background-color:#ebd982}.board .board__square.light{filter:brightness(110%)}.board .board__square:hover{filter:brightness(90%);cursor:pointer}.board .board__square[data-status=discovered]{pointer-events:none}.board .board__square>img{max-width:80%}.you-lose{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:2.7rem;font-weight:bold}.custom{padding:2rem 0}.custom .container{display:flex;flex-direction:column;align-items:center}.custom .container>*{width:100%;max-width:500px}.custom__form{padding:1rem 0;display:flex;flex-direction:column;align-items:center}.custom__form>label,.custom__form>input,.custom__form>button{width:100%}.custom__form>input,.custom__form>button{border:0;padding:.5em 1em}.custom__form>input{margin-bottom:1em}.custom__form>button{margin-top:1em;background-color:#449438;color:#fff;text-transform:uppercase;font-size:1.2rem;cursor:pointer}.custom__presets{display:flex;width:min(500px, 100%);margin:auto;padding:2em 0}.custom__presets>*{flex:2}.custom__presets>*+*{margin-left:2px}.custom__presets a{display:inline-block;padding:.5em 1em;text-transform:uppercase;text-decoration:none;color:#fff;background-color:#449438}.modal{display:none;opacity:0%;transition:opacity 200ms linear;position:fixed;width:70%;top:50%;left:50%;transform:translate(-50%, -50%);background-color:rgba(255,255,255,.7);color:#1c1c1c;padding:2rem 3rem}.modal__title{font-size:2.2rem;font-weight:600}.modal__subtitle{font-size:1.5rem;font-weight:300}.modal a{display:inline-block;font-size:1.3rem;padding:.5em 1em;background-color:#449438;color:#fff;text-decoration:none;text-transform:uppercase}/*# sourceMappingURL=main.css.map */