tictacstyle.css

@import url('https://fonts.googleapis.com/css2?family=Dongle&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

:root {
  --clr-background: #192a32;
  --clr-cellColor: #1f3540;
  --clr-oMarker: #f2b237;
  --clr-oMarkerLighten: #f9e0b1;
  --clr-xMarker: #31c3be;
  --clr-xMarkerLighten: #9ee6e4;
  --clr-refreshCell: #a8bec9;

  --cell-titleHeight: 40px;
  --cell-size: 100px;
  --marking-size: calc(var(--cell-size) * 0.7);

  --clr-boxShadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.75);

  --fs-font:'Dongle', sans-serif;
}


/* -----------------Setting up the board ad round title----------- */

.board {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
  flex-direction: column;
  background-color: var(--clr-background);
}

.rounds{
 color: var(--clr-xMarker);
 font-size: 4rem;
 font-weight: bold;
 font-family: var(--fs-font);
 padding: 1.5rem 0;
}

/* ---------------------------------------------------------------- */

/* --Titlebar Designing-- */

.titlebar {
  /* position: relative; */

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  gap: 2rem;
}

.titlebar .title-cells {
  height: var(--cell-titleHeight);
  width: var(--cell-size);
  box-shadow: var(--clr-boxShadow);
}

.titlebar .restart {
  color: var(--clr-refreshCell);
  background-color: var(--clr-cellColor);
  display: flex;
  border-radius: 1rem;
  width: 4rem;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
  cursor: pointer;
}

.titlebar .restartNewGame {
  color: var(--clr-cellColor);
  background-color: var(--clr-refreshCell);
  display: flex;
  border-radius: 1rem;
  width: 4rem;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
  cursor: pointer;
}

.titlebar .markers {
  display: flex;

  justify-items: center;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: auto;
  padding: 0.6rem;
  border-radius: 1rem;
}

.titlebar .markers .fa-times {
  color: var(--clr-xMarker);
  font-weight: bolder;
  font-size: 1.5rem;
}

.titlebar .markers .fa-circle {
  color: var(--clr-oMarker);

  font-size: 1.5rem;
}

.titlebar .turn-show {
  background-color: var(--clr-cellColor);
  border-radius: 1rem;
  width: var(--cell-size);
  display: flex;
  justify-items: center;
  align-items: center;
  justify-content: center;
  color: var(--clr-refreshCell);
  font-weight: bolder;
  font-family: var(--fs-font);
  font-size: 1.5rem;
}

/* --------------------------------------------------------------------------------- */

/* 9 x 9 cell designing ------------------------------------------*/

.board-cells {
  padding-top: 2rem;
  gap: 0.7rem;
  display: grid;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  grid-template-columns: repeat(3, auto);
}

.cell {
  height: var(--cell-size);
  width: var(--cell-size);
  box-shadow: var(--clr-boxShadow);
  border-radius: 1rem;
  background-color: var(--clr-cellColor);
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}

.cell:hover {
  cursor: pointer;
}

.cell.x:hover,
.cell.circle:hover {
  cursor: not-allowed;
}

/* Creating X-mark ----------------------------------------------*/

.cell.x::before,
.cell.x::after {
  background-color: var(--clr-xMarker);
}
.board-cells.x .cell:not(.x):not(.circle):hover::before,
.board-cells.x .cell:not(.x):not(.circle):hover::after {
  background-color: var(--clr-xMarkerLighten);
}

.cell.x::before,
.cell.x::after,
.board-cells.x .cell:not(.x):not(.circle):hover::before,
.board-cells.x .cell:not(.x):not(.circle):hover::after {
  content: "";
  position: absolute;

  width: calc(var(--marking-size) * 0.15);
  border-radius: 1rem;
  height: var(--marking-size);
}

.cell.x::before,
.board-cells.x .cell:not(.x):not(.circle):hover::before {
  transform: rotate(45deg);
}

.cell.x::after,
.board-cells.x .cell:not(.x):not(.circle):hover::after {
  transform: rotate(-45deg);
}

/* Creating O Mark --------------------------------------*/

.cell.circle::before,
.cell.circle::after,
.board-cells.circle .cell:not(.x):not(.circle):hover::before,
.board-cells.circle .cell:not(.x):not(.circle):hover::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: var(--clr-oMarker);
}

.cell.circle::before,
.board-cells.circle .cell:not(.x):not(.circle):hover::before {
  width: var(--marking-size);
  height: var(--marking-size);
}

.board-cells.circle .cell:not(.x):not(.circle):hover::before,
.board-cells.circle .cell:not(.x):not(.circle):hover::after,
.board-cells.circle .cell:not(.x):not(.circle):hover::before {
  background-color: var(--clr-oMarkerLighten);
}

.cell.circle::after,
.board-cells.circle .cell:not(.x):not(.circle):hover::after {
  width: calc(var(--marking-size) * 0.7);
  height: calc(var(--marking-size) * 0.7);
  background-color: var(--clr-cellColor);
}

/* -------------------------------------------------------------- */
/* Designing the footer Score Card */

.scorebar {
  display: grid;
  grid-template-columns: repeat(3, auto);
  padding-top: 2rem;
  gap: 0.9rem;
  justify-content: center;
  align-content: center;
  align-items: center;
  justify-items: center;
  text-align: center;
}

.scorebar .score {
  height: 3rem;
  border-radius: 1rem;
  width: var(--cell-size);
}

.scorebar .x-counter {
  background-color: var(--clr-xMarker);
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  justify-items: center;
  flex-direction: column;
  font-family: var(--fs-font);
  font-size: 1.2rem;
  font-weight: bold;
}

.scorebar .tie-counter {
  background-color: var(--clr-refreshCell);
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  justify-items: center;
  flex-direction: column;
  font-family: var(--fs-font);
  font-size: 1.2rem;
  font-weight: bold;
}

.scorebar .o-counter {
  background-color: var(--clr-oMarker);
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  justify-items: center;
  flex-direction: column;
  font-family: var(--fs-font);
  font-size: 1.2rem;
  font-weight: bold;
}

/* -------Designing Message Display------------------------------ */

.message{
 display: none;
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background-color: hsl(0, 0%, 0%);
 opacity: 0.9;
 justify-content: center;
 align-items: center;
 color: white;
 font-size: 3rem;
 flex-direction: column;
}

.message button{
 font-size: 3rem;
 width: 100%;
 border-radius: 1rem;
 cursor: pointer;
 font-family: var(--fs-font);
 border: none;
 font-weight: bolder;
 transition: all 0.3s ease-in-out;
}

#quit{
 background-color: var(--clr-refreshCell);
}

#next-round{
 background-color: var(--clr-oMarker);
}

.message div{
 padding: 2rem 0;
 font-family: var(--fs-font);
 color: white;
}

#quit:hover{
 background-color: var(--clr-xMarkerLighten);
 color: var(--clr-background);
}


.message.show{
 display: flex;
}