@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=ZCOOL+QingKe+HuangYou&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Quicksand", sans-serif;
  font-weight: 400; }

html {
  font-size: 1vh;
  overflow: hidden; }

body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex-direction: column;
  background-color: #fdeedc;
  gap: 0; }

div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em; }

h1 {
  font-size: 8rem; }

h2 {
  font-size: 5rem; }

h3 {
  font-size: 3.5rem; }

h4 {
  font-size: 3rem; }

h5 {
  font-size: 2.5rem; }

h6 {
  font-size: 2rem; }

p {
  font-size: 1.8rem; }

strong {
  font-weight: 600; }

button, #main-menu #mainmenu-buttons button {
  font-family: "ZCOOL QingKe HuangYou", cursive;
  font-size: 2.5rem;
  padding: 1rem 2rem;
  border: 1px solid gray;
  border-radius: 1rem;
  background-color: white;
  box-shadow: 2.5px 2.5px 5px 1px rgba(71, 71, 71, 0.644); }
  button:active, #main-menu #mainmenu-buttons button:active {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    transform: translateY(0.1em); }
  button:disabled, #main-menu #mainmenu-buttons button:disabled {
    background-color: gray;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    transform: translateY(0.1em); }
  button:disabled:active, #main-menu #mainmenu-buttons button:disabled:active {
    transform: translateY(0); }
  button img, #main-menu #mainmenu-buttons button img {
    width: 5rem; }

table {
  display: table;
  height: 50vh;
  width: 50vh;
  border-collapse: collapse; }
  table img {
    width: 80%; }
  table td {
    display: table-cell;
    text-align: center;
    width: 30%;
    height: 30%;
    border: 2px solid black;
    background-color: white; }
    table td.empty:hover {
      background-color: #fdeedc; }
    table td.empty.active {
      background-color: #ffd8a9; }

hr {
  width: 80%;
  height: 0%;
  border-top: 1px solid grey; }

.full-page-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  max-height: 100vh;
  max-width: 100vw;
  gap: 0; }

.two-page-level {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex-direction: row;
  align-self: flex-start;
  gap: 0; }

.card, #game-area, #cover-baby, #popup-message-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex-direction: column;
  width: 80%;
  height: 80%;
  border: 1px solid gray;
  border-radius: 2rem;
  box-shadow: 5px 5px 4px 4px rgba(71, 71, 71, 0.644);
  background-color: white; }

#brand-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex-direction: row;
  width: 100%;
  height: 10%;
  justify-content: flex-start;
  font-family: "ZCOOL QingKe HuangYou", cursive;
  background-color: #e38b29;
  min-height: 10vh; }

#heading {
  font-family: "ZCOOL QingKe HuangYou", cursive; }

#landing-page {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  width: 100%;
  height: 90%;
  flex-direction: column; }

#main-menu {
  justify-content: space-evenly;
  flex-direction: row; }
  #main-menu > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    width: 40%;
    height: 100%;
    flex-direction: column; }
  #main-menu #titlecard {
    flex-direction: column;
    width: 100%;
    height: 100%; }
    #main-menu #titlecard a#credits-btn {
      color: #c7710e; }
      #main-menu #titlecard a#credits-btn:hover {
        cursor: pointer;
        color: #f1a661; }
    #main-menu #titlecard img {
      width: 60%;
      height: auto; }
  #main-menu #mainmenu-buttons button {
    background-image: linear-gradient(#f1a661, #ffd8a9);
    height: 7rem;
    width: 80%; }
    #main-menu #mainmenu-buttons button:hover {
      background-image: linear-gradient(#fdeedc, #ffd8a9); }

#game-mode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  width: 100%;
  height: auto;
  flex-direction: column;
  justify-content: flex-start; }
  #game-mode.expand {
    width: 100%;
    height: 35%; }

#play-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex-direction: column;
  width: 80%;
  height: auto; }

#instructions {
  background-color: #e38b29; }
  #instructions .anim-start {
    position: relative; }
  #instructions #anim-cursor {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%; }
  #instructions #xo-board-ex .anim-hover {
    background-color: #fdeedc; }
  #instructions #xo-board-ex .anim-click {
    background-color: #ffd8a9; }

#instructions-anim {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex-direction: row;
  gap: 5em; }

#anim-window {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex-direction: column;
  position: relative; }

#instruction-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.5vh 1vw;
  border-radius: 0.25em;
  font-size: 3em; }
  #instruction-text div {
    padding: 1rem 2rem;
    border-radius: 1.5rem; }
    #instruction-text div.active {
      background-color: #f1a661; }

#gameboard {
  position: relative; }

#game-area {
  flex-direction: row;
  width: 95%;
  height: 95%; }
  #game-area > div {
    flex: 1 1 0;
    margin: 3rem; }

#sidebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  justify-content: space-around;
  width: 40%;
  height: 80%;
  flex-direction: column;
  font-size: 3em;
  padding: 1em;
  gap: 1em;
  border-right: 1px solid rgba(53, 53, 53, 0.644);
  margin-right: 0; }

#turn-status {
  gap: 3em; }

#circle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  position: relative;
  width: 50%;
  height: 30%; }

#timer-text {
  text-align: center;
  position: absolute;
  font-size: 2em; }

.score-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  height: 25%;
  border: 1px solid rgba(29, 29, 29, 0.5); }

#score-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex-direction: column;
  width: 90%;
  height: 50%;
  gap: 0; }

#status-title {
  flex-direction: column;
  border: 1px solid gray;
  border-radius: 2rem 2rem 0 0;
  gap: 0; }

#status-title {
  border-radius: 1rem 1rem 0 0;
  border-bottom: 0; }

#status-p2 {
  border-radius: 0 0 1rem 1rem;
  border-top: 0; }

.tally {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex-direction: row;
  width: 50%;
  height: auto;
  gap: 0; }
  .tally-box {
    width: 20%;
    height: auto;
    padding-top: 20%;
    border: 1px solid rgba(53, 53, 53, 0.644); }
    .tally-box:first-of-type {
      border-radius: 0.25em 0 0 0.25em; }
    .tally-box:last-of-type {
      border-radius: 0 0.25em 0.25em 0; }

#board {
  width: 40%;
  height: 80%;
  position: relative; }

#accenno-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(29, 29, 29, 0.5);
  border-radius: 2rem; }

#cover-baby {
  flex-direction: column;
  width: 50%;
  height: 30%;
  text-align: center; }
  #cover-baby #start-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    flex-direction: column; }
  #cover-baby #waiting {
    font-size: 2em; }
  #cover-baby #new-round {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    flex-direction: column; }
  #cover-baby #ending-turn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    flex-direction: column; }

#popup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  height: 100vh;
  width: 100vw;
  position: absolute;
  background-color: rgba(71, 71, 71, 0.247); }
  #popup-message-box {
    width: 30%;
    height: 30%;
    padding: 2em 5em;
    gap: 2em; }

#logo-img {
  height: 80%; }

#blinking-header {
  height: 80%;
  margin: 0 1rem; }

#accenno-cover-ex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(29, 29, 29, 0.5); }

#waiting-ex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex-direction: column;
  font-size: 2em;
  padding: 1em 2em; }

.ui-tooltip {
  background-color: black;
  color: white;
  font-size: 1.75rem;
  width: 20em;
  border-radius: 0.5em; }

#settings {
  justify-content: space-around; }
  #settings #settings-box {
    justify-content: space-evenly;
    flex-direction: row;
    width: 80%;
    height: 70%;
    flex-wrap: wrap; }
    #settings #settings-box > button, #settings #main-menu #mainmenu-buttons #settings-box > button {
      flex: 0 0 20%; }
    #settings #settings-box #themes-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1em;
      flex-direction: column;
      width: 40%;
      height: 70%; }
      #settings #settings-box #themes-box #themes {
        flex-direction: column;
        width: 75%;
        height: 80%;
        gap: 1em; }
        #settings #settings-box #themes-box #themes > div {
          width: 100%;
          height: 15%; }
          #settings #settings-box #themes-box #themes > div button {
            width: 70%;
            height: 100%; }
          #settings #settings-box #themes-box #themes > div img {
            width: auto;
            height: 70%;
            border: 1px solid gray;
            border-radius: 0.75em;
            padding: 2.5%; }
    #settings #settings-box #other-settings {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1em;
      width: 40%;
      height: 70%;
      flex-direction: column; }
      #settings #settings-box #other-settings #rounds-label {
        width: 50%;
        height: 100%; }

.input-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: 15%;
  gap: 0; }
  .input-group label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    width: 30%;
    height: 100%;
    background-color: #636363;
    color: white;
    font-weight: 500;
    align-content: center;
    border: 1px solid gray;
    box-sizing: border-box;
    border-right: 0;
    border-radius: 0.75em 0 0 0.75em;
    font-size: 1.7rem; }
  .input-group input {
    width: 70%;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid gray;
    border-radius: 0 0.75em 0.75em 0;
    padding: 1em;
    font-size: 2em; }
    .input-group input:focus {
      outline: 0;
      border: 2px solid black; }
  .input-group select {
    width: 50%;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid gray;
    border-radius: 0 0.75em 0.75em 0;
    padding: 1em;
    font-size: 1.7em; }

.sunmoon {
  background-color: #000; }
  .sunmoon #gameboard {
    background: url("../images/background/sunmoon-game-bg.jpg") center/cover no-repeat; }
    .sunmoon #gameboard #board {
      background: url("../images/background/sunmoon-game-bg.jpg") center/cover no-repeat; }
      .sunmoon #gameboard #board td {
        border: 2px solid white;
        background-color: transparent; }
        .sunmoon #gameboard #board td.empty:hover {
          background-color: #8fa3ff; }
        .sunmoon #gameboard #board td.empty.active {
          background-color: #4a6bff; }
  .sunmoon #instructions {
    background-color: #110050; }
    .sunmoon #instructions #xo-board-ex .anim-click {
      background-color: #4a6bff; }
    .sunmoon #instructions #xo-board-ex .anim-hover {
      background-color: #8fa3ff; }
  .sunmoon .card, .sunmoon #game-area, .sunmoon #cover-baby, .sunmoon #popup-message-box {
    box-shadow: 5px 5px 4px 4px rgba(218, 218, 218, 0.644); }
  .sunmoon #landing-section {
    background-image: url("../images/background/sunmoon-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }
    .sunmoon #landing-section #brand-top {
      background-color: #000;
      color: white; }
      .sunmoon #landing-section #brand-top #logo-img, .sunmoon #landing-section #brand-top #blinking-header {
        filter: invert(1); }
    .sunmoon #landing-section #credits-btn {
      color: #0a1752 !important; }
    .sunmoon #landing-section #mainmenu-buttons button {
      color: white;
      background-image: linear-gradient(#000, #001d9c); }
      .sunmoon #landing-section #mainmenu-buttons button:hover {
        background-image: linear-gradient(#1b3eda, #242424); }

.catdog #gameboard #board {
  background: #ffedbd url("../images/background/catdog.png") center no-repeat; }
  .catdog #gameboard #board td {
    border: 2px solid white;
    background-color: transparent; }
    .catdog #gameboard #board td.empty:hover {
      background-color: #8fa3ff; }
    .catdog #gameboard #board td.empty.active {
      background-color: #4a6bff; }

.catdog #instructions {
  background: linear-gradient(270deg, #ffb800 0%, #ff6600 100%); }
  .catdog #instructions #xo-board-ex .anim-click {
    background-color: #ffc73a; }
  .catdog #instructions #xo-board-ex .anim-hover {
    background-color: #ffe5a4; }

.catdog .card, .catdog #game-area, .catdog #cover-baby, .catdog #popup-message-box {
  background-color: #ffffffe5; }

.catdog #landing-section {
  background-image: url("../images/background/catdog.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }
  .catdog #landing-section #brand-top {
    background: linear-gradient(90deg, #ffa600, #ffd500); }
  .catdog #landing-section #title-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    flex-direction: column; }
    .catdog #landing-section #title-box #titlecard {
      width: 100%;
      height: 70%;
      flex-direction: column; }
    .catdog #landing-section #title-box #catdog-animation {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1em;
      flex-direction: row;
      gap: 0; }
      .catdog #landing-section #title-box #catdog-animation #cat {
        height: 10rem; }
      .catdog #landing-section #title-box #catdog-animation #dog {
        height: 15rem; }
  .catdog #landing-section #credits-btn {
    color: #ffa600 !important; }
  .catdog #landing-section #mainmenu-buttons button {
    color: black;
    background: linear-gradient(#ffd500, #ffa600); }
    .catdog #landing-section #mainmenu-buttons button:hover {
      background: linear-gradient(#ffd68b, #ffd500); }

.swordshield {
  background-color: #b0faa6; }
  .swordshield #gameboard #board {
    background: url("../images/background/swordshield-game-bg.jpg") center/cover no-repeat; }
    .swordshield #gameboard #board td {
      border: 2px solid white;
      background-color: transparent; }
      .swordshield #gameboard #board td.empty:hover {
        background-color: #ceecc3; }
      .swordshield #gameboard #board td.empty.active {
        background-color: #8ac873; }
  .swordshield #instructions {
    background: #65c07d; }
    .swordshield #instructions #xo-board-ex .anim-click {
      background-color: #8ac873; }
    .swordshield #instructions #xo-board-ex .anim-hover {
      background-color: #ceecc3; }
  .swordshield .card, .swordshield #game-area, .swordshield #cover-baby, .swordshield #popup-message-box {
    background-color: #ffffffe5; }
  .swordshield #landing-section #landing-page {
    background: url("../images/background/swordshield-bg.jpg") center/cover no-repeat; }
  .swordshield #landing-section #brand-top {
    background: #0b313a;
    color: white; }
    .swordshield #landing-section #brand-top img {
      filter: invert(1); }
  .swordshield #landing-section #credits-btn {
    color: #65c07d !important; }
  .swordshield #landing-section #mainmenu-buttons button {
    color: black;
    background: linear-gradient(#65c07d, #8ac873); }
    .swordshield #landing-section #mainmenu-buttons button:hover {
      background: linear-gradient(#8ac873, #ceecc3); }

.karenkevin {
  background-color: #fff; }
  .karenkevin #gameboard {
    background: #c4f1ff; }
    .karenkevin #gameboard #board {
      background: url("../images/background/karenkevin-game-bg.jpg") center/cover no-repeat; }
      .karenkevin #gameboard #board td {
        border: 2px solid black;
        background-color: transparent; }
        .karenkevin #gameboard #board td.empty:hover {
          background-color: #b0edff; }
        .karenkevin #gameboard #board td.empty.active {
          background-color: #5cd9ff; }
  .karenkevin #instructions {
    background-color: #98f0f7; }
    .karenkevin #instructions #xo-board-ex .anim-click {
      background-color: #5cd9ff; }
    .karenkevin #instructions #xo-board-ex .anim-hover {
      background-color: #b0edff; }
  .karenkevin .card, .karenkevin #game-area, .karenkevin #cover-baby, .karenkevin #popup-message-box {
    background: rgba(255, 255, 255, 0.9); }
  .karenkevin #landing-section {
    background: url("../images/background/karenkevin-bg.jpg") center/cover no-repeat; }
    .karenkevin #landing-section #brand-top {
      background: #c7e7f5;
      color: black; }
    .karenkevin #landing-section #credits-btn {
      color: #0fc7ff !important; }
    .karenkevin #landing-section #mainmenu-buttons button {
      background-image: linear-gradient(#b0edff, #0fa7ff); }
      .karenkevin #landing-section #mainmenu-buttons button:hover {
        background-image: linear-gradient(#ffffff, #b0edff); }