font-family: 'Arial', sans-serif;
font-family: 'Open Sans', sans-serif;
margin: 50px auto 30px auto;
@media (min-width: 450px) {
.tic-tac-toe input[type="radio"] {
.tic-tac-toe input[type="radio"]:checked + label {
.tic-tac-toe input[type="radio"].player-1 + label:after {
.tic-tac-toe input[type="radio"].player-2 + label:after {
.tic-tac-toe input[type="radio"].player-1:checked + label:after, .tic-tac-toe input[type="radio"].player-2:checked + label:after {
.tic-tac-toe input[type="radio"].player-1:checked + label {
background-color: #dc685a;
.tic-tac-toe input[type="radio"].player-2:checked + label {
background-color: #ecaf4f;
.tic-tac-toe input[type="radio"].turn-1 + label {
.tic-tac-toe input[type="radio"].turn-2 + label {
.tic-tac-toe input[type="radio"].turn-3 + label {
.tic-tac-toe input[type="radio"].turn-4 + label {
.tic-tac-toe input[type="radio"].turn-5 + label {
.tic-tac-toe input[type="radio"].turn-6 + label {
.tic-tac-toe input[type="radio"].turn-7 + label {
.tic-tac-toe input[type="radio"].turn-8 + label {
.tic-tac-toe input[type="radio"].turn-9 + label {
.tic-tac-toe input[type="radio"].turn-1 + label {
.tic-tac-toe input[type="radio"].turn-1:checked ~ .turn-2 + label {
.tic-tac-toe input[type="radio"].turn-2:checked ~ .turn-3 + label {
.tic-tac-toe input[type="radio"].turn-3:checked ~ .turn-4 + label {
.tic-tac-toe input[type="radio"].turn-4:checked ~ .turn-5 + label {
.tic-tac-toe input[type="radio"].turn-5:checked ~ .turn-6 + label {
.tic-tac-toe input[type="radio"].turn-6:checked ~ .turn-7 + label {
.tic-tac-toe input[type="radio"].turn-7:checked ~ .turn-8 + label {
.tic-tac-toe input[type="radio"].turn-8:checked ~ .turn-9 + label {
.tic-tac-toe input[type="radio"].left + label {
.tic-tac-toe input[type="radio"].top + label {
.tic-tac-toe input[type="radio"].middle + label {
.tic-tac-toe input[type="radio"].right + label {
.tic-tac-toe input[type="radio"].center + label {
.tic-tac-toe input[type="radio"].bottom + label {
@media (min-width: 450px) {
.tic-tac-toe input[type="radio"].middle + label {
.tic-tac-toe input[type="radio"].right + label {
.tic-tac-toe input[type="radio"].center + label {
.tic-tac-toe input[type="radio"].bottom + label {
.tic-tac-toe input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~ .end {
.tic-tac-toe input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~ .end > h3:before {
.tic-tac-toe .player-1.first-column:checked ~ .player-1.first-column:checked ~ .player-1.first-column:checked ~ .end,
.tic-tac-toe .player-1.second-column:checked ~ .player-1.second-column:checked ~ .player-1.second-column:checked ~ .end,
.tic-tac-toe .player-1.third-column:checked ~ .player-1.third-column:checked ~ .player-1.third-column:checked ~ .end,
.tic-tac-toe .player-1.first-row:checked ~ .player-1.first-row:checked ~ .player-1.first-row:checked ~ .end,
.tic-tac-toe .player-1.second-row:checked ~ .player-1.second-row:checked ~ .player-1.second-row:checked ~ .end,
.tic-tac-toe .player-1.third-row:checked ~ .player-1.third-row:checked ~ .player-1.third-row:checked ~ .end,
.tic-tac-toe .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .end,
.tic-tac-toe .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .end {
.tic-tac-toe .player-1.first-column:checked ~ .player-1.first-column:checked ~ .player-1.first-column:checked ~ .end h3:before,
.tic-tac-toe .player-1.second-column:checked ~ .player-1.second-column:checked ~ .player-1.second-column:checked ~ .end h3:before,
.tic-tac-toe .player-1.third-column:checked ~ .player-1.third-column:checked ~ .player-1.third-column:checked ~ .end h3:before,
.tic-tac-toe .player-1.first-row:checked ~ .player-1.first-row:checked ~ .player-1.first-row:checked ~ .end h3:before,
.tic-tac-toe .player-1.second-row:checked ~ .player-1.second-row:checked ~ .player-1.second-row:checked ~ .end h3:before,
.tic-tac-toe .player-1.third-row:checked ~ .player-1.third-row:checked ~ .player-1.third-row:checked ~ .end h3:before,
.tic-tac-toe .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .end h3:before,
.tic-tac-toe .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .end h3:before {
content: "Player 1 wins!" !important;
.tic-tac-toe .player-2.first-column:checked ~ .player-2.first-column:checked ~ .player-2.first-column:checked ~ .end,
.tic-tac-toe .player-2.second-column:checked ~ .player-2.second-column:checked ~ .player-2.second-column:checked ~ .end,
.tic-tac-toe .player-2.third-column:checked ~ .player-2.third-column:checked ~ .player-2.third-column:checked ~ .end,
.tic-tac-toe .player-2.first-row:checked ~ .player-2.first-row:checked ~ .player-2.first-row:checked ~ .end,
.tic-tac-toe .player-2.second-row:checked ~ .player-2.second-row:checked ~ .player-2.second-row:checked ~ .end,
.tic-tac-toe .player-2.third-row:checked ~ .player-2.third-row:checked ~ .player-2.third-row:checked ~ .end,
.tic-tac-toe .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .end,
.tic-tac-toe .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .end {
.tic-tac-toe .player-2.first-column:checked ~ .player-2.first-column:checked ~ .player-2.first-column:checked ~ .end h3:before,
.tic-tac-toe .player-2.second-column:checked ~ .player-2.second-column:checked ~ .player-2.second-column:checked ~ .end h3:before,
.tic-tac-toe .player-2.third-column:checked ~ .player-2.third-column:checked ~ .player-2.third-column:checked ~ .end h3:before,
.tic-tac-toe .player-2.first-row:checked ~ .player-2.first-row:checked ~ .player-2.first-row:checked ~ .end h3:before,
.tic-tac-toe .player-2.second-row:checked ~ .player-2.second-row:checked ~ .player-2.second-row:checked ~ .end h3:before,
.tic-tac-toe .player-2.third-row:checked ~ .player-2.third-row:checked ~ .player-2.third-row:checked ~ .end h3:before,
.tic-tac-toe .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .end h3:before,
.tic-tac-toe .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .end h3:before {
content: "Player 2 wins!" !important;
background-color: #78bec5;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
@media (min-width: 450px) {
.tic-tac-toe label:hover {
background-color: #3d4250;
.tic-tac-toe label:hover:after {
.tic-tac-toe label:after {
font-family: "FontAwesome";
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
@media (min-width: 450px) {
.tic-tac-toe label:after {
background: rgba(255, 255, 255, 0.8);
@media (min-width: 450px) {
@media (min-width: 450px) {
background-color: #3d4250;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
-webkit-transition: background-color 0.2s;
transition: background-color 0.2s;
.tic-tac-toe .end a:hover {
background-color: #262934;