:root {
  --primary-color: #192a32;
  --secondary-color: #1f3540;
  --action-color: #333333;
  --text-color: #333333;
  --misc-color: #007bff;
  --shadow-color: #0f2028;
  --shadow2-color: rgba(108, 137, 153, 0.75);
  --o-option: #f2b237;
  --x-option: #31c4be;
  --border-radius: 1rem;
}

@font-face {
  font-family: "Arista20Alternate";
  src: url("./assets/fonts/Arista20AlternateRegular-jy89.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Bubbleboddy";
  src: url("./assets/fonts/BubbleboddyExtralight-z54X.ttf");
  font-weight: bold;
  font-style: normal;
}

body {
  background-color: var(--primary-color);
}
h1,
h2 {
  color: white;
}
h1 {
  font-family: "Arista20Alternate";
  /* font-weight: bold; */
}
h2 {
  font-family: "Bubbleboddy";
  /* font-weight: bold; */
}
.game-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1rem;
  justify-items: center;
  /* border-radius: 1rem; */
  /* background-color: red */
}

.btn-game {
  color: var(--x-option);
  /* height: 2rem; */
  /* width: 6rem; */
  background-color: var(--secondary-color);
  border: none;
  padding: 0.6rem 0.8rem;
  border-radius: calc(var(--border-radius) / 2);
  box-shadow: 0px 0.3rem 0px 0px var(--shadow-color);
}
.btn-quit {
  font-weight: bold;
  background-color: var(--x-option);
  color: var(--text-color);
  box-shadow: 0px 0.3rem 0px 0px var(--shadow2-color);
}
.btn-next-round {
  font-weight: bold;

  background-color: var(--o-option);
  color: var(--text-color);
  box-shadow: 0px 0.3rem 0px 0px #99772c;
}
.card-action {
  background-color: var(--secondary-color);
  color: var(--text-color);
  font-family: "Arista20Alternate";
  height: 6rem;
  width: 6rem;
  padding: 0px;
  border-radius: var(--border-radius);
  button {
    border: none;
    background-color: var(--action-color);
    border-radius: var(--border-radius);
    padding: 0px;
    height: 100%;
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0px 0.6rem 0px 0px rgba(15, 32, 40, 0.75);
    &.win {
      &:has(span.o-move) {
        background-color: var(--o-option);
      }
      &:has(span.x-move) {
        background-color: var(--x-option);
      }
      span:is(.x-move, .o-move) {
        color: var(--action-color);
      }
    }
    /* color: black; */
    span {
      /* display: flex; */
      padding-top: 1rem;
      font-size: 5.5rem;
      line-height: normal;
      /* color: red; */
      /* height: 100%;
      width: 100%; */
      /* height: 5.5rem;
      width:  5.5rem; */
      /* text-align: center; */
      /* vertical-align: baseline; */
      /* height: 4rem; */
      /* display: inline-block; */
      /* border: 1px solid var(--text-color); */
      &.o-move {
        color: var(--o-option);
      }
      &.x-move {
        color: var(--x-option);
      }
    }
  }
}

.card-action:hover {
  background-color: var(--misc-color);
  color: var(--text-color);
  border-radius: var(--border-radius);
}

.card-action {
  background-color: var(--secondary-color);
}
.info {
  font-family: "Arista20Alternate";
  font-size: 2rem;
  line-height: normal;
  .x-info {
    color: var(--x-option);
  }
  .o-info {
    color: var(--o-option);
  }
}
.panel-game {
  font-family: "Arista20Alternate";
  /* font-size: 1rem; */
  display: flex;
  justify-content: space-between;
  align-items: end;
  .restart button {
    background-color: var(--x-option);
    padding: 0rem 0.7rem;
    border-radius: calc(var(--border-radius) / 2);
    border: none;
    box-shadow: 0px 0.3rem 0px 0px var(--shadow2-color);
    svg {
      width: 1rem;
      height: 1rem;
      fill: var(--text-color);
    }
  }

  .current-player {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Bubbleboddy";
    font-size: 1rem;
    font-weight: bold;
    line-height: normal;
    button {
      color: var(--x-option);
      height: 2rem;
      width: 6rem;
      background-color: var(--secondary-color);
      border: none;
      padding: 0rem 0.7rem;
      border-radius: calc(var(--border-radius) / 2);
      box-shadow: 0px 0.3rem 0px 0px var(--shadow-color);

      &.x-turn {
        color: var(--x-option);
      }
      &.o-turn {
        color: var(--o-option);
      }
      span {
        /* font-size: 2rem; */
        font-size: 1.2rem;
        line-height: normal;
        &.current-turn {
          font-family: "Arista20Alternate";
        }
      }
    }
  }
}

.table-score {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text-color);
  > div {
    width: calc(100%);
    background-color: var(--x-option);
    border-radius: calc(var(--border-radius) / 2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0.3rem 0px 0px var(--shadow-color);
    &.playerB {
      background-color: var(--o-option);
    }
    p {
      font-family: "Roboto";
      font-size: 0.8rem;
      padding: 0.2rem 0rem 0rem 0rem;
      margin: 0px;
      /* padding: 0px; */
    }
    span {
      font-family: "Roboto";
      font-size: 1rem;
      font-weight: bold;
      padding: 0rem 0rem 0.2rem 0rem;

      line-height: normal;
      margin: 0px;
    }
  }
}

.options-game {
  font-family: "Roboto";
  text-align: center;
  > div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* background-color: red; */
    padding: 1rem;
    > button {
      padding: 0.5rem;
      border-radius: calc(var(--border-radius) / 2);
      border: none;
      background-color: var(--o-option);
      box-shadow: 0px 0.3rem 0px 0px #99772c;
      font-weight: bold;
      &:nth-last-child(1) {
        background-color: var(--x-option);
        box-shadow: 0px 0.3rem 0px 0px var(--shadow2-color);
      }
    }
  }
  .card-options {
    color: var(--x-option);
    background-color: var(--secondary-color);
    padding: 1rem;
    margin-bottom: 1rem;
    .choise-mark {
      display: flex;
      justify-content: space-between;
      background-color: var(--primary-color);
      border-radius: calc(var(--border-radius) / 2);
      padding: 0.3rem;
      button {
        width: 100%;

        /* padding: 2rem; */
        border: none;
        font-family: "Arista20Alternate";
        font-size: 1.5rem;
        border-radius: calc(var(--border-radius) / 2);
        background-color: var(--primary-color);
        color: var(--x-option);
        &.active {
          color: var(--primary-color);
          background-color: var(--x-option);
        }
      }
    }
  }
}

#exampleModal,
#modalRestart {
  font-family: "Roboto";
  color: var(--x-option);
  font-size: 3rem;
  &.show {
    display: flex;
    background-color: rgba(0, 0, 0, 0.5);
  }
  button {
    font-size: 1rem;
  }
  .modal-dialog {
    max-width: 100vw;
    align-content: center;
    .modal-content {
      align-items: center;
      text-align: center;
      width: 100vw;
      border-radius: 0px;
      background-color: var(--primary-color);

      .modal-body {
        &.o-win {
          color: var(--o-option);
        }
        &.x-win {
          color: var(--x-option);
        }

        p {
          font-size: 1.5rem;
          &:nth-child(2) {
            font-size: 3.2rem;
            span {
              font-family: "Arista20Alternate";
              font-size: 4rem;
            }
          }
        }
      }
    }
  }
}

@media (min-width: 576px) {
  /* body {
    background-color: red !important;
  } */
}

@media (min-width: 576px) {
  /* body {
    background-color: red !important;
  } */
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /* body {
    background-color: blue !important;
  } */
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* body {
    background-color: yellow !important;
  } */
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}