* {
      padding: 0px;
      margin: 0px;
      box-sizing: border-box;
      text-transform: uppercase;
      transition: all 0.5s;
}

body{
      background-color: #1A2A33;
      color: #1A2A33;
      font-family: Outfit, Arial, Helvetica, sans-serif;
      font-size: 14px;
      letter-spacing: 0.8px;
}

main{
      height: 100vh;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
}

h1{
      font-size: 40px;
      letter-spacing: 2.5px;
}


@media only screen and (max-width: 560px){
      h1 {
            font-size: 24px;
      }
}


/* NEW GAME MENU */
#new-game-section {
      color: #A8BFC9;
      width: 460px;
      height: 471px;
      display: grid;
      grid-template-columns: 1fr;
}

.logo-container {
      text-align: center;
}

#select-player-mark {
      background-color: #1F3641;
      height: 199px;
      margin: 40px 0px;
      border-radius: 15px;
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
      align-items: center;
      box-shadow: 0px 6px #142329;
}

.pick-player-p {
      font-size: 16px;
      font-weight:bold;
      letter-spacing: 1px;
}

#mark-selector{
      background-color: #1A2A33;
      width: 412px;
      height: 72px;
      padding: 9px 8px;
      border-radius: 10px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-content: center;
}

.mark{
      width: 100%;
      height: 54px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
}

.mark:hover {
      cursor: pointer;
}

.new-game-btn {
      height: 61px;
      color: #1A2A33;
      border-radius: 15px;
      font-size: 20px;
      font-weight:bold;
      border: none;
      letter-spacing: 1.25px;
}

.new-game-btn:hover {
      cursor: pointer;
}

.select-CPU-btn, 
.next-round-btn{
      background-color: #F2B137;
      margin-bottom: 20px;
      box-shadow: 0px 6px #f2b1379e;
}

.select-CPU-btn:hover,
.next-round-btn:hover{
      background-color: #FFC860;
}

.select-2player-btn {
      background-color: #31C3BD;
      box-shadow: 0px 6px #31c3be93;
}

.select-2player-btn:hover{
      background-color: #65E9E4;
}


@media only screen and (max-width:560px) {
      #new-game-section {
            width: 327px;
            height: 429px;
      }

      #mark-selector{
            width: 279px;
      }
}


/* GAME BOARD */
#game-board {
      width: 460px;
      height: 623px;
      display: none;
}

.game-header{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr ;
      column-gap: 20px;
      align-items: center;
}

.game-header .logo-container {
      justify-self: start;
}

.turn-display{
      background-color:#1F3641;
      color:#A8BFC9;
      font-weight: bold;
      width: 140px;
      height: 48px;
      border-radius: 10px;
      font-size: 16px;
      box-shadow: 0px 4px #142329;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
}

.turn {
      display: flex;
      align-items: center;
}

.turn-O {
      display: none;
}

.restart-btn{
      background-color: #A8BFC9;
      width: 52px;
      height: 50px;
      border-radius: 10px;
      justify-self: end;
      border: none;
      box-shadow: 0px 4px #a8bfc9a0;
}

.restart-btn:hover,
.quit-btn:hover {
      background-color: #DBE8ED;
      cursor: pointer;
}

.game-board-grid {
      margin: 20px 0px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      column-gap: 20px;
      row-gap: 20px;
}

.game-board-box {
      background-color:#1F3641;
      width: 140px;
      height: 133px;
      border-radius: 15px;
      box-shadow: 0px 7px #142329;
      display: flex;
      justify-content: center; 
      align-items: center;
}

.game-board-box:hover {
      cursor: pointer;
}

.game-points {
      height: 72px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      column-gap: 20px;
}

.point-box{
      border-radius: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
}

.player {
      font-weight: bold;
}

.points{
      font-size: 24px;
      font-weight: bold;
}

.player1-points{
      background-color: #31C3BD;
}

.ties{
      background-color:#A8BFC9;
}

.player2-points{
      background-color: #F2B137;
}

@media only screen and (max-width:600px) {
      #game-board {
            width: 328px;
            height: 516px;
      }

      .game-board-grid {
            width: 100%;
            height: 328px;
            margin: 64px 0px 20px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            row-gap: 20px;
            column-gap: 20px;
            justify-items: center;
      }

      .game-board-box {
            width: 96px;
            height: 90px;
            box-shadow: 0px 6px #142329;
      }

      .turn-display {
            width: 96px;
            height: 40px;
      }

      .restart-btn{
            background-color: #A8BFC9;
            width: 40px;
            height: 36px;
            border-radius: 10px;
            justify-self: end;
            border: none;
            box-shadow: 0px 4px #a8bfc9a0;
      }

      .game-points {
            height: 64px;
      }
}

/* END GAME MODAL */
#game-end-modal{
      position: absolute;
      height: 100%;
      width: 100%;
      z-index: 2;
      display: none;
      align-items: center;
}

.modal-overlay{
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.527);
      z-index: 2;
}

.modal{
      width: 100%; 
      height: 226px;
      background-color:#1F3641;
      position: relative;
      z-index: 3;
      display: flex;
      justify-content: center;
      align-items: center;
}

.modal-content{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
}

.modal-p{
      color:#A8BFC9;
      font-weight: bold;
      font-size: 16px;
      text-align: center;
      letter-spacing: 1px;
}

.announcement {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2rem;
}

.modal-btns{
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
}

.quit-btn,
.next-round-btn{
      color:#1A2A33;
      font-weight: bold;
      border: none;
      font-size: 16px;
      letter-spacing: 1px;
}

.quit-btn:hover,
.next-round-btn:hover{
      cursor: pointer;
}

.quit-btn {
      background-color: #A8BFC9;
      width: 75px;
      height: 48px;
      border-radius: 10px;
      box-shadow: 0px 4px #a8bfc9a0;
}

.next-round-btn {
      width: 146px;
      height: 48px;
      margin: 0px;
      border-radius: 10px;
      box-shadow: 0px 4px #f2b1379e;
}

@media only screen and (max-width: 560px) {
     .announcement {
            gap: 1rem;
     }

     .winner-image{
            height:28px;
     }
     
      .winner-image img{
            max-width: 28px;
      }
}


/* ROUND TIED MODAL */
#round-tied-modal{
      position: absolute;
      height: 100%;
      width: 100%;
      z-index: 2;
      display: none;
      align-items: center;
}

#round-tied,
#restart-game{
      color:#A8BFC9;
      letter-spacing: 2.5px;
}

@media only screen and (max-width: 560px){
      #round-tied,
      #restart-game{ 
            font-size: 24px;
           text-align: center;
      }
}


/* RESTART MODAL */
#restart-modal{
      position: absolute;
      height: 100%;
      width: 100%;
      z-index: 2;
      display: none;
      align-items: center;
}

#restart-modal .modal-content {
      gap: 30px;
}

#restart-modal .no-cancel,
#restart-modal .yes-restart{
      width: 146px;
      height: 48px;
      border-radius: 10px;
      color:#1A2A33;
      font-size: 16px;
      letter-spacing: 1px;
      font-weight: bold;
      border: none;
}

#restart-modal .no-cancel:hover,
#restart-modal .yes-restart:hover{
      cursor: pointer;
}

#restart-modal .no-cancel {
      background-color: #A8BFC9;
      box-shadow: 0px 4px #a8bfc9a0;
}

#restart-modal .yes-restart{
      background-color: #F2B137;
      box-shadow: 0px 4px #f2b1379e;
}