/*font-family: 'Finger Paint', cursive;
font-family: 'Lato', sans-serif;*/

/* === BODY ELEMENTS === */
body {
   /*max-width: 97%;*/
   /*align-items: center;*/
   background-image: url("../img/background_bs.png");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   background-color: #00506C;
   display: flex;
   flex-direction: column;
   /*align-items: center;*/
   justify-content: center;
}

/* = = = = = = = NAV & MESSAGE SECTION ELEMENTS  = = = = =  */
.navi {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   overflow: visible;
}
.logo {
   height: 15%;
   font-family: 'Finger Paint', cursive;
   font-size: 55px;
   font-weight: bold;
   align-self: flex-start;
   width: 80%;
   text-shadow:
            -2px 2px 1px black,
            -5px 5px 10px #FEFEFE,
            0px 4px 5px #FEFEFE,
            4px 4px 5px #FEFEFE,
            3px -1px 5px #FEFEFE;
   color: #085368;
}
.menuImg {
   /*margin-left: auto;*/
   cursor: pointer;
}
.messageContainer {
   height: 50px;
   display: flex;
   align-items: flex-end;
   justify-content: space-around;
}
.messageBoard {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   width: 960px;
}
.messageHero, .messageEnemy {
   height: 100%;
   width: 400px;
   text-align: center;
   vertical-align: bottom;
   font-size: 23px;
   font-family: 'Lato', sans-serif;
   /*margin-bottom: 10px;*/
   color: #FEFEFE;
   text-shadow:
      -1px 1px 5px black,
      -4px 4px 10px #0B627C,
      4px 4px 10px #0B627C,
      -4px -4px 10px #0B627C,
      4px -4px 10px #0B627C;
}
.messageHero {
   margin-left: 5px;
}
.messageEnemy {
   margin-right: 5px;
   margin-left: 10px;
}
.lastGo {
   text-shadow:
      -1px 1px 5px red,
      -4px 4px 10px red,
      4px 4px 10px red,
      -4px -4px 10px red,
      4px -4px 10px red;
}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: rgba(255,255,255,.95);
    white-space: nowrap;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    text-overflow: clip;
    z-index: 2;
}
.navDiv {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 20px;
    font-family: 'Finger Paint', cursive;
    color: #A6A6A6;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: clip;
    transition: 0.3s;
    cursor: pointer;
}
.sidenav div:hover {
    color: #00506C;
}
.sidenav .closebtn {
    position: absolute;
    top: 0;
    left: 0px;
    cursor: pointer;
    margin-top: 15px;
    /*margin-left: 50px;*/
}
.navSub {
   display: none;
}
.navSub > p {
   font-size: 15px;
   font-family: 'Lato', sans-serif;
   color: #00506C;
   white-space:normal;
}

/* = = = = = = = BOARD SECTION = = = = = = = */
.container {
   display: flex;
   justify-content: space-around;
   height: 450px;
   overflow: auto;
}
.goWrapper {
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}
.goBtn {
   height: 100px;
   width: 175px;
   background: #095268;
   opacity: .95;
   border: 3px solid #FEFEFE;
   border-radius: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
}
.goBtnText {
   font-family: 'Finger Paint', cursive;
   font-size: 50px;
   color: white;
   text-shadow:
      -2px 2px 1px black;
      /*-5px 5px 10px #FEFEFE,
      0px 4px 5px #FEFEFE,
      4px 4px 5px #FEFEFE,
      3px -1px 5px #FEFEFE,
      -3px -3px 5px #FEFEFE;*/
}
.board {
   /*height: 400px;*/
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   /*width: 960px;*/
}
.vert {
   width: 80px;
}
.vertBtn {
   width: 80px;
   line-height: 40px;
   text-align: center;
   overflow-wrap: normal;
   font-size: 14px;
   font-family: 'Lato', sans-serif;
   border: 1px solid silver;
   border-radius: 15px;
   background-color: #00516C;
   opacity: .85;
   cursor: pointer;
   color: #fff;
   margin-left: 10px;
}
.reset {
   width: 80px;
   margin-right: 10px;
}
.resetBtn {
   width: 80px;
   line-height: 40px;
   text-align: center;
   overflow-wrap: normal;
   font-size: 14px;
   font-family: 'Finger Paint', cursive;
   border: 1px solid silver;
   border-radius: 15px;
   background-color: green;
   opacity: .85;
   cursor: pointer;
}

/* = = = = = = =Welcome Screen = = = = = = = */
.welcome {
   background-color: #fff;
   opacity: .95;
   height: 100%;
   width: 450px;
   display: none;
   border-radius: 10px;
}
.skipButton {
   margin-left: 275px;
   height: 25px;
   width: 150px;
   border-radius: 3px;
   transform: translate(0px, -15px);
}
.click {
   font-size: 15px;
   font-family: 'Lato', sans-serif;
   color: #00506C;
   white-space:normal;
   text-align: right;
}

/* = = = = = = = SQUARES SECTION = = = = = = = */
.hero, .enemy {
   height: 400px;
   width: 400px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}
.hero {
   margin-left: 5px
}
.enemy {
   margin-right: 5px
}
.heroRow, .enemyRow {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
}
.heroSq, .enemySq {
   width: 78px;
   height: 78px;
   border: 1px solid black;
   background-color: white;
   opacity: .25;
   /*opacity: .75;*/
   transform: scale(1);
   transform: rotate(0deg);
   border-radius: 5px;
   /*animation-name: zip-in;
   animation-duration: 1s;
   animation-iteration-count: 1;*/
   /*animation-delay: 2000ms;*/
   /*display: none;*/
   cursor: pointer;
   transform: translate(0px, 0px);
   overflow: visible;
}
.hidden {
   /*display: none;*/
}
.enemySq {
   background-color: #FEFEFE;
}
.bg {
   background-color: #FEFEFE;
}
.bb {
   background-color: blue;
   opacity: .90;
}
.us {
   border-radius: 25%;
   /*background-color: */
}
.jump {
   display: inline-block;
   animation-name: squareIn;
   animation-duration: .75s;
   animation-iteration-count: 1;
}
.sinkIn {
   animation-name: sinkIn;
   animation-duration: .75s;
   animation-iteration-count: 1;
}
/* = = = = = = = GAME BOARD ANAIMATIONS = = = = = = = */
.hit {
   background-color: red;
   opacity: .90;
   animation-name: shake;
   animation-duration: .5s;
   animation-iteration-count: 1;
}
.miss {
   background-color: yellow;
   opacity: .25;
}


/* = = = = = = = BOTTOM INFO SECTION = = = = = = = */
.info {
   height: 250px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
.infoHeader {
   height: 25px;
   width: 95%;
   /*background-color: yellow;*/
   display: flex;
   flex-direction: row;
   justify-content: space-around;
}
.boatsHeader, .enemyHeader, .coconutHeader, .notsureyetHeader {
   /*background-color: green;*/
   width: 25%;
   height: inherit;
   text-align: center;
   vertical-align: bottom;
   font-size: 15px;
   color: #F9EFE5;
   text-shadow: -5px 5px 5px black;
   cursor: default;
}
.spacerHeader {
   width: 10%;
}
.boatsHeader {
   font-family: 'Lato', sans-serif;
   font-size: 18px;
   padding-top: 3px;
}
.enemyHeader {
   font-family: 'Finger Paint', cursive;
   padding-top: 5px;
}

/* = = = = = = = BOTTOM INFO SUB SECTIONS = = = = = = = */
.infoWrapper {
   width: 95%;
   height: 200px;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
}
.boats, .enemyboats, .coconutWrapper, .notsureyet {
   width: 25%;
   height: inherit;
}
.spacer {
   width: 10%;
}
.boats,  .coconutWrapper {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
}
.enemyboats {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}
#cat  {
   max-height: 100%;
   max-width: 50%;
   border-radius: 20px;
   /*THANKS: https://css-tricks.com/*/
   -moz-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   filter: FlipH;
   -ms-filter: "FlipH";
}
.boats_sub {
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
}
.boats_sub_em {
   height: 50%;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
}
#traw {
   max-height: 50%;
   max-width: 100%;
   /*max-width: 50%;*/
   border-radius: 20px;
   /*THANKS: https://css-tricks.com/*/
   -moz-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   filter: FlipH;
   -ms-filter: "FlipH";
}
#dingy, #skif {
   width: 100%;
   max-width: 125px;
   border-radius: 10px;
   /*THANKS: https://css-tricks.com/*/
   -moz-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   filter: FlipH;
   -ms-filter: "FlipH";
}
#fish {
   width: 100%;
   max-width: 150px;
   border-radius: 10px;
   /*THANKS: https://css-tricks.com/*/
   -moz-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   filter: FlipH;
   -ms-filter: "FlipH";
}
#skif {
   max-width: 50%;
}
#toon {
   height: 100%;
   max-width: 50%;
   border-radius: 10px;
   /*THANKS: https://css-tricks.com/*/
   -moz-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   filter: FlipH;
   -ms-filter: "FlipH";
}
.notplaced {
   opacity: .25;
}
#cocoTree {
   transform: scale(.65) translate(0px, -25px);
   max-width: 115%;
}
#cocoTreeBack {
   -moz-transform: scaleX(-.65) scaleY(.65);
   -o-transform: scaleX(-.65) scaleY(.65);
   -webkit-transform: scaleX(-.65) scaleY(.65);
   transform: scaleX(-.65) scaleY(.65) translate(0px, -25px);
   filter: FlipH;
   -ms-filter: "FlipH";
   max-width: 115%;
}
.hide {
   display: none;
}
#coco1 {
   display: inline-block;
   transform: scale(.55) translate(270px, -100px);
   z-index: 1;
}
.drop1 {
   animation-name: drop-coconut1;
   animation-duration: 3s;
   animation-iteration-count: 1;
}
#coco2 {
   display: inline-block;
   transform: scale(.55) translate(-270px, -100px);
   z-index: 1;
}
.drop2 {
   animation-name: drop-coconut2;
   animation-duration: 3s;
   animation-iteration-count: 1;
}
@keyframes drop-coconut1 {
  0% {transform: scale(.55) translate(270px, -100px);}
  12% {transform: scale(.65) translate(270px, 165px)}
  18% {transform: scale(.65) translate(270px, 140px)}
  24% {transform: scale(.65) translate(270px, 165px)}
  27% {transform: scale(.65) translate(270px, 153px)}
  30% {transform: scale(.65) translate(270px, 165px)}
  32% {transform: scale(.65) translate(270px, 160px)}
  33% {transform: scale(.65) translate(270px, 165px)}
  100% {transform: scale(.65) translate(270px, 165px)}
}
@keyframes drop-coconut2 {
  0% {transform: scale(.55) translate(-270px, -100px);}
  12% {transform: scale(.65) translate(-270px, 165px)}
  18% {transform: scale(.65) translate(-270px, 140px)}
  24% {transform: scale(.65) translate(-270px, 165px)}
  27% {transform: scale(.65) translate(-270px, 153px)}
  30% {transform: scale(.65) translate(-270px, 165px)}
  32% {transform: scale(.65) translate(-270px, 160px)}
  33% {transform: scale(.65) translate(-270px, 165px)}
  100% {transform: scale(.65) translate(-270px, 165px)}
}
@keyframes squareIn {
   0% {transform: translate(0px, 0px);}
   50% {transform: translate(0px, -25px);}
   100% {transform: translate(0px, 0px);}
}
@keyframes sinkIn {
   0% {transform: scale(1);}
   50% {transform: scale(.85);}
   90% {transform: scale(1.1);}
   100% {transform: scale(1);}
}
@keyframes shake {
   0% {transform: translate(0px, 0px); z-index: 1;}
   10% {transform: translate(-20px, -20px);z-index: 1;}
   20% {transform: translate(-15px, 15px);z-index: 1;}
   30% {transform: translate(15px, 15px);z-index: 1;}
   40% {transform: translate(15px, -15px);z-index: 1;}
   50% {transform: translate(-10px, -10px);z-index: 1;}
   60% {transform: translate(-10px, 10px);z-index: 1;}
   70% {transform: translate(5px, 5px);z-index: 1;}
   80% {transform: translate(5px, -5px);z-index: 1;}
   90% {transform: translate(0px, -5px);z-index: 1;}
   100% {transform: translate(0px, 0px);z-index: 1;}
}