/**********************************************************************
 * @style.css
 * @brief setting of the webpage
 * @ author Haixia Yong & Hanzhang Wu
 * @date April 25 , 2020
 **********************************************************************/

/*eliminate the original setting of the elements*/
*{
    padding:0;
    margin:0;
    border:0;
}

/*set the width and height of the body as 100%*/
body{
    width: 100%;
    height: 100%;
    background-color:#CCCCFF;
}

/*set the container to be 800px in width and 600px in height*/
 #container{
    position: relative;
    width: 800px;
    height: 600px;

    margin: 0 auto;
    margin-top: 100px;
    border-radius: 1px;
    justify-content: center;

}

/*setting for the game which determined by the dimension of small blocks inside the game*/
 #game{
    position:absolute;
    width: 450px;
    height: 450px;
    border-radius: 5px;
    display: inline-block;
    background-color: #FFFFFF;
    box-shadow: 0 0 10px #CCCCFF;
}

 #game div{
    position:absolute;
    display:inline-block
    width: 450px;
    height: 450px;

}

/*Set the size and the animation effect of move for small blocks*/
  #game div{
    position:absolute;
    width: 149px;
    height: 149px;
    cursor: pointer;
    -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;
            transition: 0.3s;
}

/*Setting the position of small blocks in the game*/
  #d1{
        left: 0px;
     }
  #d2{
        left: 150px;
     }
  #d3{
        left: 300px;
      }
  #d4{
        top: 150px;
     }
  #d5{
        top: 150px;
        left: 150px;
     }
   #d6{
         top: 150px;
         left: 300px;
      }
   #d7{
         top: 300px;
       }
   #d8{
         left: 150px;
         top: 300px;
       }

/*Setting of control part*/
 #control{
   width: 150px;
   height: 450px;
   display: inline-block;
   float: right;
}


 #control rowspan{
   height: 25px;
   font-size: 25px;
   color: #222;
   margin-top:10px;
}

/*Setting of reset button*/
 #reset{
   display: inline-block;
   font-size: 20px;
   width: 100px;
   height: 30px;
   background-color: #9999FF;
   border-radius: 5px;
   box-shadow: 2px 2px 5px #9999FF;
   text-align: center;
   cursor: pointer;
}

/*Setting for basicInfo section*/
#basicInfo{
            width: 150px;
            height: 450px;
            display: inline-block;
            float: right;
              font-size: 20px;
              width: 150px;
              height: 90px;
              background-color: #9999FF;
              border-radius: 5px;
              box-shadow: 2px 2px 5px #9999FF;
              text-align: center;
          }