*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body{
   padding: 2.5vh 5vw;
   height: 95vh;
   /* background-color: blue; */
}

#title-container {
   /* background-color: yellow; */
   justify-content: center;
   font-size: 5vh;
   text-align: center;
   text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1),0px 18px 23px rgba(0,0,0,0.1);;
}

#chessboard {
   display: grid;
   grid-template-columns: auto auto auto auto auto auto auto auto;
   grid-gap: 0;
   justify-content: center;
   /* background-color: orange; */
   height: 90vmin;
 }
 
 .tile {
   width: 11.25vmin;
   height: 11.25vmin;
   padding: 1.625vmin;
   text-align: center;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -khtml-user-select: none;
   user-select: none;
   cursor: default;
 }

         .dark{
            background-color: coral;
         }

         .light{
            background-color: snow;
         }

 .piece{
   font-size: 5vmin;
   text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1),0px 18px 23px rgba(0,0,0,0.1);
   z-index: 10;
   position: relative;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -khtml-user-select: none;
   user-select: none;
   cursor: default;
   animation-name: dancing;
   animation-duration: 0.5s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   transition: font-size 0.125s;
 }

   @keyframes dancing {
      0% {transform: rotate(10deg);}
      100% {transform: rotate(-10deg);}
   }

   .piece:hover {
      animation: none;
      font-size: 7vmin;
   }