Tic-Tac-Toe-Spiel in reinem CSS3 implementiert

<div Klasse="Tic Tac Toe">
  <input class="player-1 left first-column top first-row first-diagonal turn-1" id="block1-1-1" type="radio"/>
  <label class="turn-1" für="block1-1-1"></label>
  <input class="Spieler-1 Mitte zweite Spalte oben erste Reihe Zug-1" id="Block1-1-2" type="Radio"/>
  <label class="turn-1" für="block1-1-2"></label>
  <input class="player-1 right third-column top first-row second-diagonal turn-1" id="block1-1-3" type="radio"/>
  <label class="turn-1" für="block1-1-3"></label>
  <input class="Spieler-1 links erste Spalte Mitte zweite Reihe Zug-1" id="block1-2-1" type="radio"/>
  <label class="turn-1" für="block1-2-1"></label>
  <input class="player-1 middle second-column center second-row first-diagonal second-diagonal turn-1" id="block1-2-2" type="radio"/>
  <label class="turn-1" für="block1-2-2"></label>
  <input class="Spieler-1 rechts dritte Spalte Mitte zweite Reihe Zug-1" id="block1-2-3" type="radio"/>
  <label class="turn-1" für="block1-2-3"></label>
  <input class="player-1 left erste Spalte unten dritte Reihe zweite Diagonale turn-1" id="block1-3-1" type="radio"/>
  <label class="turn-1" für="block1-3-1"></label>
  <input class="Spieler-1 Mitte zweite Spalte unten dritte Reihe Zug-1" id="block1-3-2" type="radio"/>
  <label class="turn-1" für="block1-3-2"></label>
  <input class="Spieler-1", rechte dritte Spalte, untere dritte Reihe, erste Diagonale, Zug-1" id="Block1-3-3" type="Radio"/>
  <label class="turn-1" für="block1-3-3"></label>
  <input class="Spieler 2 links erste Spalte oben erste Reihe erste Diagonale Zug 2" id="block2-1-1" type="radio"/>
  <label class="turn-2" für="block2-1-1"></label>
  <input class="Spieler 2 Mitte zweite Spalte oben erste Reihe Zug 2" id="block2-1-2" type="radio"/>
  <label class="turn-2" für="block2-1-2"></label>
  <input class="Spieler 2 rechts dritte Spalte oben erste Reihe zweite Diagonale Zug 2" id="Block2-1-3" type="Radio"/>
  <label class="turn-2" für="block2-1-3"></label>
  <input class="Spieler 2 links erste Spalte Mitte zweite Reihe Zug 2" id="block2-2-1" type="radio"/>
  <label class="turn-2" für="block2-2-1"></label>
  <input class="Spieler-2 Mitte zweite Spalte Mitte zweite Reihe erste Diagonale zweite Diagonale Zug-2" id="Block2-2-2" type="Radio"/>
  <label class="turn-2" für="block2-2-2"></label>
  <input class="Spieler 2, rechts, dritte Spalte, Mitte, zweite Reihe, Zug 2" id="block2-2-3" type="radio"/>
  <label class="turn-2" für="block2-2-3"></label>
  <input class="player-2 left first-column bottom third-row second-diagonal turn-2" id="block2-3-1" type="radio"/>
  <label class="turn-2" für="block2-3-1"></label>
  <input class="Spieler-2 Mitte zweite Spalte unten dritte Reihe Zug-2" id="block2-3-2" type="radio"/>
  <label class="turn-2" für="block2-3-2"></label>
  <input class="Spieler 2", rechte dritte Spalte, untere dritte Reihe, erste Diagonale, Zug 2" id="Block2-3-3" type="Radio"/>
  <label class="turn-2" für="block2-3-3"></label>
  <input class="player-1 left first-column top first-row first-diagonal turn-3" id="block3-1-1" type="radio"/>
  <label class="turn-3" für="block3-1-1"></label>
  <input class="Spieler-1 Mitte zweite Spalte oben erste Reihe Zug-3" id="block3-1-2" type="radio"/>
  <label class="turn-3" für="block3-1-2"></label>
  <input class="player-1 right third-column top first-row second-diagonal turn-3" id="block3-1-3" type="radio"/>
  <label class="turn-3" für="block3-1-3"></label>
  <input class="Spieler-1 links erste Spalte Mitte zweite Reihe Zug-3" id="block3-2-1" type="radio"/>
  <label class="turn-3" für="block3-2-1"></label>
  <input class="player-1 middle second-column center second-row first-diagonal second-diagonal turn-3" id="block3-2-2" type="radio"/>
  <label class="turn-3" für="block3-2-2"></label>
  <input class="Spieler-1 rechts dritte Spalte Mitte zweite Reihe Zug-3" id="block3-2-3" type="radio"/>
  <label class="turn-3" für="block3-2-3"></label>
  <input class="player-1 left first-column bottom third-row second-diagonal turn-3" id="block3-3-1" type="radio"/>
  <label class="turn-3" für="block3-3-1"></label>
  <input class="Spieler-1 Mitte zweite Spalte unten dritte Reihe Zug-3" id="block3-3-2" type="radio"/>
  <label class="turn-3" für="block3-3-2"></label>
  <input class="Spieler-1", rechte dritte Spalte, untere dritte Reihe, erste Diagonale, Zug-3" id="block3-3-3" type="radio"/>
  <label class="turn-3" für="block3-3-3"></label>
  <input class="Spieler 2 links erste Spalte oben erste Reihe erste Diagonale Zug 4" id="block4-1-1" type="radio"/>
  <label class="turn-4" für="block4-1-1"></label>
  <input class="Spieler 2 Mitte zweite Spalte oben erste Reihe Zug 4" id="block4-1-2" type="radio"/>
  <label class="turn-4" für="block4-1-2"></label>
  <input class="Spieler 2 rechts dritte Spalte oben erste Reihe zweite Diagonale Zug 4" id="block4-1-3" type="radio"/>
  <label class="turn-4" für="block4-1-3"></label>
  <input class="Spieler 2 links erste Spalte Mitte zweite Reihe Zug 4" id="block4-2-1" type="radio"/>
  <label class="turn-4" für="block4-2-1"></label>
  <input class="Spieler 2 Mitte zweite Spalte Mitte zweite Reihe erste Diagonale zweite Diagonale Zug 4" id="block4-2-2" type="radio"/>
  <label class="turn-4" für="block4-2-2"></label>
  <input class="Spieler 2, rechts, dritte Spalte, Mitte, zweite Reihe, Zug 4" id="block4-2-3" type="radio"/>
  <label class="turn-4" für="block4-2-3"></label>
  <input class="player-2 left first-column bottom third-row second-diagonal turn-4" id="block4-3-1" type="radio"/>
  <label class="turn-4" für="block4-3-1"></label>
  <input class="Spieler 2 Mitte zweite Spalte unten dritte Reihe Zug 4" id="block4-3-2" type="radio"/>
  <label class="turn-4" für="block4-3-2"></label>
  <input class="Spieler 2", rechte dritte Spalte, untere dritte Reihe, erste Diagonale, Zug 4" id="block4-3-3" type="radio"/>
  <label class="turn-4" für="block4-3-3"></label>
  <input class="player-1 left first-column top first-row first-diagonal turn-5" id="block5-1-1" type="radio"/>
  <label class="turn-5" für="block5-1-1"></label>
  <input class="Spieler-1 Mitte zweite Spalte oben erste Reihe Zug-5" id="block5-1-2" type="radio"/>
  <label class="turn-5" für="block5-1-2"></label>
  <input class="player-1 right third-column top first-row second-diagonal turn-5" id="block5-1-3" type="radio"/>
  <label class="turn-5" für="block5-1-3"></label>
  <input class="Spieler-1 links erste Spalte Mitte zweite Reihe Zug-5" id="block5-2-1" type="radio"/>
  <label class="turn-5" für="block5-2-1"></label>
  <input class="player-1 middle second-column center second-row first-diagonal second-diagonal turn-5" id="block5-2-2" type="radio"/>
  <label class="turn-5" für="block5-2-2"></label>
  <input class="Spieler-1 rechts dritte Spalte Mitte zweite Reihe Zug-5" id="block5-2-3" type="radio"/>
  <label class="turn-5" für="block5-2-3"></label>
  <input class="player-1 left first-column bottom third-row second-diagonal turn-5" id="block5-3-1" type="radio"/>
  <label class="turn-5" für="block5-3-1"></label>
  <input class="Spieler-1 Mitte zweite Spalte unten dritte Reihe Zug-5" id="block5-3-2" type="radio"/>
  <label class="turn-5" für="block5-3-2"></label>
  <input class="Spieler-1", rechte dritte Spalte, untere dritte Reihe, erste Diagonale, Zug-5" id="block5-3-3" type="radio"/>
  <label class="turn-5" für="block5-3-3"></label>
  <input class="Spieler 2 links erste Spalte oben erste Reihe erste Diagonale Zug 6" id="block6-1-1" type="radio"/>
  <label class="turn-6" für="block6-1-1"></label>
  <input class="Spieler 2 Mitte zweite Spalte oben erste Reihe Zug 6" id="block6-1-2" type="radio"/>
  <label class="turn-6" für="block6-1-2"></label>
  <input class="Spieler 2 rechts dritte Spalte oben erste Reihe zweite Diagonale Zug 6" id="block6-1-3" type="radio"/>
  <label class="turn-6" für="block6-1-3"></label>
  <input class="Spieler 2 links erste Spalte Mitte zweite Reihe Zug 6" id="block6-2-1" type="radio"/>
  <label class="turn-6" für="block6-2-1"></label>
  <input class="Spieler 2 Mitte zweite Spalte Mitte zweite Reihe erste Diagonale zweite Diagonale Zug 6" id="block6-2-2" type="radio"/>
  <label class="turn-6" für="block6-2-2"></label>
  <input class="Spieler 2, rechts, dritte Spalte, Mitte, zweite Reihe, Zug 6" id="block6-2-3" type="radio"/>
  <label class="turn-6" für="block6-2-3"></label>
  <input class="player-2 left first-column bottom third-row second-diagonal turn-6" id="block6-3-1" type="radio"/>
  <label class="turn-6" für="block6-3-1"></label>
  <input class="Spieler 2 Mitte zweite Spalte unten dritte Reihe Zug 6" id="block6-3-2" type="radio"/>
  <label class="turn-6" für="block6-3-2"></label>
  <input class="Spieler 2", rechte dritte Spalte, untere dritte Reihe, erste Diagonale, Zug 6" id="block6-3-3" type="radio"/>
  <label class="turn-6" für="block6-3-3"></label>
  <input class="player-1 left first-column top first-row first-diagonal turn-7" id="block7-1-1" type="radio"/>
  <label class="turn-7" für="block7-1-1"></label>
  <input class="Spieler-1 Mitte zweite Spalte oben erste Reihe Zug-7" id="block7-1-2" type="radio"/>
  <label class="turn-7" für="block7-1-2"></label>
  <input class="player-1 right third-column top first-row second-diagonal turn-7" id="block7-1-3" type="radio"/>
  <label class="turn-7" für="block7-1-3"></label>
  <input class="Spieler-1 links erste Spalte Mitte zweite Reihe Zug-7" id="block7-2-1" type="radio"/>
  <label class="turn-7" für="block7-2-1"></label>
  <input class="player-1 middle second-column center second-row first-diagonal second-diagonal turn-7" id="block7-2-2" type="radio"/>
  <label class="turn-7" für="block7-2-2"></label>
  <input class="Spieler-1 rechts dritte Spalte Mitte zweite Reihe Zug-7" id="block7-2-3" type="radio"/>
  <label class="turn-7" für="block7-2-3"></label>
  <input class="player-1 left first-column bottom third-row second-diagonal turn-7" id="block7-3-1" type="radio"/>
  <label class="turn-7" für="block7-3-1"></label>
  <input class="Spieler-1 Mitte zweite Spalte unten dritte Reihe Zug-7" id="block7-3-2" type="radio"/>
  <label class="turn-7" für="block7-3-2"></label>
  <input class="Spieler-1", rechte dritte Spalte, untere dritte Reihe, erste Diagonale, Zug-7" id="block7-3-3" type="radio"/>
  <label class="turn-7" für="block7-3-3"></label>
  <input class="Spieler 2 links erste Spalte oben erste Reihe erste Diagonale Zug 8" id="block8-1-1" type="radio"/>
  <label class="turn-8" für="block8-1-1"></label>
  <input class="Spieler 2 Mitte zweite Spalte oben erste Reihe Zug 8" id="block8-1-2" type="radio"/>
  <label class="turn-8" für="block8-1-2"></label>
  <input class="Spieler 2 rechts dritte Spalte oben erste Reihe zweite Diagonale Turn-8" id="Block8-1-3" type="Radio"/>
  <label class="turn-8" für="block8-1-3"></label>
  <input class="Spieler 2 links erste Spalte Mitte zweite Reihe Zug 8" id="block8-2-1" type="radio"/>
  <label class="turn-8" für="block8-2-1"></label>
  <input class="Spieler 2 Mitte zweite Spalte Mitte zweite Reihe erste Diagonale zweite Diagonale Zug 8" id="block8-2-2" type="radio"/>
  <label class="turn-8" für="block8-2-2"></label>
  <input class="Spieler 2, rechts, dritte Spalte, Mitte, zweite Reihe, Zug 8" id="block8-2-3" type="radio"/>
  <label class="turn-8" für="block8-2-3"></label>
  <input class="player-2 left first-column bottom third-row second-diagonal turn-8" id="block8-3-1" type="radio"/>
  <label class="turn-8" für="block8-3-1"></label>
  <input class="Spieler 2 Mitte zweite Spalte unten dritte Reihe Zug 8" id="block8-3-2" type="radio"/>
  <label class="turn-8" für="block8-3-2"></label>
  <input class="Spieler 2", rechte dritte Spalte, untere dritte Reihe, erste Diagonale, Zug 8" id="block8-3-3" type="radio"/>
  <label class="turn-8" für="block8-3-3"></label>
  <input class="player-1 left first-column top first-row first-diagonal turn-9" id="block9-1-1" type="radio"/>
  <label class="turn-9" für="block9-1-1"></label>
  <input class="Spieler-1 Mitte zweite Spalte oben erste Reihe Zug-9" id="block9-1-2" type="radio"/>
  <label class="turn-9" für="block9-1-2"></label>
  <input class="player-1 right third-column top first-row second-diagonal turn-9" id="block9-1-3" type="radio"/>
  <label class="turn-9" für="block9-1-3"></label>
  <input class="player-1 left first-column center second-row turn-9" id="block9-2-1" type="radio"/>
  <label class="turn-9" für="block9-2-1"></label>
  <input class="player-1 middle second-column center second-row first-diagonal second-diagonal turn-9" id="block9-2-2" type="radio"/>
  <label class="turn-9" für="block9-2-2"></label>
  <input class="Spieler-1 rechts dritte Spalte Mitte zweite Reihe Zug-9" id="block9-2-3" type="radio"/>
  <label class="turn-9" für="block9-2-3"></label>
  <input class="player-1 left first-column bottom third-row second-diagonal turn-9" id="block9-3-1" type="radio"/>
  <label class="turn-9" für="block9-3-1"></label>
  <input class="Spieler-1 Mitte zweite Spalte unten dritte Reihe Zug-9" id="block9-3-2" type="radio"/>
  <label class="turn-9" für="block9-3-2"></label>
  <input class="Spieler-1", rechte dritte Spalte, untere dritte Reihe, erste Diagonale, Zug-9" id="block9-3-3" type="radio"/>
  <label class="turn-9" für="block9-3-3"></label>
  <div Klasse="Ende">
    <h3></h3><a href="">Neustart</a>
  </div>
</div>
<h5>Hinweis: Verwenden Sie für das beste Erlebnis die Vollseitenansicht.</h5>

@Zeichensatz "UTF-8";
/* Variablen
--------------------------------------------------------------- */
/* Textkörper- und Hinweisstil
--------------------------------------------------------------- */
Körper {
  Farbe: #b6b5ca;
  Schriftfamilie: „Arial“, serifenlos;
  Rand: 0;
  Textausrichtung: zentriert;
}

h5 {
  Schriftstärke: 400;
  Polsterung: 0 20px;
}

/* Tic-Tac-Toe-Spiel
--------------------------------------------------------------- */
.tic-tac-toe {
  Schriftfamilie: „Open Sans“, serifenlos;
  Höhe: 300px;
  Überlauf: versteckt;
  Rand: 50px automatisch 30px automatisch;
  Position: relativ;
  Breite: 300px;
}
@media (Mindestbreite: 450px) {
  .tic-tac-toe {
    Höhe: 450px;
    Breite: 450px;
  }
}
.tic-tac-toe Eingabe [Typ = "Radio"] {
  Anzeige: keine;
}
.tic-tac-toe Eingabe [Typ = "Radio"]: aktiviert + Bezeichnung {
  Cursor: Standard;
  z-Index: 10 !wichtig;
}
.tic-tac-toe Eingabe [Typ = "Radio"].Spieler-1 + Bezeichnung: nach {
  Inhalt: "";
}
.tic-tac-toe Eingabe [Typ = "Radio"].Spieler-2 + Bezeichnung: nach {
  Inhalt: "";
}
.tic-tac-toe input[type="radio"].player-1:aktiviert + label:nach, .tic-tac-toe input[type="radio"].player-2:aktiviert + label:nach {
  Deckkraft: 1;
}
.tic-tac-toe Eingabe [Typ = "Radio"].Spieler-1:aktiviert + Bezeichnung {
  Hintergrundfarbe: #dc685a;
}
.tic-tac-toe Eingabe [Typ = "Radio"].Spieler-2:aktiviert + Bezeichnung {
  Hintergrundfarbe: #ecaf4f;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-1 + Bezeichnung {
  Z-Index: 1;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-2 + Bezeichnung {
  Z-Index: 2;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-3 + Bezeichnung {
  Z-Index: 3;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-4 + Bezeichnung {
  Z-Index: 4;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-5 + Bezeichnung {
  Z-Index: 5;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-6 + Bezeichnung {
  Z-Index: 6;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-7 + Bezeichnung {
  Z-Index: 7;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-8 + Bezeichnung {
  Z-Index: 8;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-9 + Bezeichnung {
  Z-Index: 9;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-1 + Bezeichnung {
  Anzeige: Block;
}
.tic-tac-toe Eingabe [Typ = "Radio"].Turn-1: geprüft ~ .Turn-2 + Label {
  Anzeige: Block;
}
.tic-tac-toe Eingabe [Typ = "Radio"].Turn-2: geprüft ~ .Turn-3 + Label {
  Anzeige: Block;
}
.tic-tac-toe Eingabe [Typ = "Radio"].Turn-3: geprüft ~ .Turn-4 + Label {
  Anzeige: Block;
}
.tic-tac-toe Eingabe [Typ = "Radio"].Turn-4: geprüft ~ .Turn-5 + Label {
  Anzeige: Block;
}
.tic-tac-toe Eingabe [Typ = "Radio"].turn-5: geprüft ~ .turn-6 + Bezeichnung {
  Anzeige: Block;
}
.tic-tac-toe Eingabe [Typ = "Radio"].Turn-6: geprüft ~ .Turn-7 + Label {
  Anzeige: Block;
}
.tic-tac-toe Eingabe [Typ = "Radio"].Turn-7: geprüft ~ .Turn-8 + Label {
  Anzeige: Block;
}
.tic-tac-toe Eingabe[Typ="Radio"].turn-8:geprüft ~ .turn-9 + Label {
  Anzeige: Block;
}
.tic-tac-toe Eingabe [Typ = "Radio"].links + Bezeichnung {
  links: 0;
}
.tic-tac-toe Eingabe [Typ = "Radio"].top + Bezeichnung {
  oben: 0;
}
.tic-tac-toe Eingabe [Typ = "Radio"]. Mitte + Bezeichnung {
  links: 100px;
}
.tic-tac-toe Eingabe [Typ = "Radio"].rechts + Bezeichnung {
  links: 200px;
}
.tic-tac-toe Eingabe [Typ = "Radio"].center + Bezeichnung {
  oben: 100px;
}
.tic-tac-toe Eingabe [Typ = "Radio"].bottom + Bezeichnung {
  oben: 200px;
}
@media (Mindestbreite: 450px) {
  .tic-tac-toe Eingabe [Typ = "Radio"]. Mitte + Bezeichnung {
    links: 150px;
  }
  .tic-tac-toe Eingabe [Typ = "Radio"].rechts + Bezeichnung {
    links: 300px;
  }
  .tic-tac-toe Eingabe [Typ = "Radio"].center + Bezeichnung {
    oben: 150px;
  }
  .tic-tac-toe Eingabe [Typ = "Radio"].bottom + Bezeichnung {
    oben: 300px;
  }
}
.tic-tac-toe Eingabe [Typ = "Radio"]: aktiviert ~ Eingabe [Typ = "Radio"]: aktiviert ~ Eingabe [Typ = "Radio"]: aktiviert ~
Eingabe[Typ="Radio"]:aktiviert ~ Eingabe[Typ="Radio"]:aktiviert ~ Eingabe[Typ="Radio"]:aktiviert ~
input[type="radio"]:aktiviert ~ input[type="radio"]:aktiviert ~ input[type="radio"]:aktiviert ~ .ende {
  Anzeige: Block;
}
.tic-tac-toe Eingabe [Typ = "Radio"]: aktiviert ~ Eingabe [Typ = "Radio"]: aktiviert ~ Eingabe [Typ = "Radio"]: aktiviert ~
Eingabe[Typ="Radio"]:aktiviert ~ Eingabe[Typ="Radio"]:aktiviert ~ Eingabe[Typ="Radio"]:aktiviert ~
input[type="radio"]:aktiviert ~ input[type="radio"]:aktiviert ~ input[type="radio"]:aktiviert ~ .end > h3:vor {
  Inhalt: „Es ist unentschieden!“;
}
.tic-tac-toe .player-1.erste-spalte:aktiviert ~ .player-1.erste-spalte:aktiviert ~ .player-1.erste-spalte:aktiviert ~ .ende,
.tic-tac-toe .player-1.zweite-spalte:aktiviert ~ .player-1.zweite-spalte:aktiviert ~ .player-1.zweite-spalte:aktiviert ~ .ende,
.tic-tac-toe .player-1.third-column:checked ~ .player-1.third-column:checked ~ .player-1.third-column:checked ~ .ende,
.tic-tac-toe .player-1.first-row:checked ~ .player-1.first-row:checked ~ .player-1.first-row:checked ~ .ende,
.tic-tac-toe .player-1.second-row:aktiviert ~ .player-1.second-row:aktiviert ~ .player-1.second-row:aktiviert ~ .ende,
.tic-tac-toe .player-1.third-row:aktiviert ~ .player-1.third-row:aktiviert ~ .player-1.third-row:aktiviert ~ .ende,
.tic-tac-toe .player-1.first-diagonal:geprüft ~ .player-1.first-diagonal:geprüft ~ .player-1.first-diagonal:geprüft ~ .ende,
.tic-tac-toe .player-1.second-diagonal:geprüft ~ .player-1.second-diagonal:geprüft ~ .player-1.second-diagonal:geprüft ~ .end {
  Anzeige: Block;
}
.tic-tac-toe .player-1.first-column:aktiviert ~ .player-1.first-column:aktiviert ~ .player-1.first-column:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-1.second-column:aktiviert ~ .player-1.second-column:aktiviert ~ .player-1.second-column:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-1.third-column:aktiviert ~ .player-1.third-column:aktiviert ~ .player-1.third-column:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-1.first-row:aktiviert ~ .player-1.first-row:aktiviert ~ .player-1.first-row:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-1.second-row:aktiviert ~ .player-1.second-row:aktiviert ~ .player-1.second-row:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-1.third-row:aktiviert ~ .player-1.third-row:aktiviert ~ .player-1.third-row:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-1.first-diagonal:geprüft ~ .player-1.first-diagonal:geprüft ~ .player-1.first-diagonal:geprüft ~ .end h3:vorher,
.tic-tac-toe .player-1.second-diagonal:geprüft ~ .player-1.second-diagonal:geprüft ~ .player-1.second-diagonal:geprüft ~ .end h3:vor {
  Inhalt: „Spieler 1 gewinnt!“ !important;
}
.tic-tac-toe .player-2.first-column:checked ~ .player-2.first-column:checked ~ .player-2.first-column:checked ~ .ende,
.tic-tac-toe .player-2.second-column:checked ~ .player-2.second-column:checked ~ .player-2.second-column:checked ~ .ende,
.tic-tac-toe .Spieler-2.dritte-Spalte:aktiviert ~ .Spieler-2.dritte-Spalte:aktiviert ~ .Spieler-2.dritte-Spalte:aktiviert ~ .Ende,
.tic-tac-toe .player-2.first-row:checked ~ .player-2.first-row:checked ~ .player-2.first-row:checked ~ .ende,
.tic-tac-toe .player-2.second-row:aktiviert ~ .player-2.second-row:aktiviert ~ .player-2.second-row:aktiviert ~ .ende,
.tic-tac-toe .player-2.third-row:aktiviert ~ .player-2.third-row:aktiviert ~ .player-2.third-row:aktiviert ~ .ende,
.tic-tac-toe .player-2.first-diagonal:geprüft ~ .player-2.first-diagonal:geprüft ~ .player-2.first-diagonal:geprüft ~ .ende,
.tic-tac-toe .player-2.second-diagonal:geprüft ~ .player-2.second-diagonal:geprüft ~ .player-2.second-diagonal:geprüft ~ .end {
  Anzeige: Block;
}
.tic-tac-toe .player-2.first-column:aktiviert ~ .player-2.first-column:aktiviert ~ .player-2.first-column:aktiviert ~ .end h3:vorher,
.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:aktiviert ~ .player-2.third-column:aktiviert ~ .player-2.third-column:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-2.first-row:aktiviert ~ .player-2.first-row:aktiviert ~ .player-2.first-row:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-2.second-row:aktiviert ~ .player-2.second-row:aktiviert ~ .player-2.second-row:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-2.third-row:aktiviert ~ .player-2.third-row:aktiviert ~ .player-2.third-row:aktiviert ~ .end h3:vorher,
.tic-tac-toe .player-2.first-diagonal:geprüft ~ .player-2.first-diagonal:geprüft ~ .player-2.first-diagonal:geprüft ~ .end h3:vorher,
.tic-tac-toe .player-2.second-diagonal:geprüft ~ .player-2.second-diagonal:geprüft ~ .player-2.second-diagonal:geprüft ~ .end h3:vor {
  Inhalt: „Spieler 2 gewinnt!“ !important;
}
.tic-tac-toe-Etikett {
  Hintergrundfarbe: #78bec5;
  Rahmenradius: 14px;
  Cursor: Zeiger;
  Farbe: #fff;
  Anzeige: keine;
  Höhe: 90px;
  Rand: 5px;
  Position: absolut;
  Breite: 90px;
  -moz-transition: Hintergrundfarbe 0,3 s;
  -o-Übergang: Hintergrundfarbe 0,3 s;
  -webkit-transition: Hintergrundfarbe 0,3 s;
  Übergang: Hintergrundfarbe 0,3 s;
}
@media (Mindestbreite: 450px) {
  .tic-tac-toe-Etikett {
    Höhe: 140px;
    Breite: 140px;
  }
}
.tic-tac-toe Bezeichnung:schweben {
  Hintergrundfarbe: #3d4250;
}
.tic-tac-toe Beschriftung:Hover:nach {
  Deckkraft: .4;
}
.tic-tac-toe label:nach {
  links: 0;
  Schriftfamilie: „FontAwesome“;
  Schriftgröße: 45px;
  Rand oben: -22,5px;
  Deckkraft: 0;
  Position: absolut;
  Textausrichtung: zentriert;
  Textschatten: 2px 2px 4px rgba(0, 0, 0, 0,2);
  oben: 50 %;
  Breite: 100 %;
}
@media (Mindestbreite: 450px) {
  .tic-tac-toe label:nach {
    Schriftgröße: 70px;
    Rand oben: -35px;
  }
}
.tic-tac-toe .ende {
  Hintergrund: rgba(255, 255, 255, 0,8);
  unten: 5px;
  Farbe: #3d4250;
  Anzeige: keine;
  links: 5px;
  Polsterung oben: 55px;
  Position: absolut;
  rechts: 5px;
  oben: 5px;
  Textausrichtung: zentriert;
  Z-Index: 11;
}
@media (Mindestbreite: 450px) {
  .tic-tac-toe .ende {
    Polsterung oben: 110px;
  }
}
.Tic Tac Toe .Ende h3 {
  Schriftgröße: 30px;
  Schriftstärke: 300;
}
@media (Mindestbreite: 450px) {
  .Tic Tac Toe .Ende h3 {
    Schriftgröße: 40px;
  }
}
.Tic Tac Toe .Ende a {
  Hintergrundfarbe: #3d4250;
  Rahmenradius: 4px;
  Farbe: #fff;
  Polsterung: 14px 45px;
  Textdekoration: keine;
  -moz-transition: Hintergrundfarbe 0,2 s;
  -o-transition: Hintergrundfarbe 0,2 s;
  -webkit-transition: Hintergrundfarbe 0,2 s;
  Übergang: Hintergrundfarbe 0,2 s;
}
.tic-tac-toe .ende a:hover {
  Hintergrundfarbe: #262934;
  Cursor: Zeiger;