@import url(https://fonts.bunny.net/css?family=actor:400|arbutus:400);
body{background-color:#1a1a1f;color:#9ee7b3;height:100vh;overflow:hidden;padding:3rem;width:100vw}body,body .container{align-items:center;display:flex;flex-direction:column;justify-content:center;max-height:100%;max-width:100%}body .container{gap:2rem}*,:after,:before{box-sizing:border-box;margin:0;padding:0}#popup-text,h1{font-family:Arbutus,display,sans-serif;font-size:clamp(3.43rem,4.28vi + 2.36rem,5.79rem)}@media(max-width:37.5em){#popup-text,h1{font-size:clamp(2.75rem,2.9vi + 2.02rem,4.34rem)}}h2,h3{font-family:Actor,sans-serif}h2{font-size:clamp(1.41rem,.78vi + 1.21rem,1.83rem)}h3{font-size:clamp(1.13rem,.45vi + 1.01rem,1.38rem)}[id$=board]{aspect-ratio:1/1;background-color:#7bdd97;border:1px solid #7bdd97;border-radius:1rem;box-shadow:0 20px 30px -10px #000;display:grid;gap:1px;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);overflow:hidden}[id$=board] button,[id$=board] div{background-color:#1a1a1f;border:none;transition:background-color .3s ease-in-out}[id$=board] button.hit,[id$=board] div.hit{background-color:gray;cursor:auto}[id$=board] button.hit.ship,[id$=board] div.hit.ship{background-color:red}[id$=board] button:not([disabled]){cursor:pointer;overflow:hidden;position:relative}[id$=board] button:not([disabled]):before{transition:all .75s ease-in-out;transition-delay:.25s}[id$=board] button:not([disabled]):after,[id$=board] button:not([disabled]):before{background-color:#7bdd97;border-radius:100%;content:"";height:150%;left:-25%;opacity:0;position:absolute;top:-25%;transform:scale(0);transform-origin:center;width:150%}[id$=board] button:not([disabled]):after{transition:all .75s ease-in-out}[id$=board] button:not([disabled]):hover:after,[id$=board] button:not([disabled]):hover:before{transform:scale(1)}[id$=board] button:not([disabled]):hover:before{opacity:.8}[id$=board] button:not([disabled]):hover:after{opacity:.2}[id$=board] button:not([disabled]):active:after,[id$=board] button:not([disabled]):active:before{transform:scale(0);transition-delay:0s;transition:all .15s ease-in-out}[id$=board] button:not([disabled]):active:after,[id$=board] button:not([disabled]):active:before{opacity:0}#enemy-board{max-width:60vh;width:max(20rem,60vw)}#your-board{height:auto;width:15vw}#your-board .ship:not(.hit){background-color:#483d8b}#create-game-container #your-board{max-width:60vh;width:max(20rem,60vw)}#create-game-container #buttons{display:flex;gap:1rem}#create-game-container #buttons button{background-color:#7bdd97;border:none;border-radius:1rem;cursor:pointer;font-size:clamp(.9rem,.24vi + .84rem,1.03rem);padding:1rem 2rem;transition:all .3s ease-in-out}#create-game-container #buttons button:hover{background-color:#90ee90;transform:scale(1.05)}#gameover-container button{background-color:#7bdd97;border:none;border-radius:1rem;cursor:pointer;font-size:clamp(.9rem,.24vi + .84rem,1.03rem);padding:1rem 2rem;transition:all .3s ease-in-out}#gameover-container button:hover{background-color:#90ee90;transform:scale(1.05)}#gameplay-container #your-status{align-items:center;bottom:3rem;display:flex;flex-direction:column;gap:1rem;justify-content:center;position:fixed;right:3rem}@media(max-width:62.5em){#gameplay-container #your-status{display:none;position:static}#gameplay-container #your-status h3{display:none}}#gameplay-container #popup-text{align-items:center;background-color:rgba(0,0,0,.7);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;visibility:hidden;width:100%;z-index:100}#gameplay-container #popup-text.show{visibility:visible}