@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap);
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,menu,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}*[hidden]{display:none}body{line-height:1}menu,ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}body{padding:50px;min-height:100vh;font-family:"Roboto",sans-serif;font-size:16px;color:#282828;background:url(img/2.b6f55ffdbea80805a0f2.png) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}header{margin-bottom:100px;display:flex;justify-content:center}.container{position:relative}.wrapper{display:flex;justify-content:center;align-items:flex-start}.wrapper .gameboard{position:relative;margin-bottom:100px}.wrapper .gameboard::before{content:"Friendly waters";position:absolute;bottom:-70px;left:-9px;background-color:green;padding:15px;width:489px;font-size:2rem;font-weight:300;color:#fff;text-align:center;background-color:rgba(0,0,0,.75)}.wrapper .gameboard:last-child{margin-left:100px}.wrapper .gameboard:last-child::before{content:"Enemy waters"}.gameboard{padding:35px;display:flex;flex-wrap:wrap;width:518px;gap:3px;border:9px solid #fff;background-color:rgba(0,0,0,.5)}.gameboard div{position:relative;width:40px;height:40px;border:2px solid #fff}.gameboard div.missed::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:18px;height:18px;border-radius:50%;background-color:#fff}.gameboard div.hit::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:18px;height:18px;border-radius:50%;background-color:#f83535}.start-screen{display:flex;justify-content:center;min-width:100%;opacity:1;transition:all 1s}.start-screen.hide{position:absolute;left:0;top:0;opacity:0}.start-screen.remove{display:none}.hover{background-color:#f7689f}.nodrop{cursor:no-drop}.disable{background-color:#4a7078}.save{background-color:#f7689f}.menu{display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:all .5s}.menu.active{opacity:1;visibility:visible}.ship{background-color:#f7689f}.ship.hit{background:linear-gradient(-45deg, #F7689F, #e73c7e, #23a6d5, #23d5ab);background-size:400% 400%;animation:gradient 1s ease infinite}.main-menu{display:flex;flex-direction:column;align-items:center;order:2;padding:70px 15px;margin-left:100px;width:518px;min-height:290px;background-color:rgba(0,0,0,.6)}.main-menu .heading{margin-bottom:55px;text-align:center;font-size:1.5rem;font-weight:500;color:#fff}.main-menu button{margin-bottom:40px;cursor:pointer}button{padding:12px 17px;font-size:1.4rem;color:#fff;border:1px solid #fff;background-color:unset}.toggle-menu{display:flex;flex-direction:column}.toggle-menu.hide{display:none}.overlay{position:fixed;top:0;left:0;z-index:3;width:100%;height:100%;background-color:rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}.overlay.active{opacity:1;visibility:visible}.modal{position:fixed;z-index:5;top:10%;left:50%;transform:translate(-50%, 0);padding:45px 115px;text-align:center;background-color:#eee;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}.modal.active{opacity:1;visibility:visible}.modal .text{margin-bottom:25px;font-weight:700;font-size:1.9rem}.modal button{color:#000;border-color:#000;cursor:pointer}@media screen and (max-width: 1440px){header{margin-bottom:75px}.logo{width:400px}button{padding:10px 14px;font-size:1.1rem}.wrapper .gameboard::before{bottom:-58px;width:371px;font-size:1.3rem}.wrapper .gameboard:last-child{margin-left:30px}.main-menu{margin-left:30px;padding:45px 15px;width:398px}.main-menu .heading{margin-bottom:40px;font-size:1.2rem}.main-menu button{margin-bottom:30px}.gameboard{padding:25px;width:398px;border:7px solid #fff}.gameboard div{width:30px;height:30px}.gameboard div.hit::before,.gameboard div.missed::before{width:11px;height:11px}.modal{top:5%;padding:35px 80px}.modal .text{font-size:1.5rem}}@media screen and (max-width: 940px){body{padding:30px 15px}header{margin-bottom:40px}.start-screen,.wrapper{flex-direction:column;align-items:center}.wrapper .gameboard:last-child{margin-left:0}.gameboard{margin-bottom:40px}.main-menu{margin-left:0}.main-menu button{margin-bottom:15px}.modal{padding:30px 50px}}@media screen and (max-width: 470px){.logo{width:280px}.gameboard{padding:15px;width:286px;gap:1px;border:2px solid #fff}.gameboard div{width:24px;height:24px}.main-menu{width:286px}.wrapper .gameboard::before{bottom:-48px;left:-3px;width:258px;font-size:1rem}.modal{padding:30px;min-width:230px}.modal .text{font-size:1.2rem}}