.piece{
      cursor:grab; 
      max-width: 85%; 
      max-height: auto;
      object-fit: contain;
    }
    .board {
      display: grid;
      grid-template-columns: repeat(8, 5vw);
      grid-column: 2;
      grid-row: 1;
      border: 5px solid #74625C;
      width:40vw;
	    height:40vw;
      position: relative;
box-shadow: rgba(116, 98, 92, 0.8) 0px 14px 28px, rgba(116, 98, 92, 0.8) 0px 10px 10px;
    }

    .square {
      width: 5vw;
      height: 5vw;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      position: relative;
    }

    .light { background: #ECDAB9; }
    .dark { background: #74625C;}

    .controls { margin-top: 12px; }
    input { width: 480px; padding: 6px; }

    .alert { 
      display:none;
      align-items: center;
      justify-content: center; 
      font: 175pt Ubuntu;
      margin-bottom:8px; 
      padding:6px 10px; 
      color: #74625C; 
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #clock{
        z-index: 25000; color: white;background: #74625C;; display: flex; align-items: center; justify-content: center;
   position: absolute;
   top:6vh;
   right: 3vw;
   font: 40px Ubuntu;
   width: 10vw;
   height: 10vh;
   border-radius: 10px;
   box-shadow: rgba(0, 0, 0, .5) 0px 1px 3px 0px, rgba(27, 31, 35, 0.1) 0px 0px 0px 1px;
    }
.black {display: flex;justify-content: center; align-items: center;transform: rotate(180deg);transition: transform 0.5s ease-in-out;}
.white {display: flex;justify-content: center; align-items: center;}
.w, .b {display: flex;justify-content: center; align-items: center;}