#board{display:grid;grid-template-columns:repeat(3,20vmin);grid-template-rows:repeat(3,20vmin);grid-gap:1vmin;margin:2vmin 0}.cell{display:flex;justify-content:center;align-items:center;font-size:10vmin;font-weight:700;color:var(--accent-color);background:var(--primary-gradient);border:var(--default-primary-border);border-radius:var(--default-border-radius);outline:none;box-shadow:var(--box-shadow)}.cell:active,.cell:hover,.cell.winner{cursor:pointer;color:var(--content-background-color);background:var(--primary-highlight-gradient)}.cell-content{overflow:hidden;width:0;height:0;transition:width var(--selection-animation-duration),height var(--selection-animation-duration)}.cell-content.populated{width:12vmin;height:12vmin}#modal-overlay{display:none;justify-content:center;position:absolute;left:0;right:0;top:0;bottom:0;background:var(--modal-overlay-color)}#game-result-modal{display:grid;grid-row-gap:76vmin;--modal-items-border-radius: 1vmin}#result-container{display:flex;align-items:flex-end}#modal-overlay.modal-open{display:grid}#winner-container{margin-bottom:4vmin;width:30vmin;height:8vmin;font-size:var(--main-title-font-size);font-weight:700;color:var(--primary-color);background:var(--accent-color);border:var(--default-accent-border);box-shadow:var(--box-shadow);border-radius:var(--modal-items-border-radius);display:flex;justify-content:center;align-items:center}#new-game-container{display:flex;justify-content:center;align-items:flex-start;padding-top:2.5vmin}#new-game-container>button{font-size:3vmin;padding:1.5vmin;color:var(--accent-color);background:var(--primary-gradient);border:var(--default-primary-border);border-radius:var(--modal-items-border-radius);outline:none;box-shadow:var(--box-shadow)}#new-game-container>button:hover,#new-game-container>button:active{color:var(--content-background-color);cursor:pointer;background:var(--primary-highlight-gradient)}#game{background:var(--content-background-color);border-radius:var(--default-border-radius);padding:3vmin;box-shadow:var(--box-shadow)}h1{color:var(--primary-color);text-align:center;margin-bottom:2vmin;font-size:var(--main-title-font-size)}:root{--background-light-color: #57ebd7;--background-dark-color: #24a88b;--content-background-color: #fff6be;--primary-color: #007340;--primary-brighter: #00a057;--primary-saturated: #05a058;--primary-saturated-brighter: #07cf72;--accent-color: #FD0;--accent-darker: #a79000;--box-shadow-color: rgba(0,0,0,.75);--modal-overlay-color: rgba(0, 0, 0, .3);--main-background-gradient: linear-gradient(to right, var(--background-light-color) 0%, var(--background-dark-color) 100%);--primary-gradient: linear-gradient(to right, var(--primary-color) 0%,var(--primary-saturated) 100%);--primary-highlight-gradient: linear-gradient(to right, var(--primary-brighter) 0%,var(--primary-saturated-brighter) 100%);--box-shadow: 0 1vmin 2vmin -1vmin rgba(0,0,0,.75);--default-border-radius: 2vmin;--default-primary-border: .25vmin solid var(--primary-color);--default-accent-border: .25vmin solid var(--accent-darker);--main-title-font-size: 4vmin;--selection-animation-duration: .35s}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{display:grid;place-items:center center;background:var(--main-background-gradient);font-family:Arial,Helvetica,sans-serif}