@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Permanent+Marker&family=Press+Start+2P&family=Shrikhand&display=swap');
/* font-family: 'Permanent Marker', cursive;
 font-family: 'Press Start 2P', cursive; 
 font-family: 'Shrikhand', cursive;Marker&family=Press+Start+2P&family=Shrikhand&display=swap'); */ 

 * {
    background-color: #ffcab1;
 }

 body {
   margin: 2% 10% 2% 10%;
   display: flex;
   flex-direction: column;
   align-items: center;
   flex: 3;
 }


 h1 {
    font-family: 'Shrikhand', cursive;
    color: #764248;
    text-align: center;
    font-size: 4em;
    margin-top: 10%;
 }

 main {
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr); 
    width: 30rem;
    height: 30rem;
    font-family: 'Permanent Marker', cursive;
    font-style: italic;
    color: #627264;
    font-size: 3em;
    background-color: #627264;
    z-index: 1;

 }

 .cell {
    color: #627264;
    padding: 10%;
    border-radius: 10%;
    background-color: #ffcab1;
    font-size: 1.5em; 
    text-align: center;


 }

/* setting border display using margins and background color */
 .cell:first-child {
    border-style: solid;
    border-width: 0rem .5rem .5rem 0rem;
    border-color: #627264;
    border-top-left-radius: 0%;
 } 

.cell:nth-child(2){
    border-style: solid;
    border-width: 0rem .5rem .5rem .5rem;
    border-color: #627264;
 }

.cell:nth-child(3) {
    border-style: solid;
    border-width: 0rem 0rem .5rem .5rem;
    border-color: #627264;
    border-top-right-radius: 0%;
 }

.cell:nth-child(4) {
    border-style: solid;
    border-width: .5rem .5rem .5rem 0rem;
    border-color: #627264;
 }

.cell:nth-child(5) {
    border-style: solid;
    border-width: .5rem .5rem .5rem .5rem;
    border-color: #627264;
 }

.cell:nth-child(6) {
    border-style: solid;
    border-width: .5rem 0rem .5rem .5rem;
    border-color: #627264;
 }

.cell:nth-child(7) {
    border-style: solid;
    border-width: .5rem .5rem 0rem 0rem;
    border-color: #627264;
    border-bottom-left-radius: 0%;
 }

.cell:nth-child(8) {
    border-style: solid;
    border-width: .5rem .5rem 0rem .5rem;
    border-color: #627264;
 }

.cell:nth-child(9) {
    border-style: solid;
    border-width: .5rem 0rem 0rem .5rem;
    border-color: #627264;
    border-bottom-right-radius: 0%;
 }


#gameOverBox {
   display: none;
   width: 75%;
   height: 20%;
   position: relative;
   margin-bottom: -35%;
   z-index: 3;
   background-color: #151515;
   flex-direction: column;
   align-items: center;
   padding: 3%;
   border-radius: 25%;
}

#resetButton {
   font-family: 'Permanent Marker', cursive;
   color: #151515;
   background-color: #a1cda8;
   height: 5rem;
   width: 5rem;
   border-radius: 50%;
}

 #playerWinBanner {
   background-color: #151515;
   font-family: 'Press Start 2P', cursive;
   color: #a1cda8;
   width: 75%;
   height: 20%;
   position: relative;
   z-index: 4;
   text-align: center;
   font-size: 3em;
 }

 .playerNames {
   display: flex;
   font-family: 'Shrikhand', cursive;
   padding-bottom: 4%;
   width: 50%;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
 }
 
#submitNamesButton {
   font-family: 'Shrikhand', cursive;
 }

 input {
   background-color: white;
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 }

 .playerOrder {
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
   font-family: 'Press Start 2P', cursive; 
   color: #764248;
   width: 100%;
   padding-top: 3%;
 }



 @media only screen and (max-width: 800px) {
   .playerNames {
     justify-content: center;
   }

   .playerNames > * {
      margin: 2%;
   }
   header {
      font-size: 0.5em;
   }

   main {
      font-size: 0.5em;
      width: 10rem;
      height: 10rem;
      margin-top: 1em;
   }

   /* .cell {
      padding: 5%;
      border-radius: 5%;
   } */

   .cell:first-child {
      border-width: 0rem .25rem .25rem 0rem;
   } 
  
  .cell:nth-child(2){
      border-width: 0rem .25rem .25rem .25rem;
   }
  
  .cell:nth-child(3) {
      border-width: 0rem 0rem .25rem .25rem;
   }
  
  .cell:nth-child(4) {
      border-width: .25rem .25rem .25rem 0rem;
   }
  
  .cell:nth-child(5) {
      border-width: .25rem .25rem .25rem .25rem;
   }
  
  .cell:nth-child(6) {
      border-width: .25rem 0rem .25rem .25rem;
   }
  
  .cell:nth-child(7) {
      border-width: .25rem .25rem 0rem 0rem;
   }
  
  .cell:nth-child(8) {
      border-width: .25rem .25rem 0rem .25rem;
   }
  
  .cell:nth-child(9) {
      border-width: .25rem 0rem 0rem .25rem;
   }

   .playerOrder {
      font-size: 0.45em;
   }

   .playerNames {
      font-size: .35em;
      flex-shrink: 1;
   }

   button {
      font-size: .15em;
   }

   #gameOverBox {
      font-size: .35;
   }

   #playerWinBanner {
      font-size: .5em;
   }

   .playerOrder {
      align-items: center;
   }
 }