html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  background-color: #00d873;
  font-family: "Comfortaa", sans-serif;
}
h1 {
  font-family: "Lobster", serif;
}
.message {
  color: #fff;
  font-size: 1.5em;
  padding-bottom: 1em;
}
form label {
  font-size: 4em;
  font-weight: bold;
  vertical-align: middle;
}
form input[type=radio] {
  margin: 1em;
  cursor: pointer;
}
form fieldset {
  display: block;
  opacity: 1;
  transition: all ease 1s;
}
form.game-on fieldset {
  opacity: 0;
  display: none;
}
form.game-on button {
  opacity: 1;
  display: block;
  margin: 0 auto;
}
#grid-section {
  margin: 3em 0;
}
#grid {
  width: 300px;
  margin: 0 auto;
}
li {
  border: 1px solid #000;
  width: 100px;
  height: 100px;
  display: block;
  float: left;
  font-size: 3em;
  text-align: center;
  padding: 0.5em;
}
#c1,
#c2,
#c3 {
  border-top: none;
}
#c3,
#c6,
#c9 {
  border-right: none;
}
#c7,
#c8,
#c9 {
  border-bottom: none;
}
#c1,
#c4,
#c7 {
  border-left: none;
}
.winner {
  color: #001fa7;
}
.btn-primary,
.btn-primary:focus {
  background-color: #000000;
  opacity: 0;
  outline: 0;
  transition: all ease 0.3s;
}
.btn-primary:hover {
  background-color: #4C2F39;
}