* {
 margin: 0;
 padding: 0;
 -webkit-box-sizing: border-box;
         box-sizing: border-box;
}

body {
 background-color: lightskyblue;
}

:root {
 font-size: 15px;
 letter-spacing: 1px;
}

.clearfix::after {
 content: '';
 display: block;
 clear: both;
}

.ships__container {
 position: relative;
 width: 90%;
 max-width: 1200px;
 margin: 0 auto;
 overflow: hidden;
}

.ships__picture {
 width: 120px;
}

.ships__picture img {
 width: 100%;
}

.ships__babyShark {
 position: absolute;
 right: 2%;
 top: 75%;
}

.ships__drunkFish {
 position: absolute;
 left: 2%;
 top: 65%;
}

.ships__island {
 display: none;
}

.ships__boom {
 display: none;
}

.ships__title,
.ships__titleSmall,
.ships__ownerInfo {
 margin: 20px auto;
 text-align: center;
}

.ships__title {
 background-color: #fff;
 width: 60%;
 border-radius: 20px;
}

.ships__areas {
 width: 100%;
 max-width: 1005px;
 margin: 0 auto;
}

.ships__gameFields {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 margin: 0 auto;
 width: 100%;
 max-width: 500px;
}

.ships__area {
 display: grid;
 grid-template-columns: repeat(5, 20%);
 grid-template-rows: repeat(5, 60px);
 width: 90%;
 margin: 0 auto;
}

.ships__field {
 position: relative;
 border: 1px solid #fff;
 cursor: pointer;
}

.ships__field--black {
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 100%;
 background-color: rgba(0, 0, 0, 1);
}

.ships__actualInfo {
 margin: 30px auto 0 auto;
 width: 80%;
 -webkit-box-shadow: 0px 0px 5px 6px black, 0px 0px 0px 10px #FFED00, 0px 0px 5px 16px black;
         box-shadow: 0px 0px 5px 6px black, 0px 0px 0px 10px #FFED00, 0px 0px 5px 16px black;
 border-radius: 10px;
 text-align: center;
}

.ships__statistics {
 margin: 30px auto;
 max-width: 1004px;
}

.ships__stats {
 margin: 20px auto;
 padding: 30px;
 width: 100%;
 max-width: 500px;
}

.ships__stats span {
 font-weight: bold;
}

.ships__labelContainer {
 margin: 0 auto;
 width: 300px;
}

#labelNumber {
 display: block;
 margin: 10px auto;
 font-weight: bold;
}

#shipsNumber {
 width: 100px;
 height: 30px;
 border-radius: 10px;
 padding: 5px;
}

.ships__btnContainer {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 margin: 30px auto;
}

.ships__resetBtn {
 margin-left: 30px;
}

.ships__resetBtn,
.ships__startBtn {
 padding: 5px;
 border: 2px solid #000;
 border-radius: 10px;
 font-size: 1rem;
 font-weight: bold;
 cursor: pointer;
}

.ships__resetBtn:hover,
.ships__startBtn:hover {
 color: #fff;
 background-color: #000;
 border: 2px solid #fff;
}

.ships__field {
 background-size: 70% 100%;
 background-position: center;
 background-repeat: no-repeat;
 -webkit-transition: 0.4s;
 -o-transition: 0.4s;
 transition: 0.4s;
}

@media(min-width:1000px) {
 body {
  -webkit-transform: scale(0.9);
      -ms-transform: scale(0.9);
          transform: scale(0.9);
 }

 .ships__gameFields,
 .ships__stats {
  float: left;
 }

 .ships__drunkFish {
  position: absolute;
  left: 2%;
  top: 62%;
 }

 .ships__island {
  position: absolute;
  left: 2%;
  top: 89%;
 }

 .ships__actualInfo {
  margin-top: 50px;
  width: 40%;
  line-height: 200%;
 }
}

@media(min-width:1030px) {
 .ships__boom {
  display: block;
  position: absolute;
  left: 70%;
  top: 30%;
  -webkit-transform: rotate(35deg) scale(4);
      -ms-transform: rotate(35deg) scale(4);
          transform: rotate(35deg) scale(4);
 }

 .ships__container {
  margin-top: -50px;
 }
}

@media(min-width:1116px) {
 .ships__drunkFish {
  left: 12%;
  top: 57%;
 }

 .ships__island {
  display: block;
  left: 9%;
  top: 81%;
 }

 .ships__boom {
  left: 89%;
  top: 10%;
  -webkit-transform: rotate(35deg) scale(1);
      -ms-transform: rotate(35deg) scale(1);
          transform: rotate(35deg) scale(1);
 }

 .ships__statistics {
  margin: 10px auto;
 }

}