@charset "UTF-8";

:root {
  --result-tie: "It is a tie!";
  --result-p1: "Player 1 wins!";
  --result-p2: "Player 2 wins!";
}

/* Variables
-------------------------------------------------------------- */
/* Body and Notice styling
-------------------------------------------------------------- */
body {
  color: #b6b5ca;
  font-family: 'Arial', sans-serif;
  margin: 0;
  text-align: center;
}

h5 {
  font-weight: 400;
  padding: 0 20px;
}

a {
  color: #b6b5ca;
}

/* Tic-tac-toe game
-------------------------------------------------------------- */
.tic-tac-toe {
  font-family: 'Open Sans', sans-serif;
  height: 300px;
  overflow: hidden;
  margin: 50px auto 30px auto;
  position: relative;
  width: 300px;
}

@media (min-width: 450px) {
  .tic-tac-toe {
    height: 450px;
    width: 450px;
  }
}

.tic-tac-toe input[type="radio"] {
  display: none;
}

.tic-tac-toe input[type="radio"]:checked+label {
  cursor: default;
  z-index: 10 !important;
}

.tic-tac-toe input[type="radio"].player-1+label:after {
  content: "✕";
}

.tic-tac-toe input[type="radio"].player-2+label:after {
  content: "◯";
}

.tic-tac-toe input[type="radio"].player-1:checked+label:after,
.tic-tac-toe input[type="radio"].player-2:checked+label:after {
  opacity: 1;
}

.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 {
  z-index: 1;
}

.tic-tac-toe input[type="radio"].turn-2+label {
  z-index: 2;
}

.tic-tac-toe input[type="radio"].turn-3+label {
  z-index: 3;
}

.tic-tac-toe input[type="radio"].turn-4+label {
  z-index: 4;
}

.tic-tac-toe input[type="radio"].turn-5+label {
  z-index: 5;
}

.tic-tac-toe input[type="radio"].turn-6+label {
  z-index: 6;
}

.tic-tac-toe input[type="radio"].turn-7+label {
  z-index: 7;
}

.tic-tac-toe input[type="radio"].turn-8+label {
  z-index: 8;
}

.tic-tac-toe input[type="radio"].turn-9+label {
  z-index: 9;
}

.tic-tac-toe input[type="radio"].turn-1+label {
  display: block;
}

.tic-tac-toe input[type="radio"].turn-1:checked~.turn-2+label {
  display: block;
}

.tic-tac-toe input[type="radio"].turn-2:checked~.turn-3+label {
  display: block;
}

.tic-tac-toe input[type="radio"].turn-3:checked~.turn-4+label {
  display: block;
}

.tic-tac-toe input[type="radio"].turn-4:checked~.turn-5+label {
  display: block;
}

.tic-tac-toe input[type="radio"].turn-5:checked~.turn-6+label {
  display: block;
}

.tic-tac-toe input[type="radio"].turn-6:checked~.turn-7+label {
  display: block;
}

.tic-tac-toe input[type="radio"].turn-7:checked~.turn-8+label {
  display: block;
}

.tic-tac-toe input[type="radio"].turn-8:checked~.turn-9+label {
  display: block;
}

.tic-tac-toe input[type="radio"].left+label {
  left: 0;
}

.tic-tac-toe input[type="radio"].top+label {
  top: 0;
}

.tic-tac-toe input[type="radio"].middle+label {
  left: 100px;
}

.tic-tac-toe input[type="radio"].right+label {
  left: 200px;
}

.tic-tac-toe input[type="radio"].center+label {
  top: 100px;
}

.tic-tac-toe input[type="radio"].bottom+label {
  top: 200px;
}

@media (min-width: 450px) {
  .tic-tac-toe input[type="radio"].middle+label {
    left: 150px;
  }

  .tic-tac-toe input[type="radio"].right+label {
    left: 300px;
  }

  .tic-tac-toe input[type="radio"].center+label {
    top: 150px;
  }

  .tic-tac-toe input[type="radio"].bottom+label {
    top: 300px;
  }
}

.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 {
  display: block;
}

.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 {
  content: var(--result-tie);
}

.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 {
  display: block;
}

.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: var(--result-p1) !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 {
  display: block;
}

.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: var(--result-p2) !important;
}

.tic-tac-toe label {
  background-color: #78bec5;
  border-radius: 14px;
  cursor: pointer;
  color: #fff;
  display: none;
  height: 90px;
  margin: 5px;
  position: absolute;
  width: 90px;
  -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 {
    height: 140px;
    width: 140px;
  }
}

.tic-tac-toe label:hover {
  background-color: #3d4250;
}

.tic-tac-toe label:hover:after {
  opacity: .4;
}

.tic-tac-toe label:after {
  left: 0;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 45px;
  margin-top: -22.5px;
  opacity: 0;
  position: absolute;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  top: 40%;
  width: 100%;
}

@media (min-width: 450px) {
  .tic-tac-toe label:after {
    font-size: 70px;
    margin-top: -35px;
  }
}

.tic-tac-toe .end {
  background: rgba(255, 255, 255, 0.8);
  bottom: 5px;
  color: #3d4250;
  display: none;
  left: 5px;
  padding-top: 55px;
  position: absolute;
  right: 5px;
  top: 5px;
  text-align: center;
  z-index: 11;
}

@media (min-width: 450px) {
  .tic-tac-toe .end {
    padding-top: 110px;
  }
}

.tic-tac-toe .end h3 {
  font-size: 30px;
  font-weight: 300;
}

@media (min-width: 450px) {
  .tic-tac-toe .end h3 {
    font-size: 40px;
  }
}

.tic-tac-toe .end a {
  background-color: #3d4250;
  border-radius: 4px;
  color: #fff;
  padding: 14px 45px;
  text-decoration: none;
  -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;
  cursor: pointer;
}

/* Multilingual chrome (title, intro, language switcher)
-------------------------------------------------------------- */
.page-title {
  color: #7dc0c4;
  font-family: 'Open Sans', sans-serif;
  font-size: 22px;
  font-weight: 300;
  margin: 40px 20px 0;
}

.intro {
  color: #b6b5ca;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 auto 30px;
  max-width: 480px;
  padding: 0 20px;
}

.lang-switcher {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  margin: 20px auto 50px;
  max-width: 720px;
  padding: 0 20px;
}

.lang-switcher a {
  color: #7dc0c4;
  margin: 0 6px;
  text-decoration: none;
  white-space: nowrap;
}

.lang-switcher a:hover {
  color: #dc685a;
}

.lang-switcher .current {
  color: #b6b5ca;
  font-weight: 700;
  margin: 0 6px;
  white-space: nowrap;
}