html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-size: 20px;
  text-align: center;
}

/**************************
    game.html styling
      Header/Top Bar
**************************/

header {
  height: 3.75em;
  width: 100%;
  background-color: #ccc;
  font-family: 'Roboto';
}

.hide {
  display: none;
}

.profile_pic {
  max-height: 90%;
  margin: 0.2em;
}

.username {
  font-size: 1em;
  max-width: 6em;
  overflow: hidden;
  margin: 1.3em 0.5em;
}

.piece {
  width: 3em;
  height: 3em;
  margin: 0.375em;
  border-radius: 3em;
  background-color: #bbb;
}

#player1 {
  float: left;
  height: 100%;
  width: 15em;
}

#player2 {
  float: right;
  height: 100%;
  width: 15em;
}

.profile_pic, .username, .piece {
  float: inherit;
}

.banner {
  font-family: 'Roboto';
  width: 7.5em;
  margin: 0 auto;
  padding: 0.3em;
}

/**************************
    game.html styling
      Game Function
**************************/


#turnDisplay {
  margin: 1em auto;
  display: none;
}

#turnDisplay p {
  font-size: 1em;
  display: inline;
  padding: 0.25em;
}

#turnDisplay .space {
  height: 1.5em;
  width: 1.5em;
  border-radius: 1.5em;
  display: inline-block;
  margin: 0 auto;
  float: none;
}

#addPiece {
  height: 10vw;
  max-height: 4em;
  width: 75vw;
  max-width: 30em;
  margin: 0.5em auto;
  display: block;
}

#addPiece .space {
  height: 80%;
  width: 10.67%;
  margin: 1% 1.8%;
  border-radius: 3em;
  background-color: #fff;
  float: left;
  transition: all 0.06s;
}

#board {
  height: 65vw;
  max-height: 26em;
  width: 75vw;
  max-width: 30em;
  margin: 0 auto;
  background-color: rgb(254,224,79);
}

.column {
  height: 100%;
  width: 10.67%;
  margin: 1.5% 1.8%;
  float: left;
}

.column .space {
  width: 100%;
  height: 12.3%;
  margin: 15% 0;
  border-radius: 3em;
  float: left;
  background-color: #bbb;
}

#flashMsg {
  height: 10vw;
  max-height: 4em;
  width: 75vw;
  max-width: 30em;
  margin: 0.5em auto;
  text-align: center;
  font-size: 2em;
  font-family: 'Roboto';
}

/****************************
      index.html styling
*****************************/

.wrapper {
  max-width: 60%;
  margin: 2em auto;
}

.input {
  font-size: 1em;
  width: 100%;
  margin: 0.5em auto;
  border: hidden;
  border-bottom: solid 2px #ccc;
}

.error {
  background-color: rgba(255,0,0,0.1)
}

#updateArea table {
  text-align: left;
  margin: 0 auto;
}

#updateArea td {
  padding: 0 2em;
}

#updateArea input {
  font-size: 0.75em;
  margin: 0.5em;
}

.form {
  width: 25em;
  border: 1px solid black;
  background-color: #eee;
  margin: 0 auto;
}

/**************************
      Button Styling
**************************/

.btn {
  font-size: 1em;
  width: 10em;
  padding: 0.5em 0.25em;
  margin: .5em;
  background-color: rgb(18, 61, 158);
  font-family: 'Roboto';
  border: none;
  border-radius: 0.25em;
  color: #fff;
  box-shadow: 0.05em 0.05em 0.25em #888;
}

#gameButtons {
  height: 10vw;
  max-height: 4em;
  width: 75vw;
  max-width: 30em;
  margin: 0.5em auto;
  display: none;
}

#newGame {
  float: left;
}

#profile {
  float: right;
}

#signUpBtn, #startGame {
  background-color: #fff;
  font-weight: bold;
  color: rgb(40, 101, 145);
}

@media (max-width: 900px) {
  body {
    font-size: 3vw;
  }

  #updateArea td {
    padding: 0 1em;
  }

  .wrapper {
    max-width: 60%;
    margin: 1em auto;
  }

  .form {
    width: 20em;
  }

  .form h3 {
    margin: 0.5em;
  }

  #updateArea input {
    font-size: 0.5em;
    margin: 0em;
  }

  .btn {
    font-size: 0.65em;
  }

  .banner {
    visibility: hidden;
  }

  #addPiece {
    display: none;
  }

  #board {
    margin: 1.5em auto;
  }

  #flashMsg {
    font-size: 1.5em;
  }

  #gameButtons{
    height: 5vw;
  }
}

@media (max-width: 900px) and (orientation: landscape){
  body {
    font-size: 2vw;
  }

  .banner{
    visibility: visible;
  }

  #board {
    height: 45.5vw;
    max-height: 26em;
    width: 52.5vw;
    max-width: 30em;
    margin: 0.5em auto;
  }

  #gameButtons {
    position: absolute;
    right: 2em;
    top: 5em;
    width: 6.5em;
  }

  #gameButtons .btn {
    margin: 0.5em 0;
  }

  #flashMsg {
    font-size: 1em;
    position: absolute;
    top: 10em;
    right: 2em;
    width: 6.5em
  }
}