* {
  box-sizing: border-box;
  font-family: 'Black Ops One';
  margin:0;
  padding:0;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}
    
#frame-page {
  height: calc(var(--vh, 1vh) * 100);
  border: lightgray calc(var(--vh, 1vh) * 1) solid;
  background: lightgray;
}

#container-game {
  height: calc(var(--vh, 1vh) * 98);
  margin: 0 auto;
  padding: calc(var(--vh, 1vh) * 1); 
  width: 100%;
}

#container-grid {
  display: grid;  
  height: 43.47169811vw;
  width: 100%;
  grid-template-columns: 1fr 	1fr 	1fr 	1fr 	1fr 	1fr 	1fr 	1fr 	1fr 	1fr 	1fr 	0.25fr 	4fr 	0.25fr 	1fr 	1fr 	1fr 	1fr 	1fr 	1fr 	1fr 	1fr 	1fr 	1fr 	1fr;
  grid-template-rows: 1fr 	1fr 	1fr 	1fr 	1fr 	1fr 	1fr 	1fr 	1fr 	1fr 	1fr 	1fr;
}


.title-sonar, .sonar {
  border: lightgreen 2px ridge;
}

.title-sea, .sea {
  border: lightskyblue 2px ridge;
}
.title-sonar, .title-sea {
  align-content: center;  
  background: darkgreen;
  display: grid;
  font-size: 1.5vw;
  justify-content: center;
}

.title-sea {  
  background: navy;
  color: white;
}

.row-t {
  background: grey;
  border-bottom: lightgrey 10px solid;
  padding-top: 6px;
  position: relative;
  text-align: center;
  grid-area: 1 / 1 / 1 / 26;
}

.row-t img {
  height: 50%;
  position: relative;
  width: 50%;
}

.spacer-l {
  background: lightgrey;
  grid-area: 2 / 12 / 13 / 12;
}

.spacer-r {
  background: lightgrey;
  grid-area: 2 / 14 / 13 / 14;
}

.tray-red {
  background: white;
  border-left: navy 1px solid;
  border-right: navy 1px solid;
  border-top: navy 1px solid;
  box-shadow: -6px -6px darkgrey inset;
  grid-area: 2 / 13 / 4 / 14;
  overflow: hidden;
  padding: 8% 5%;
}

.tray-white {
  background: red;
  border: navy 1px solid;
  box-shadow: -6px -6px darkgrey inset;
  grid-area: 4 / 13 / 8 / 14;
  overflow: hidden;
  padding: 12% 5%;
}

.tray-ships {
  background: lightskyblue;
  border: navy 1px solid;
  box-shadow: -8px -8px gray inset;
  font-size: .75vw;
  padding: 10% 0;
  position: relative;
  text-align: center;
  grid-area: 8 / 13 / 13 / 14;
}

.tray-ships .carrier {
  height: 15%;
  width: 90%;
  position: relative;
}

.tray-ships .battleship {
  height: 15%;
  width: 72%;
  position: relative;  
}

.tray-ships .submarine, .tray-ships .cruiser {
  height: 15%;
  width: 54%;
  position: relative;  
}

.tray-ships .patrolboat {
  height: 15%;
  width: 32%;
  position: relative;  
}

.label-submarine {
  display: inline-block;
  width: 56%;
}

.label-patrolboat {
  display: inline-block;
  text-align: left;
  width: 32%;
}
.sea img {
  display: inline-block;
  width: 100%;
  position: absolute;
  z-index: 1;
}

.sea .carrier {height: 514%;}
.sea .battleship {height: 410%;}
.sea .submarine, .sea .cruiser {height: 306%;}
.sea .patrolboat {height: 202%;}

.sonar {
  background-attachment:fixed;
  background-image: url(resources/objects/backgroundSonar.jpg);
  background-size: 37vw 37vw;
  background-position: 7.42% 10vw;
  background-repeat: no-repeat;
  align-content: center;
  justify-content: center;
  position: relative;
}

.sonar-dot {
  border-radius: 50%;
  background: darkgreen;
  box-shadow: -2px -2px	#003d00 inset;
  height: 30%;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30%;
}

.sea {
  background-attachment:fixed;
  background-image: url(resources/objects/backgroundSea.jpg);
  background-size: 37vw 37vw;
  background-position: 98.5% 10vw;
  background-repeat: no-repeat;
  align-content: center;
  font-size: 0;
  justify-content: center;
  position: relative;
}

.sea-dot {
  border-radius: 50%;
  box-shadow: 2px -2px gray inset;
  background: lightgray;
  font-size: 0;
  height: 30%;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30%;
  z-index: 4;
}

.peg-red {
  background: red;
  border-radius: 5px 5px 0 0;
  border-top: darkred 5px solid;
  border-right: darkred 2px solid;
  float: left;
  height: 66%;
  margin: 0 1px 50px;
  position: relative;
  width: 8%;
  z-index: 5;
}

.peg-white {
  background: white;
  border-radius: 5px 5px 0 0;
  border-top: lightgrey 5px solid;
  border-right: lightgrey 2px solid;
  float: left;
  height: 30%;
  margin: 0 1px 55px;
  position: relative;
  width: 8%;
  z-index: 5;
}

.peg-red::before, .peg-white::before {
  content:'';
  border-left: red 11px solid;
  border-top: red 36px solid;
  left: 50%;
  position: absolute;
  top: 70%;
  transform: translate(-45%, 0%);  
}

.peg-white::before {
  border-left: white 11px solid;
  border-top: white 36px solid;
}

.sonar .peg-red, .sea .peg-red, .sonar .peg-white, .sea .peg-white {
  border-radius: 50%;
  border-top: none;
  border-right: none;
  box-shadow: 6px 6px darkred;
  height: 40%;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-75%, -75%);
  width: 40%;
  }

.sonar .peg-red::before, .sea .peg-red::before, .sonar .peg-white::before, .sea .peg-white::before {
  border: none;
 }
 
.sonar .peg-white {
  box-shadow: 6px 6px lightgrey;
}

.sea .peg-white {
  box-shadow: -6px 6px lightgrey;
  transform: translate(-25%, -75%);
}

.sea .peg-red {
  box-shadow: -6px 6px darkred;
  transform: translate(-25%, -75%);
}

#box-instructions {
  top: calc(var(--vh, 1vh) * 1);
  height: 90%;
  right: calc(var(--vh, 1vh) * 2);
  position: absolute;
  width: calc(var(--vh, 1vh) * 15);
}

#box-instructions button {
  background-color: #efefef;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  font-size: 1vw;
  height: 40%;
  margin-top: 2%;
  position: relative;
  text-align: center;
  width: 100%;
}

#warningLandscape {
  background: lightgray;
  color: black;
  display: none;
  font-size: 8vh;
  height: calc(var(--vh, 1vh) * 100);
  justify-content: center;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 100;
}

#warningLandscape p {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  width: 100%;
}

@media screen and (orientation:portrait) {
  #warningLandscape {
    display: block;
  }  
  #frame-page {
    display: none;
  }
}