body {
  font-family: 'Press Start 2P', cursive;
  color: rgb(205, 0, 0);
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  background-color: steelblue;
}

.header, .announcementBoard {
  text-align: center;
}

.startElements {
  display: flex;
  flex-direction: column;
  width: 50%;
  margin: 0 auto;
}

.xInput, .oInput, .startBtn, .resetBtn, .changeSettingsBtn {
  font-family: 'Press Start 2P', cursive;
  height:2em;
  border-radius: 1em;
  border: none;
}

.xInput, .oInput {
  background-color: antiquewhite;
  padding: .2em .8em;
  margin-top: .5em;
  width: 100%;
}

.inputLabel {
  display: flex;
  margin-top: 1.5em;
}

#playerOneTag {
  color: rgb(238, 211, 0);
}

#playerTwoTag {
  color: rgb(52, 52, 255);
}

.startBtn:hover, .resetBtn:hover, .changeSettingsBtn:hover{
  background-color: rgb(142, 142, 142);
}

.resetBtn, .changeSettingsBtn {
  display: block;
  width: 50%;
  margin: .6em auto;
}

.scoreBoard {
  margin: 3em auto 1em auto;
}

.gameBoardContainer {
  width: 360px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  background-color: antiquewhite;
  border: 1px solid black;
}

div[class$="Row"] {
  display: flex;
}

div[class$="Cell"] {
  flex-grow: 1;
  text-align: center;
  font-size: 4.5em;
  height: 120px;
  max-height: 120px;
  width: 120px;
  max-width: 120px;
}

.x, .o {
  width: 100%;
  height: 100%;
  padding-bottom: 0.2em;
}

div[class$="CenterCell"] {
  border-right: 2px solid rgb(205, 0, 0);
  border-left: 2px solid rgb(205, 0, 0);
}

.middleRow {
  border-top: 2px solid rgb(205, 0, 0);
  border-bottom: 2px solid rgb(205, 0, 0);
}

.avatarOptions {
  width: 170%;
  align-self: center;
}

.avatarOptionContainer {
  display: flex;
  height: 130px;
  margin: 1em 0;
}

.avatarImg {
  margin: auto;
  width: 120px;
  height: 120px;
  max-width: 120px;
  max-height: 120px;
  transition-property: box-shadow;
  transition-duration: .3s;
  transition-timing-function: linear;
}

.xAvatar {
  box-shadow: 8px 8px 8px rgb(238, 211, 0), -8px -8px 8px rgb(238, 211, 0), 8px -8px 8px rgb(238, 211, 0), -8px 8px 8px rgb(238, 211, 0);
}

.oAvatar {
  box-shadow: 8px 8px 8px rgb(52, 52, 255), -8px -8px 8px rgb(52, 52, 255), 8px -8px 8px rgb(52, 52, 255), -8px 8px 8px rgb(52, 52, 255);
}

.hide {
  display: none;
}