@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Mochiy+Pop+P+One&display=swap');

:root{

   --font-size-small: 5vmin;
   --font-size-medium: 8vmin;
   --font-size-large: 10vmin;
   --font-size-larger: 12vmin;

   --color-dark: rgb(52, 63, 86);
   --color-light: rgb(245, 230, 202);
   --color-accent-strong: rgb(245, 71, 72);
   --color-accent-weak: rgb(251, 147, 0); 

   --border-radius: 4vmin;

   --transition-items: all 0.5s ease-in-out;
   --transition-page: all 1s ease-in-out;
   
   --board-size: 90vmin;
}

   @media (min-aspect-ratio: 9/16) {
      :root {
         --font-size-small: 4vmin;
         --font-size-medium: 6vmin;
         --font-size-large: 8vmin;
         --font-size-larger: 10vmin;

         --board-size: 50vmax;
      }
   }

   @media (min-aspect-ratio: 3/4) {
      :root {
         --font-size-small: 3vmin;
         --font-size-medium: 5vmin;
         --font-size-large: 8vmin;
         --font-size-larger: 10vmin;

         --board-size: 50vmax;      
      } 
   }

   @media (min-aspect-ratio: 1/1) {
      :root {
         --board-size: 50vmin;  
      }
   }

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   caret-color: rgba(0, 0, 0, 0);
   transition: var(--transition-items);
}

body{
   font-family: 'Architects Daughter', cursive;
   background-color: var(--color-light);
}

button {
   font-family: 'Mochiy Pop P One', sans-serif;
   border-radius: var(--border-radius);
   border: none;
}

.welcomeContainer, .gameContainer {
   position: fixed;
   display: grid;
   grid-template-rows: repeat(32, calc(100vh / 32));
   grid-template-columns: repeat(18, calc(100vw / 18));

   height: -webkit-fill-available;

   justify-items: center;
   align-items: center;

   background-color: var(--color-light);
   transition: var(--transition-page);
}

/* Welcome page stylings */

.welcomeMessage{
   grid-row: 4/8;
   grid-column: 2/18;
   
   font-size: var(--font-size-large);
   color: var(--color-dark); 
   text-align: center;
}

#xPlayerChose{
   grid-column: 2/8;
}

#oPlayerChose{ 
   grid-column: 11/17;
}

      #xPlayerChose, #oPlayerChose{
         grid-row: 15/25;
         width: 90%;
         height: 90%;

         color: var(--color-light); 
         font-size: var(--font-size-large);
         background-color: var(--color-dark);
      }
               
         #oPlayerChose:hover{
            background-color: var(--color-accent-strong);
            font-size: var(--font-size-larger);
         }
         #xPlayerChose:hover{
            background-color: var(--color-accent-weak);
            font-size: var(--font-size-larger);
         }

            #xPlayerChose:active, #oPlayerChose:active{
               width: 100%;
               height: 100%;
            }

.footerCC {
   grid-column: 8/11;
   grid-row: 28/30;

   font-size: var(--font-size-small);
   font-weight: bold;
   color: var(--color-dark);
   text-align: center;
}

/* Game page stylings */

.titleCard{
   grid-row: 2/3;
   grid-column: 2/18;
   width: 100%;
   height: 100%;

   display: flex;
   justify-content: center;
   align-items: center;

   font-size: var(--font-size-medium);
   color: var(--color-dark);
   /* background-color: blue; */
}


.recordsContainer{
   grid-row: 3/8;
   grid-column: 2/18;

   height: 100%;
   width: 100%;

   display: grid;
   grid-template-columns: repeat(6, 1fr);
   grid-template-rows: repeat(6, 1fr);

   justify-items: center;
   align-items: center;

   /* background-color: red; */
}

   .recordsTally {
      grid-row: 2/3;
      grid-column: 2/6;

      width: 100%;
      height: 100%;

      text-align: center;
      /* background-color: red; */

      font-size: var(--font-size-small);
      color: var(--color-dark);
   }

      #xCounter{
         font-size: var(--font-size-medium);
         font-weight: bold;
         color: var(--color-accent-weak);
      }
      
      #oCounter{
         font-size: var(--font-size-medium);
         font-weight: bold;
         color: var(--color-accent-strong);
      }
      
      #tieCounter{
         font-size: var(--font-size-medium);
         font-weight: bold;
      }

   .recordButtonsContainer{
      grid-row: 3/7;
      grid-column: 1/7;

      width: 100%;
      height: 100%;
      
      /* background-color: blue; */
      
      display: flex;
      justify-content: space-around;
   }

      .recordButtons {
         padding: 0 1.25%;
         margin: 0 2.5%;
         font-size: var(--font-size-small);
         background-color: var(--color-dark);
         color: var(--color-light);
      }

         .recordButtons:hover {
            background-color: var(--color-light);
            color: var(--color-dark);
         }

         .recordButtons:active{
            font-size: var(--font-size-medium);
         }

.boardContainer{
   grid-row: 8/24;
   grid-column: 2/18;

   width: 100%;
   height: 100%;
   
   /* background-color: green; */

   display: flex;
   justify-content: center;
   align-items: center;
}  

   .board{
   border: none;
   border-radius: var(--border-radius);
   background-color: none;

   width: var(--board-size);
   height: var(--board-size);

   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);

   }

      .tile{
         border-radius: var(--border-radius);

         display: flex;
         align-items: center;
         justify-content: center;
      }

      .piece{
         border: none;
         border-radius: var(--border-radius);

         background-color: var(--color-dark);
         width: 90%;
         height: 90%;
         font-size: var(--font-size-large);
         color: var(--color-light);

      }

         .piece:hover {
            border: 1vmin solid var(--color-dark);
            color: var(--color-dark);
            font-size: var(--font-size-medium);
            animation: pieceColorChange 0.5s ease-in 1s infinite;
         }

            @keyframes pieceColorChange {
               0% {background-color: var(--color-light);}
               100% {background-color: var(--color-light);}
            }

   .playerBanner{
      grid-row: 24/26;
      grid-column: 2/18;

      font-size: var(--font-size-medium);
      color: var(--color-dark);

      width: 100%;
      height: 100%;

      display: flex;
      flex-flow: nowrap column;
      justify-content: center;
      align-items: center;
      line-height: 0;
   }

   #warningBanner{
      grid-row: 26/28;
      grid-column: 4/16;

      height: 100%;
      width: 100%;

      font-size: var(--font-size-medium);
      color: var(--color-dark);

      display: flex;
      align-items: center;
      justify-content: center;

   }

   .historyButtonsContainer{
      grid-row: 26/30;
      grid-column: 2/18;

      height: 100%;
      width: 100%;

      /* background-color: red; */

      display: flex;
      flex-flow: wrap row;
      align-items: center;
      text-align: center;
      justify-content: center;
   }

      .historyBanner{
         flex-basis: 100%;
         font-size: var(--font-size-medium);
         color: var(--color-dark);
         /* background-color: blue; */
      }

      .historyButtons{
         /* height: var(--font-size-small); */
         padding: 0 2.5%;
         margin: 0 1.25%;

         font-size: var(--font-size-small);
         background-color: var(--color-dark);
         color: var(--color-light);
      }

         .historyButtons:hover {
            background-color: var(--color-light);
            color: var(--color-dark);
         }

         .historyButtons:active{
            border: none;
            font-size: var(--font-size-medium);
         }


/* Effects and animations */

.playerO, .playerOHover {
   background-color: var(--color-accent-strong);  
}

.playerX, .playerXHover {
   background-color: var(--color-accent-weak); 
}

.warningHide{
   transform: scale(0,0);
   transform-origin: top;
   opacity: 0;
}

.welcomeHide, .buttonHide{
   transform: scale(0,0);
   transform-origin: center;
   opacity: 0;
}

.bouncyEffect {
   animation-name: bouncy;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   animation-timing-function: ease;
}

   .bouncyEffectDelay {
      animation-delay: 0.5s;
   }

   @keyframes bouncy {
      0%   { transform: scale(1,1)      translateY(0); }
      10%  { transform: scale(1.1,.9)   translateY(0); }
      30%  { transform: scale(.9,1.1)   translateY(-100px); }
      50%  { transform: scale(1.05,.95) translateY(0); }
      57%  { transform: scale(1,1)      translateY(-7px); }
      64%  { transform: scale(1,1)      translateY(0); }
      100% { transform: scale(1,1)      translateY(0); }
   }

.breathingEffect {
   animation-name: breathingEffect;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
}
      
   @keyframes breathingEffect {
      0% {
         -webkit-transform: scale(0.9);
         -ms-transform: scale(0.9);
         transform: scale(0.9);
      }
      
      25% {
         -webkit-transform: scale(1);
         -ms-transform: scale(1);
         transform: scale(1);
      }
      
      60% {
         -webkit-transform: scale(0.9);
         -ms-transform: scale(0.9);
         transform: scale(0.9);
      }
      
      100% {
         -webkit-transform: scale(0.9);
         -ms-transform: scale(0.9);
         transform: scale(0.9);
      }
}

.shakingEffect {
   animation: shakingEffect 2s cubic-bezier(.36,.07,.19,.97) infinite;
}

   @keyframes shakingEffect {
   10%, 90% {
      transform: translate3d(-1px, 0, 0);
   }
   
   20%, 80% {
      transform: translate3d(2px, 0, 0);
   }
   
   30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
   }
   
   40%, 60% {
      transform: translate3d(4px, 0, 0);
   }
}

.dancingEffect {
   animation-name: dancingEffect;
   animation-duration: 0.125s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
}

   @keyframes dancingEffect {
      0% {transform: rotate(5deg);}
      100% {transform: rotate(-5deg);}
   }