body {
  margin: 0;
  padding: 0;
  height: 100vh; /*Relative to 1% of the height of the viewport*
*/
}

.container {
  text-align: center;
  background-image: url("images/bg.jpg");
  background-repeat: repeat;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  position: relative;
}

h1 {
  margin: 0;
  padding: .4em 0em .1em 0em;
  font-family: 'Rubik', sans-serif;
  text-shadow: -6px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-size: 6em;
  font-weight: 900;
  text-align: center;
  color: #2572d0;
}

#turnLog {
  background-color: #F8E7DF;
  display: inline-block;
  width: 150px;
  position: relative;
  left: -10%;
  top: 250px;
  margin: -80px 0px 0px 20px;
  padding: 10px;
  font-family: 'Rubik', sans-serif;
  color: #f68787;
  font-size: 3em;
  box-shadow: 8px 8px grey;
}
#scoreLogP1 {
  visibility: visible;
  background-color: #F8E7DF;
  display: inline-block;
  max-width: 270px;
  max-height: 134px;
  position: relative;
  left: 37%;
  top: 200px;
  margin: -80px 0px 0px 20px;
  padding: 10px;
  font-family: 'Rubik', sans-serif;
  color: #f68787;
  font-size: 3em;
  box-shadow: 8px 8px grey;
}
#scoreLogP2 {
  visibility: visible;
  background-color: #F8E7DF;
  display: inline-block;
  max-width: 270px;
  max-height: 134px;
  position: relative;
  left: 15%;
  top: 400px;
  margin: -80px 0px 0px 20px;
  padding: 10px;
  font-family: 'Rubik', sans-serif;
  color: #f68787;
  font-size: 3em;
  box-shadow: 8px 8px grey;
}
.style {
  margin: 0;
  padding: inherit;
}

#playerTurn {
  left: -50
  top: 300px;
}

#gameboard {
  background-color: #b782c0;
  max-width: 503px;
  height: 503px;
  margin: 0 auto;
  box-shadow: 10px 10px grey;
}

.square {
  transition: 0.2s;
  display: inline-block;
  background-color: #f2b6c2;
  /*background-image: url(images/tilePattern.png);*/
  width: 164px;
  height: 164px;
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Londrina Sketch', cursive;
  font-size: 10em;
  text-align: center;
  line-height: 140px;
}

.square:hover {
  width: 166px;
  height: 162px;
  opacity: 0.7;
}

.NoHover {
  display: inline-block;
  background-color: #f2b6c2;
  width: 164px;
  height: 164px;
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Londrina Sketch', cursive;
  font-size: 10em;
  text-align: center;
  line-height: 140px;
}

.winnerAlertBox {
  background-color: rgba(255,255,255, 0.7); /*ensures that the opacity doesn't change for all it's children */
  bottom: 310px;
  position: absolute; /* position sets type to relative or absolute, then need to use left, right, bottom, top etc to move it to position. */
  width: 100%;
}
.winnerAlert {
  margin: 30px;
  font-size: 5em;
  font-family: 'Days One', sans-serif;
  letter-spacing: -6px;
  text-shadow: -1px 0 #746f6d, 0 1px #746f6d, 1px 0 #746f6d, 0 -1px #746f6d;
  color: #a19e9b; /*#c4c1c0;*/

}

.player1Win {
  display: none;
}

.player2Win {
  display: none;
}

.noOneWin {
  display: none;
}

.playAgain {
  transition: 0.2s all;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 20px;
  background: #8fb3e5;
  background-image: linear-gradient(to bottom, #8fb3e5, #d1a6e7);
  border-radius: 60px;
  box-shadow: 2px 6px 6px #666666;
  font-family: 'Rubik', sans-serif;
  color: #ffffff;
  padding: 10px 20px 10px 20px;
  border: solid #919fc9 2px;

}

.playAgain:focus {
  outline:0; /*gets rid of ugly outline around button when clicked */
}

.playAgain:hover {
  background: #d1a6e7 ;
  background-image: linear-gradient(to bottom, #d1a6e7, #8fb3e5);
  text-decoration: none;
  font-size: 24px;
}


@media (max-width: 768px) {
  #scoreLogP1 {
    max-width: 220px !important;
    left: 45% !important;
    border: 5px solid red;
  };


}

/*
Colour Palette
#D4E0FA
#BCD5F3
#DDC3E0
#EECEE5
#F4DAE3
#F8E7DF
#f68787
#ff915f
#e7ad92
*/