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

body {
    font-family: "Outfit", sans-serif;
    background-color: #1A2A33;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  html {
      box-sizing: border-box;
    }
  *, *:before, *:after {
     box-sizing: inherit;
  }
    
  body, h1,h2,h3, p{
      margin: 0;
      padding: 0;
  }

 #game-menu,#game-board{
  display: flex;
  background-color: #1A2A33;
  /*width: 20.4375rem;*/
  height: 32.6875rem;
  padding:  1rem 1.4rem 1rem 1.4rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }
 #icons{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  margin-bottom: 2rem;
 }
 #icons img{
  padding: 0.2rem;
  height: 2rem;
 }
 .bord{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20.4375rem;
  height: 12.8125rem;
  border-radius: 0.9375rem;
  background-color:  #1F3641;
  box-shadow: 0px -8px 0px 0px #10212A inset;
 }
 .player-mark{
  color: #A8BFC9;
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.0625rem;
  padding: 1.5rem 0 1.5rem 0;
 }
 .button-box{
  display: flex;
  width: 17.4375rem;
  height: 4.5rem;
  border-radius: 0.625rem;
  background: #1A2A33;
  padding: 0.56rem;
 }
 .x-button,.o-button{
  width: 50%;
  height: 100%;
  border-radius: 0.625rem;
  background-color: transparent;
  padding: 0;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
 }
 svg{
  color: #A8BFC9;
  transform: scale(0.7);
 }
 .active{
  background: #A8BFC9;
 }
 .active svg{
  color:#1A2A33;
 }
 .reference{
  color: #A8BFC9;
  text-align: center;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.05469rem;
  opacity: 0.5;
  padding: 1.06rem 0 1.87rem 0;
 }
 .button-player{
  display: flex;
  flex-direction: column;
 }
 #yellow-btn{
  width: 20.4375rem;
  height: 3.5rem;
  border-radius: 0.9375rem;
  background: #F2B137;
  box-shadow: 0px -8px 0px 0px #CC8B13 inset;
  border: none;
  margin: 2rem auto 1rem auto;
 }
 .vs-cpu{
  color:#1A2A33;
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.0625rem;
 }
 #blue-btn{
  border:none;
  width: 20.4375rem;
  height: 3.5rem;
  border-radius: 0.9375rem;
  background:#31C3BD;
  box-shadow: 0px -8px 0px 0px #118C87 inset;
 }
 .vs-player{
  color: #1A2A33;
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.0625rem;
 }
 #start-game{
   display: none;
 }
 .board-header,.scores{
  width: 328px;
  height: 40px;
  display: flex;
  justify-content: space-between;
 }
 #turn-box{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5625rem;
  width: 6rem;
  height: 2.5rem;
  border-radius: 0.3125rem;
  background:#1F3641;
  box-shadow: 0px -4px 0px 0px #10212A inset;
 }
 #turn-box img{
  width: 1rem;
  height: 1rem;
 }
 .turn{
  color: #A8BFC9;
  text-align: center;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.05469rem;
 }
 .restart,.icon-arrow{
  border-radius: 5px;
  padding: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
 }
 .buttons{
   margin-top: 4rem;
   width: 328px;
   display: flex;
   flex-wrap: wrap;
   gap:1.25rem
 }
 .play-btn{
  width: 6rem;
  height: 6rem;
  border-radius: 0.625rem;
  background-color:  #1F3641;
  box-shadow: 0px -8px 0px 0px #10212A inset;
  display: flex;
  justify-content: center;
  align-items: center;
 }
 .scores{
  height: 4rem;
  margin-top: 1.25rem;
 }
 .score-boxs{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 4rem;
  border-radius: 0.625rem;
  background: #31C3BD;
 }
 .score-boxs:nth-child(2){
  background: #A8BFC9;
 }
 .score-boxs:nth-child(3){
  background: #F2B137;
 }
.score-boxs h3{
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.05469rem;
  color:#1A2A33;
  text-transform: uppercase;
}
.score-boxs span{
  color: #1A2A33;
  text-align: center;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.07813rem;
}
.x-button:hover,.o-button:hover,.yellow-btn:hover,.blue-btn:hover,.xHover:hover,.oHover:hover,.restart:hover,.icon-arrow:hover{
  cursor: pointer;
}
.x-button.active:hover,.o-button.active:hover{
  background-color:#A8BFC9;
}
.x-button:hover,.o-button:hover{
  background-color: #1F3641;
}
#yellow-btn:hover{
  background-color: #FFC860;
}
#blue-btn:hover{
  background-color: #65E9E4;
}
.xHover:hover{
  background-image: url(./assets/icon-x-outline.svg);
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: center;
  background-color: #1F3641;
}
.oHover:hover{
  background-image: url(./assets/icon-o-outline.svg);
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: center;
  background-color: #1F3641;
}
.players-icon{
  width: 40px;
  height: 40px;
}
#modal,#modal-tie,#modal-restart{
  display: none;
  min-width: 23.4375rem;
  width:100vw;
  height: 14.25rem;
  background-color: rgba(31, 54, 65, 1);
  position: absolute;
  z-index: 100;
}
.modal-box{
  padding: 2.5rem 0rem 0rem 1rem;
}
.icon-result{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 1rem;
   margin-bottom: 1.5rem;
}
.icon-result img{
  width: 1.875rem;
  height: 1.875rem;

}
.result-info-text{
  color: #A8BFC9;
  text-align: center;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.05469rem;
  margin-bottom: 1rem;
}
.result-info-reset,.result-info-tie{
  color:  #A8BFC9;
  text-align: center;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.15625rem;
  padding: 1rem 0 1rem 0;
}
.result-text{
  min-width: 16rem;
  color: #F2B137;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.09375rem;
}
.result-buttons{
   display: flex;
   justify-content: center;
   gap:16px;
}
.quit-btn,
.next-round-btn{
  padding: 1rem;
  border-radius: 0.625rem;
  border: none;
  cursor: pointer;
  margin: 0;
  color: #1A2A33;
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.0625rem;
   text-transform: uppercase;
}
.quit-btn{
  background:  #A8BFC9;
  box-shadow: 0px -4px 0px 0px #6B8997 inset;
}
.next-round-btn{
  background: #F2B137;
  box-shadow: 0px -4px 0px 0px #CC8B13 inset;
}
@media screen and (max-width:325px) {
  body,html{
    min-width: 325px;
  }
}
@media screen and (min-width:400px) {
  #game-menu,#game-bord{
    margin-top: 2rem;
    
    justify-content: center;
    align-items: center;
  }
  

}

@media screen and (min-width:1100px) {
  #game-menu,#game-bord{
    margin-top: 5rem;
    
    justify-content: center;
    align-items: center;
  }
  

}