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

body{
   max-height: 100vh;
}

#main-container{
   /* background-color: lightcoral; */
   /* border: 3px solid black; */
   margin: 2vh 9vw;
   padding: 0.5vh 1vw;
   display: flex;
   flex-direction: column;
   align-items: center;
}

#title-container{
   /* background-color: slateblue; */
   text-align: center;
   margin-bottom: 3vh;
   font-size: 2vmin;
}

                     #chessboard{
                        /* border: 2px solid black; */
                        /* background-color: salmon; */
                        display: flex;
                        flex-wrap: wrap;
                        width: 80vmin;
                        height: 80vmin;
                        justify-content: center;
                        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                     }

                     .board-tile{
                        width: 12.5%;
                        height: 12.5%;
                        font-size: 8vmin;
                        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);
                        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                     }

   .light-tile{
      background-color: oldlace;
   }

   .dark-tile{
      background-color: forestgreen;
   }


   #moving-piece {
      position: relative;
      /* background-color: red; */
      /* transition: position 2s; */
      animation-name: opening-move;
      animation-duration: 5s;
      animation-iteration-count: infinite;
   }

   @keyframes opening-move {
      0% {top: 0%;}
      10%{top: 100%;}
      20% {top: 200%;}
      30% {top: 200%;}
      40% {top: 200%; right: 0%;}
      50% {top: 300%; right: 100%; z-index: 1; transform: rotate(0deg);}
      62.5% {top: 300%; right: 100%; z-index: 1; transform: rotate(90deg);}
      87.5% {top: 300%; right: 100%; z-index: 1; transform: rotate(-90deg);}
      100% {top: 300%; right: 100%; z-index: 1;transform: rotate(0deg);}
   }

   #eaten-piece {
      position: relative;
      /* background-color: red; */
      /* transition: position 2s; */
      animation-name: second-move;
      animation-duration: 5s;
      animation-iteration-count: infinite;
   }

   @keyframes second-move {
      0% {top: 0%; z-index: 0;}
      10% {top: 0%; z-index: 0;}
      20% {top: 0%; z-index: 0;}
      30%{top: -100%; z-index: 0;}
      40%{top: -200%; z-index: 0;}
      50%{top: -200%; z-index: -1;}
      100% {top: -200%; z-index: -1;}
   }