.elementor-1525 .elementor-element.elementor-element-db134ea{--display:flex;--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-1525 .elementor-element.elementor-element-328080d .elementor-icon-wrapper{text-align:center;}.elementor-1525 .elementor-element.elementor-element-328080d.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-409b585 );color:var( --e-global-color-e1eda01 );}.elementor-1525 .elementor-element.elementor-element-328080d.elementor-view-framed .elementor-icon, .elementor-1525 .elementor-element.elementor-element-328080d.elementor-view-default .elementor-icon{color:var( --e-global-color-409b585 );border-color:var( --e-global-color-409b585 );}.elementor-1525 .elementor-element.elementor-element-328080d.elementor-view-framed .elementor-icon, .elementor-1525 .elementor-element.elementor-element-328080d.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-409b585 );}.elementor-1525 .elementor-element.elementor-element-328080d.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-e1eda01 );}.elementor-1525 .elementor-element.elementor-element-328080d.elementor-view-stacked .elementor-icon svg{fill:var( --e-global-color-e1eda01 );}.elementor-1525 .elementor-element.elementor-element-328080d.elementor-view-stacked .elementor-icon:hover{background-color:var( --e-global-color-409b585 );color:var( --e-global-color-d832298 );}.elementor-1525 .elementor-element.elementor-element-328080d.elementor-view-framed .elementor-icon:hover, .elementor-1525 .elementor-element.elementor-element-328080d.elementor-view-default .elementor-icon:hover{color:var( --e-global-color-409b585 );border-color:var( --e-global-color-409b585 );}.elementor-1525 .elementor-element.elementor-element-328080d.elementor-view-framed .elementor-icon:hover, .elementor-1525 .elementor-element.elementor-element-328080d.elementor-view-default .elementor-icon:hover svg{fill:var( --e-global-color-409b585 );}.elementor-1525 .elementor-element.elementor-element-328080d.elementor-view-framed .elementor-icon:hover{background-color:var( --e-global-color-d832298 );}.elementor-1525 .elementor-element.elementor-element-328080d.elementor-view-stacked .elementor-icon:hover svg{fill:var( --e-global-color-d832298 );}.elementor-1525 .elementor-element.elementor-element-328080d .elementor-icon{font-size:30px;}.elementor-1525 .elementor-element.elementor-element-328080d .elementor-icon svg{height:30px;}.elementor-1525 .elementor-element.elementor-element-161106e .elementor-icon-wrapper{text-align:center;}.elementor-1525 .elementor-element.elementor-element-161106e.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-409b585 );color:var( --e-global-color-e1eda01 );}.elementor-1525 .elementor-element.elementor-element-161106e.elementor-view-framed .elementor-icon, .elementor-1525 .elementor-element.elementor-element-161106e.elementor-view-default .elementor-icon{color:var( --e-global-color-409b585 );border-color:var( --e-global-color-409b585 );}.elementor-1525 .elementor-element.elementor-element-161106e.elementor-view-framed .elementor-icon, .elementor-1525 .elementor-element.elementor-element-161106e.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-409b585 );}.elementor-1525 .elementor-element.elementor-element-161106e.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-e1eda01 );}.elementor-1525 .elementor-element.elementor-element-161106e.elementor-view-stacked .elementor-icon svg{fill:var( --e-global-color-e1eda01 );}.elementor-1525 .elementor-element.elementor-element-161106e.elementor-view-stacked .elementor-icon:hover{background-color:var( --e-global-color-409b585 );color:var( --e-global-color-d832298 );}.elementor-1525 .elementor-element.elementor-element-161106e.elementor-view-framed .elementor-icon:hover, .elementor-1525 .elementor-element.elementor-element-161106e.elementor-view-default .elementor-icon:hover{color:var( --e-global-color-409b585 );border-color:var( --e-global-color-409b585 );}.elementor-1525 .elementor-element.elementor-element-161106e.elementor-view-framed .elementor-icon:hover, .elementor-1525 .elementor-element.elementor-element-161106e.elementor-view-default .elementor-icon:hover svg{fill:var( --e-global-color-409b585 );}.elementor-1525 .elementor-element.elementor-element-161106e.elementor-view-framed .elementor-icon:hover{background-color:var( --e-global-color-d832298 );}.elementor-1525 .elementor-element.elementor-element-161106e.elementor-view-stacked .elementor-icon:hover svg{fill:var( --e-global-color-d832298 );}.elementor-1525 .elementor-element.elementor-element-161106e .elementor-icon{font-size:30px;}.elementor-1525 .elementor-element.elementor-element-161106e .elementor-icon svg{height:30px;}.elementor-1525 .elementor-element.elementor-element-7e6ed7f{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1525 .elementor-element.elementor-element-42b8d75 > .elementor-widget-container{margin:0vw 0vw -30vw 0vw;}.elementor-1525 .elementor-element.elementor-element-42b8d75{z-index:99;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-1525 .elementor-element.elementor-element-42b8d75 img{width:53%;}}@media(max-width:880px){.elementor-1525 .elementor-element.elementor-element-42b8d75 > .elementor-widget-container{margin:0vw 0vw -45vw 0vw;}.elementor-1525 .elementor-element.elementor-element-42b8d75{text-align:center;}.elementor-1525 .elementor-element.elementor-element-42b8d75 img{width:65%;}}@media(max-width:767px){.elementor-1525 .elementor-element.elementor-element-42b8d75 > .elementor-widget-container{margin:0vw 0vw -60vw 0vw;}.elementor-1525 .elementor-element.elementor-element-42b8d75 img{width:80%;}}/* Start custom CSS for html, class: .elementor-element-5dc4e57 */* {
  box-sizing: border-box;
}

/* FULL BACKGROUND */

body {
  background: #FDF7EE;
  counter-reset: turn 10;
  font-family: "Merriweather Sans", sans-serif;
  font-size: 16px;
}

.board {
  height: 242px;
  margin: auto;
  position: relative;
  width: 242px;
}

h1 {
  color: #DB1F26; /* TAC COLOR */
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.05em;
  margin: 20px 0 -50px;
  text-align: center;
}
h1 span:nth-of-type(1),
h1 span:nth-of-type(3) {
  color: #000; /* TIC AND TOE COLOR */
}

.boxes {
  border: 1px solid #DB1F26; /* SMALL BOX BORDER */
  display: flex;
  flex-wrap: wrap;
  height: 242px;
  position: relative;
  width: 242px;
}

/**
 * Boxes
 */
input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  opacity: 0.01;
  position: absolute;
  z-index: 0;
}
input[type=checkbox].x:checked {
  counter-increment: turn -10;
}
input[type=checkbox].o:checked {
  counter-increment: turn 10;
}

@-moz-document url-prefix() {
  input[type=checkbox]:checked {
    background: none;
  }
}
button[type=reset] {
  border: none;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  font-size: 18px;
  height: auto;
  padding: 8px 10px;
  position: static;
  width: auto;
}

label {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px #000; /* TIC TAC LINES */
  cursor: pointer;
  height: 80px;
  transition: background 0.2s;
  width: 80px;
}
label:hover {
  background-color: #FBEA67; /* X HOVER COLOR */
}
label.o:hover {
  background-color: #D6E9BC; /* O HOVER COLOR */
}

/**
 * Checked Boxes
 */
input[type=checkbox]:nth-of-type(1):checked ~ .controls .control.-x label:nth-of-type(1),
input[type=checkbox]:nth-of-type(1):checked ~ .controls .control.-o label:nth-of-type(1) {
  background-color: #FBEA67; /* TOP LEFT X BOX */
  background-image: url(https://littlescarlett.com/wp-content/uploads/2024/06/ttt-x.svg);
  background-size: 50%;
  cursor: not-allowed;
  pointer-events: none;
  z-index: 50 !important;
}

input[type=checkbox]:nth-of-type(2):checked ~ .controls .control.-x label:nth-of-type(2),
input[type=checkbox]:nth-of-type(2):checked ~ .controls .control.-o label:nth-of-type(2) {
  background-color: #FBEA67; /* TOP MID X BOX */
  background-image: url(https://littlescarlett.com/wp-content/uploads/2024/06/ttt-x.svg);
  background-size: 50%;
  cursor: not-allowed;
  pointer-events: none;
  z-index: 50 !important;
}

input[type=checkbox]:nth-of-type(3):checked ~ .controls .control.-x label:nth-of-type(3),
input[type=checkbox]:nth-of-type(3):checked ~ .controls .control.-o label:nth-of-type(3) {
  background-color: #FBEA67; /* TOP RIGHT X BOX */
  background-image: url(https://littlescarlett.com/wp-content/uploads/2024/06/ttt-x.svg);
  background-size: 50%;
  cursor: not-allowed;
  pointer-events: none;
  z-index: 50 !important;
}

input[type=checkbox]:nth-of-type(4):checked ~ .controls .control.-x label:nth-of-type(4),
input[type=checkbox]:nth-of-type(4):checked ~ .controls .control.-o label:nth-of-type(4) {
  background-color: #FBEA67; /* MID LEFT X BOX */
  background-image: url(https://littlescarlett.com/wp-content/uploads/2024/06/ttt-x.svg);
  background-size: 50%;
  cursor: not-allowed;
  pointer-events: none;
  z-index: 50 !important;
}

input[type=checkbox]:nth-of-type(5):checked ~ .controls .control.-x label:nth-of-type(5),
input[type=checkbox]:nth-of-type(5):checked ~ .controls .control.-o label:nth-of-type(5) {
  background-color: #FBEA67; /* MID X BOX */
  background-image: url(https://littlescarlett.com/wp-content/uploads/2024/06/ttt-x.svg);
  background-size: 50%;
  cursor: not-allowed;
  pointer-events: none;
  z-index: 50 !important;
}

input[type=checkbox]:nth-of-type(6):checked ~ .controls .control.-x label:nth-of-type(6),
input[type=checkbox]:nth-of-type(6):checked ~ .controls .control.-o label:nth-of-type(6) {
  background-color: #FBEA67; /* MID RIGHT X BOX */
  background-image: url(https://littlescarlett.com/wp-content/uploads/2024/06/ttt-x.svg);
  background-size: 50%;
  cursor: not-allowed;
  pointer-events: none;
  z-index: 50 !important;
}

input[type=checkbox]:nth-of-type(7):checked ~ .controls .control.-x label:nth-of-type(7),
input[type=checkbox]:nth-of-type(7):checked ~ .controls .control.-o label:nth-of-type(7) {
  background-color: #FBEA67; /* BOTTOM LEFT X BOX */
  background-image: url(https://littlescarlett.com/wp-content/uploads/2024/06/ttt-x.svg);
  background-size: 50%;
  cursor: not-allowed;
  pointer-events: none;
  z-index: 50 !important;
}

input[type=checkbox]:nth-of-type(8):checked ~ .controls .control.-x label:nth-of-type(8),
input[type=checkbox]:nth-of-type(8):checked ~ .controls .control.-o label:nth-of-type(8) {
  background-color: #FBEA67; /* BOTTOM MID X BOX */
  background-image: url(https://littlescarlett.com/wp-content/uploads/2024/06/ttt-x.svg);
  background-size: 50%;
  cursor: not-allowed;
  pointer-events: none;
  z-index: 50 !important;
}

input[type=checkbox]:nth-of-type(9):checked ~ .controls .control.-x label:nth-of-type(9),
input[type=checkbox]:nth-of-type(9):checked ~ .controls .control.-o label:nth-of-type(9) {
  background-color: #FBEA67; /* BOTTOM RIGHT X BOX */
  background-image: url(https://littlescarlett.com/wp-content/uploads/2024/06/ttt-x.svg);
  background-size: 50%;
  cursor: not-allowed;
  pointer-events: none;
  z-index: 50 !important;
}

input[type=checkbox]:nth-of-type(10):checked ~ .controls .control.-x label:nth-of-type(1),
input[type=checkbox]:nth-of-type(10):checked ~ .controls .control.-o label:nth-of-type(1) {
  background-color: #D6E9BC; /* TOP LEFT O BOX */
  background-image: url(https://littlescarlett.com/wp-content/uploads/2024/06/ttt-o.svg);
  background-size: 50%;
  cursor: not-allowed;
  pointer-events: none;
  z-index: 50 !important;
}

input[type=checkbox]:nth-of-type(11):checked ~ .controls .control.-x label:nth-of-type(2),
input[type=checkbox]:nth-of-type(11):checked ~ .controls .control.-o label:nth-of-type(2) {
  background-color: #D6E9BC; /* TOP MID O BOX */
  background-image: url(https://littlescarlett.com/wp-content/uploads/2024/06/ttt-o.svg);
  background-size: 50%;
  cursor: not-allowed;
  pointer-events: none;
  z-index: 50 !important;
}

input[type=checkbox]:nth-of-type(12):checked ~ .controls .control.-x label:nth-of-type(3),
input[type=checkbox]:nth-of-type(12):checked ~ .controls .control.-o label:nth-of-type(3) {
  background-color: #D6E9BC; /* TOP RIGHT O BOX */
  background-image: url(https://littlescarlett.com/wp-content/uploads/2024/06/ttt-o.svg);
  background-size: 50%;
  cursor: not-allowed;
  pointer-events: none;
  z-index: 50 !important;
}

input[type=checkbox]:nth-of-type(13):checked ~ .controls .control.-x label:nth-of-type(4),
input[type=checkbox]:nth-of-type(13):checked ~ .controls .control.-o label:nth-of-type(4) {
  background-color: #D6E9BC; /* MID LEFT O BOX */
  background-image: url(https://littlescarlett.com/wp-content/uploads/2024/06/ttt-o.svg);
  background-size: 50%;
  cursor: not-allowed;
  pointer-events: none;
  z-index: 50 !important;
}

input[type=checkbox]:nth-of-type(14):checked ~ .controls .control.-x label:nth-of-type(5),
input[type=checkbox]:nth-of-type(14):checked ~ .controls .control.-o label:nth-of-type(5) {
  background-color: #D6E9BC; /* MID O BOX */
  background-image: url(https://littlescarlett.com/wp-content/uploads/2024/06/ttt-o.svg);
  background-size: 50%;
  cursor: not-allowed;
  pointer-events: none;
  z-index: 50 !important;
}

input[type=checkbox]:nth-of-type(15):checked ~ .controls .control.-x label:nth-of-type(6),
input[type=checkbox]:nth-of-type(15):checked ~ .controls .control.-o label:nth-of-type(6) {
  background-color: #D6E9BC; /* MID RIGHT O BOX */
  background-image: url(https://littlescarlett.com/wp-content/uploads/2024/06/ttt-o.svg);
  background-size: 50%;
  cursor: not-allowed;
  pointer-events: none;
  z-index: 50 !important;
}

input[type=checkbox]:nth-of-type(16):checked ~ .controls .control.-x label:nth-of-type(7),
input[type=checkbox]:nth-of-type(16):checked ~ .controls .control.-o label:nth-of-type(7) {
  background-color: #D6E9BC; /* BOTTOM LEFT O BOX */
  background-image: url(https://littlescarlett.com/wp-content/uploads/2024/06/ttt-o.svg);
  background-size: 50%;
  cursor: not-allowed;
  pointer-events: none;
  z-index: 50 !important;
}

input[type=checkbox]:nth-of-type(17):checked ~ .controls .control.-x label:nth-of-type(8),
input[type=checkbox]:nth-of-type(17):checked ~ .controls .control.-o label:nth-of-type(8) {
  background-color: #D6E9BC; /* BOTTOM MID O BOX */
  background-image: url(https://littlescarlett.com/wp-content/uploads/2024/06/ttt-o.svg);
  background-size: 50%;
  cursor: not-allowed;
  pointer-events: none;
  z-index: 50 !important;
}

input[type=checkbox]:nth-of-type(18):checked ~ .controls .control.-x label:nth-of-type(9),
input[type=checkbox]:nth-of-type(18):checked ~ .controls .control.-o label:nth-of-type(9) {
  background-color: #D6E9BC; /* BOTTOM RIGHT O BOX */
  background-image: url(https://littlescarlett.com/wp-content/uploads/2024/06/ttt-o.svg);
  background-size: 50%;
  cursor: not-allowed;
  pointer-events: none;
  z-index: 50 !important;
}

/**
 * Turns
 **/
.controls {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: calc(100% + 2ch);
  z-index: 1;
}

.control.-x {
  overflow: hidden;
  flex-grow: 1;
  height: 100%;
  width: 0;
}
.control.-o {
  flex-basis: 100%;
  white-space: nowrap;
}
.control.-o:after {
  content: counter(turn);
  display: inline;
  visibility: hidden;
}
.control.-o .control-labels {
  width: 240px;
}
.control .control-labels {
  display: inline-flex;
  flex-wrap: wrap;
}

.turn {
  bottom: -11px;
  display: flex;
  flex-wrap: wrap;
  left: -11px;
  overflow: hidden;
  position: absolute;
  right: -11px;
  top: -11px;
  z-index: 0;
}
.turn .turn-x {
  box-shadow: inset 0 0 0 10px #FBEA67; /* TURNS BORDER ON X TURN */
  flex-grow: 1;
  height: 100%;
  width: 0;
}
.turn .turn-o {
  box-shadow: inset 0 0 0 10px #D6E9BC; /* TURNS BORDER ON O TURN */
  color: #D6E9BC;
  flex-basis: 100%;
  box-sizing: border-box;
  padding-left: calc(100% - 1ch);
}
.turn .turn-o:before {
  content: counter(turn);
}

/**
 * Done
 **/
/**
 * ---
 **/
input[type=checkbox]:nth-of-type(1):checked + :checked + :checked ~ .done {
  box-shadow: 0 0 0 10px #A8;
  border: 1px solid #666666;
  background: #FBEA67;
  color: #7A6B03;
  display: flex;
}
input[type=checkbox]:nth-of-type(1):checked + :checked + :checked ~ .done .winner:after {
  content: "x";
  color: #FBEA67; /* X WINNER */
}
input[type=checkbox]:nth-of-type(1):checked + :checked + :checked ~ .done button[type=reset] {
  background: #FBEA67;
}
input[type=checkbox]:nth-of-type(1):checked + :checked + :checked ~ .tie,
input[type=checkbox]:nth-of-type(1):checked + :checked + :checked ~ .turn {
  display: none !important;
}
input[type=checkbox]:nth-of-type(1) + input + input + :checked + :checked + :checked ~ .done {
  box-shadow: 0 0 0 10px #A8;
  border: 1px solid #666666;
  background: #FBEA67;
  color: #7A6B03;
  display: flex;
}
input[type=checkbox]:nth-of-type(1) + input + input + :checked + :checked + :checked ~ .done .winner:after {
  content: "x";
  color: #7A6B03;
}
input[type=checkbox]:nth-of-type(1) + input + input + :checked + :checked + :checked ~ .done button[type=reset] {
  background: #BDA604;
}
input[type=checkbox]:nth-of-type(1) + input + input + :checked + :checked + :checked ~ .tie,
input[type=checkbox]:nth-of-type(1) + input + input + :checked + :checked + :checked ~ .turn {
  display: none !important;
}
input[type=checkbox]:nth-of-type(1) + input + input + input + input + input + :checked + :checked + :checked ~ .done {
  box-shadow: 0 0 0 10px #A8;
  border: 1px solid #666666;
  background: #FBEA67;
  color: #7A6B03;
  display: flex;
}
input[type=checkbox]:nth-of-type(1) + input + input + input + input + input + :checked + :checked + :checked ~ .done .winner:after {
  content: "x";
  color: #7A6B03;
}
input[type=checkbox]:nth-of-type(1) + input + input + input + input + input + :checked + :checked + :checked ~ .done button[type=reset] {
  background: #BDA604;
}
input[type=checkbox]:nth-of-type(1) + input + input + input + input + input + :checked + :checked + :checked ~ .tie,
input[type=checkbox]:nth-of-type(1) + input + input + input + input + input + :checked + :checked + :checked ~ .turn {
  display: none !important;
}

/**
 * |||
 */
input[type=checkbox]:nth-of-type(1):checked + input + input + :checked + input + input + :checked ~ .done {
  box-shadow: 0 0 0 10px #A8;
  border: 1px solid #666666;
  background: #FBEA67;
  color: #7A6B03;
  display: flex;
}
input[type=checkbox]:nth-of-type(1):checked + input + input + :checked + input + input + :checked ~ .done .winner:after {
  content: "x";
  color: #7A6B03;
}
input[type=checkbox]:nth-of-type(1):checked + input + input + :checked + input + input + :checked ~ .done button[type=reset] {
  background: #BDA604;
}
input[type=checkbox]:nth-of-type(1):checked + input + input + :checked + input + input + :checked ~ .tie,
input[type=checkbox]:nth-of-type(1):checked + input + input + :checked + input + input + :checked ~ .turn {
  display: none !important;
}
input[type=checkbox]:nth-of-type(1) + :checked + input + input + :checked + input + input + :checked ~ .done {
  box-shadow: 0 0 0 10px #A8;
  border: 1px solid #666666;
  background: #FBEA67;
  color: #7A6B03;
  display: flex;
}
input[type=checkbox]:nth-of-type(1) + :checked + input + input + :checked + input + input + :checked ~ .done .winner:after {
  content: "x";
  color: #7A6B03;
}
input[type=checkbox]:nth-of-type(1) + :checked + input + input + :checked + input + input + :checked ~ .done button[type=reset] {
  background: #BDA604;
}
input[type=checkbox]:nth-of-type(1) + :checked + input + input + :checked + input + input + :checked ~ .tie,
input[type=checkbox]:nth-of-type(1) + :checked + input + input + :checked + input + input + :checked ~ .turn {
  display: none !important;
}
input[type=checkbox]:nth-of-type(1) + input + :checked + input + input + :checked + input + input + :checked ~ .done {
  box-shadow: 0 0 0 10px #A8;
  border: 1px solid #666666;
  background: #FBEA67;
  color: #7A6B03;
  display: flex;
}
input[type=checkbox]:nth-of-type(1) + input + :checked + input + input + :checked + input + input + :checked ~ .done .winner:after {
  content: "x";
  color: #7A6B03;
}
input[type=checkbox]:nth-of-type(1) + input + :checked + input + input + :checked + input + input + :checked ~ .done button[type=reset] {
  background: #BDA604;
}
input[type=checkbox]:nth-of-type(1) + input + :checked + input + input + :checked + input + input + :checked ~ .tie,
input[type=checkbox]:nth-of-type(1) + input + :checked + input + input + :checked + input + input + :checked ~ .turn {
  display: none !important;
}

/**
 * X
 **/
input[type=checkbox]:nth-of-type(1):checked + input + input + input + :checked + input + input + input + :checked ~ .done {
  box-shadow: 0 0 0 10px #A8;
  border: 1px solid #666666;
  background: #FBEA67;
  color: #7A6B03;
  display: flex;
}
input[type=checkbox]:nth-of-type(1):checked + input + input + input + :checked + input + input + input + :checked ~ .done .winner:after {
  content: "x";
  color: #7A6B03;
}
input[type=checkbox]:nth-of-type(1):checked + input + input + input + :checked + input + input + input + :checked ~ .done button[type=reset] {
  background: #BDA604;
}
input[type=checkbox]:nth-of-type(1):checked + input + input + input + :checked + input + input + input + :checked ~ .tie,
input[type=checkbox]:nth-of-type(1):checked + input + input + input + :checked + input + input + input + :checked ~ .turn {
  display: none !important;
}
input[type=checkbox]:nth-of-type(1) + input + :checked + input + :checked + input + :checked ~ .done {
  box-shadow: 0 0 0 10px #A8;
  border: 1px solid #666666;
  background: #FBEA67;
  color: #7A6B03;
  display: flex;
}
input[type=checkbox]:nth-of-type(1) + input + :checked + input + :checked + input + :checked ~ .done .winner:after {
  content: "x";
  color: #7A6B03;
}
input[type=checkbox]:nth-of-type(1) + input + :checked + input + :checked + input + :checked ~ .done button[type=reset] {
  background: #BDA604;
}
input[type=checkbox]:nth-of-type(1) + input + :checked + input + :checked + input + :checked ~ .tie,
input[type=checkbox]:nth-of-type(1) + input + :checked + input + :checked + input + :checked ~ .turn {
  display: none !important;
}

/**
 * ---
 **/
input[type=checkbox]:nth-of-type(10):checked + :checked + :checked ~ .done {
  box-shadow: 0 0 0 10px #E9F3DA;
  border: 1px solid #666666;
  background: #D6E9BC;
  color: #587B28;
  display: flex;
}
input[type=checkbox]:nth-of-type(10):checked + :checked + :checked ~ .done .winner:after {
  content: "o";
  color: #587B28;
}
input[type=checkbox]:nth-of-type(10):checked + :checked + :checked ~ .done button[type=reset] {
  background: #95C653;
}
input[type=checkbox]:nth-of-type(10):checked + :checked + :checked ~ .tie,
input[type=checkbox]:nth-of-type(10):checked + :checked + :checked ~ .turn {
  display: none !important;
}
input[type=checkbox]:nth-of-type(10) + input + input + :checked + :checked + :checked ~ .done {
  box-shadow: 0 0 0 10px #E9F3DA;
  border: 1px solid #666666;
  background: #D6E9BC;
  color: #587B28;
  display: flex;
}
input[type=checkbox]:nth-of-type(10) + input + input + :checked + :checked + :checked ~ .done .winner:after {
  content: "o";
  color: #587B28;
}
input[type=checkbox]:nth-of-type(10) + input + input + :checked + :checked + :checked ~ .done button[type=reset] {
  background: #95C653;
}
input[type=checkbox]:nth-of-type(10) + input + input + :checked + :checked + :checked ~ .tie,
input[type=checkbox]:nth-of-type(10) + input + input + :checked + :checked + :checked ~ .turn {
  display: none !important;
}
input[type=checkbox]:nth-of-type(10) + input + input + input + input + input + :checked + :checked + :checked ~ .done {
  box-shadow: 0 0 0 10px #E9F3DA;
  border: 1px solid #666666;
  background: #D6E9BC;
  color: #587B28;
  display: flex;
}
input[type=checkbox]:nth-of-type(10) + input + input + input + input + input + :checked + :checked + :checked ~ .done .winner:after {
  content: "o";
  color: #587B28;
}
input[type=checkbox]:nth-of-type(10) + input + input + input + input + input + :checked + :checked + :checked ~ .done button[type=reset] {
  background: #95C653;
}
input[type=checkbox]:nth-of-type(10) + input + input + input + input + input + :checked + :checked + :checked ~ .tie,
input[type=checkbox]:nth-of-type(10) + input + input + input + input + input + :checked + :checked + :checked ~ .turn {
  display: none !important;
}

/**
 * |||
 */
input[type=checkbox]:nth-of-type(10):checked + input + input + :checked + input + input + :checked ~ .done {
  box-shadow: 0 0 0 10px #E9F3DA;
  border: 1px solid #666666;
  background: #D6E9BC;
  color: #587B28;
  display: flex;
}
input[type=checkbox]:nth-of-type(10):checked + input + input + :checked + input + input + :checked ~ .done .winner:after {
  content: "o";
  color: #587B28;
}
input[type=checkbox]:nth-of-type(10):checked + input + input + :checked + input + input + :checked ~ .done button[type=reset] {
  background: #95C653;
}
input[type=checkbox]:nth-of-type(10):checked + input + input + :checked + input + input + :checked ~ .tie,
input[type=checkbox]:nth-of-type(10):checked + input + input + :checked + input + input + :checked ~ .turn {
  display: none !important;
}
input[type=checkbox]:nth-of-type(10) + :checked + input + input + :checked + input + input + :checked ~ .done {
  box-shadow: 0 0 0 10px #E9F3DA;
  border: 1px solid #666666;
  background: #D6E9BC;
  color: #587B28;
  display: flex;
}
input[type=checkbox]:nth-of-type(10) + :checked + input + input + :checked + input + input + :checked ~ .done .winner:after {
  content: "o";
  color: #587B28;
}
input[type=checkbox]:nth-of-type(10) + :checked + input + input + :checked + input + input + :checked ~ .done button[type=reset] {
  background: #95C653;
}
input[type=checkbox]:nth-of-type(10) + :checked + input + input + :checked + input + input + :checked ~ .tie,
input[type=checkbox]:nth-of-type(10) + :checked + input + input + :checked + input + input + :checked ~ .turn {
  display: none !important;
}
input[type=checkbox]:nth-of-type(10) + input + :checked + input + input + :checked + input + input + :checked ~ .done {
  box-shadow: 0 0 0 10px #E9F3DA;
  border: 1px solid #666666;
  background: #D6E9BC;
  color: #587B28;
  display: flex;
}
input[type=checkbox]:nth-of-type(10) + input + :checked + input + input + :checked + input + input + :checked ~ .done .winner:after {
  content: "o";
  color: #587B28;
}
input[type=checkbox]:nth-of-type(10) + input + :checked + input + input + :checked + input + input + :checked ~ .done button[type=reset] {
  background: #95C653;
}
input[type=checkbox]:nth-of-type(10) + input + :checked + input + input + :checked + input + input + :checked ~ .tie,
input[type=checkbox]:nth-of-type(10) + input + :checked + input + input + :checked + input + input + :checked ~ .turn {
  display: none !important;
}

/**
 * X
 **/
input[type=checkbox]:nth-of-type(10):checked + input + input + input + :checked + input + input + input + :checked ~ .done {
  box-shadow: 0 0 0 10px #E9F3DA;
  border: 1px solid #666666;
  background: #D6E9BC;
  color: #587B28;
  display: flex;
}
input[type=checkbox]:nth-of-type(10):checked + input + input + input + :checked + input + input + input + :checked ~ .done .winner:after {
  content: "o";
  color: #587B28;
}
input[type=checkbox]:nth-of-type(10):checked + input + input + input + :checked + input + input + input + :checked ~ .done button[type=reset] {
  background: #95C653;
}
input[type=checkbox]:nth-of-type(10):checked + input + input + input + :checked + input + input + input + :checked ~ .tie,
input[type=checkbox]:nth-of-type(10):checked + input + input + input + :checked + input + input + input + :checked ~ .turn {
  display: none !important;
}
input[type=checkbox]:nth-of-type(10) + input + :checked + input + :checked + input + :checked ~ .done {
  box-shadow: 0 0 0 10px #E9F3DA;
  border: 1px solid #666666;
  background: #D6E9BC;
  color: #587B28;
  display: flex;
}
input[type=checkbox]:nth-of-type(10) + input + :checked + input + :checked + input + :checked ~ .done .winner:after {
  content: "o";
  color: #587B28;
}
input[type=checkbox]:nth-of-type(10) + input + :checked + input + :checked + input + :checked ~ .done button[type=reset] {
  background: #95C653;
}
input[type=checkbox]:nth-of-type(10) + input + :checked + input + :checked + input + :checked ~ .tie,
input[type=checkbox]:nth-of-type(10) + input + :checked + input + :checked + input + :checked ~ .turn {
  display: none !important;
}

.done {
  align-items: center;
  bottom: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
}
.done .lead {
  font-size: 16px;
}
.done .winner {
  font-size: 100px;
  font-weight: 700;
  text-transform: uppercase;
}

/**
 * Tie
 */
.tie {
  align-items: center;
  background: linear-gradient(45deg, #D6E9BC 0%, #D6E9BC 50%, #FBEA67 50.1%);
  bottom: 0;
  color: black;
  display: none;
  flex-direction: column;
  font-size: 30px;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 50;
}
.tie button[type=reset] {
  background: #DB1F26;
  margin: 15px 0 0;
}

/**
 * Tie
 **/
input[type=checkbox]:checked ~ input[type=checkbox]:checked ~ input[type=checkbox]:checked ~ input[type=checkbox]:checked ~ input[type=checkbox]:checked ~ input[type=checkbox]:checked ~ input[type=checkbox]:checked ~ input[type=checkbox]:checked ~ input[type=checkbox]:checked ~ .tie {
  display: flex;
}/* End custom CSS */