body {
  /* Visual */
  background-color: #e4f0d0;
}

header {
  /* Visual */
  background-color: #c2d8b9;
}

h1 {
  /* Visual */
  padding: 15px;

  /* Typography */
  font-size: 36px;
  text-align: center;
}

h2 {
  /* Typography */
  font-size: 24px;
}

input {
  /* Visual */
  background-color: #fffcf7;
}

#sizer {
  /* Box-model */
  width: 1024px;

  /* Positioning */
  margin: 0 auto;
}

/***********************************

              SwapZone

***********************************/

#swap-zone {
  /* Box-model */
  width: 75%;

  /* Positioning */
  margin: 25px auto;

  /* Typography */
  text-align: center;
}

#swap-zone input {
  /* Box-model */
  width: 200px;
  height: 30px;

  /* Typography */
  font-size: 30px;
}

#swap-zone button {
  /* Box-model */
  width: 100px;
  height: 36px;

  /* Typography */
  font-size: 22px;

  /* Positioning */
  vertical-align: top;
}

/***********************************

              Turn Indicator

***********************************/

#current-turn {
  /* Box-model */
  width: 75%;

  /* Positioning */
  margin: 15px auto;

  /* Typography */
  text-align: center;
}

/***********************************

              GameDiv

***********************************/
#game-div {
  /* Typography */
  text-align: center;
}

#player1,
#result,
#player2 {
  position: relative;
  display: inline-block;

  /* Box-model */
  width: 25%;
  height: 200px;
  box-sizing: border-box;
  padding: 10px;

  /* Positioning */
  margin: 2%;

  /* Typography */
  text-align: center;
  vertical-align: top;

  /* Visual */
  border: 1px solid #000;
}

#player1-name,
#player2-name {
  /* Positioning */
  margin-bottom: 15px;

  /* Typography */
  font-size: 28px;
}

#player1-chosen,
#player2-chosen {
  /* Positioning */
  margin-top: 25px;

  /* Typography */
  font-size: 60px;
}

li {
  /* Positioning */
  margin: 12px 0;

  /* Typography */
  font-size: 24px;
}

.outcomes {
  /* Positioning */
  position: absolute;
  bottom: 10px;

  /* Box-model */
  width: 90%;

  /* Typography */
  text-align: center;
}

.outcome-trackers { /* Box-model */
  display: inline-block;
}

#result h2 {
  /* Positioning */
  margin-top: 20px;

  /* Typography */
  font-size: 60px;
}

/***********************************

            Chatbox

***********************************/

#chat {
  /* Positioning */
  position: relative;

  /* Box-model */
  width: 600px;
  height: 150px;

  /* Visual */
  padding: 10px;
  margin: 20px auto;
}

#chat-messages {
  /* Box-model */
  height: 125px;
  overflow: auto;

  /* Visual */
  background-color: #fffcf7;
}

#chat-bar {
  /* Positioning */
  position: absolute;
  bottom: 10px;
}

#chat-input {
  /* Box-model */
  width: 550px;
}

#chat-send {
  /* Box-model */
  width: 40px;
}

.player1 {
  /* Visual */
  color: #419d78;
}

.player2 {
  /* Visual */
  color: #2d3047;
}

.player0 {
  color: #000;

  /* Visual */
  background-color: #d3d3d3;
}