@import url(https://fonts.googleapis.com/css?family=Open+Sans);*{box-sizing:border-box;margin:0}body{font:15px Open Sans,sans-serif;padding:2rem}header{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-bottom:50px}h1{position:relative;top:-10px}#status{align-items:center;background:rgba(85,85,255,.119);border-radius:10px;display:flex;height:2rem;min-width:480px;padding:.5rem}button{background:#55f4;border:1px solid #000;border-radius:5px;cursor:pointer;padding:5px 10px}#play-area{justify-content:space-evenly;margin-bottom:50px}#play-area,.btn-group{align-items:center;display:flex}.btn-group{justify-content:center;margin:auto}.btn-group button{font-size:1rem;margin:0 10px}button:hover{background:#44fa}footer{align-items:center;display:flex;justify-content:center;margin-top:6rem}footer a{color:#55f;text-decoration:none}footer a:hover{color:#44fa}footer>*{margin:0 10px}svg{display:inline-block;height:1.4rem;width:1.4rem}svg:hover{animation:wee 1s linear infinite}@keyframes wee{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}to{transform:rotate(1turn)}}.overlay-wrapper{align-items:center;background:rgb(0,0,0,.5);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw}.hidden{display:none}#input-board{margin:auto}.overlay{background:#eee;border-radius:10px;padding:1rem;width:480px}.ship-parameters{margin:.5rem 0 1.5rem}:root{--sq-size:30px}.board{background:#55f4;cursor:pointer;display:grid;grid:repeat(10,var(--sq-size)) /repeat(10,var(--sq-size));height:300px;width:300px}.board,.square{border:1px solid #000}.square:hover:not(.miss,.hit){background:#44fa}.ship{background:#555;border:none}.hit,.miss{background-position:50%;background-repeat:no-repeat;background-size:cover}.hit{background-image:url(img/x-a3c87395fa8d1da53cb9.png)}.miss{background-image:url(img/o-bec07344860c681ae081.png)}.board-wrapper>h3{font-size:1.2em;font-weight:700;margin:0 0 .5em;text-align:center}