gridStyle.css

.wrapper {
  /*position: fixed;*/
  width: 100%; height: 100%;
  /*left: 0; top: 0;*/
  text-align: center;
  margin-top: 10%;
  /*cursor:crosshair;*/
}
.wrapper:before {
  content: "";
  display: inline-block; vertical-align: middle;
  width: 0; height: 100%;
}
.wrapper > .grid {
  display: inline-block;
  vertical-align: middle;
}
.grid > .row {
  font-size: 0;
  /*width: 50px;*/
  white-space: nowrap;
}
.grid > .row > .cell {
  position: relative;
  display: inline-block;
  /*width: 25px; height: 25px;*/
  outline: 1px solid rgba(0, 0, 0, 0.1);
}

/*
.grid > .row > .cell:hover {
  background-color: rgba(255, 255, 255, 0.5);
  outline: 1px solid white;
}
*/

.grid > .row > div:hover {
  outline: 2px dashed white;
  z-index: 10;
}

/* Rotating by X:40,Y:45 degrees gives isometric
   Rotating by X:45,Y:45 degrees gives some perspective */
.grid {
  transform: rotateX(40deg) rotateZ(45deg);
  background-color: color(srgb 0.3168 0.5499 0.1855);
}

/* Reset default button styles */
.submitNoStyle {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  left:0px;
  /* Add any additional styling you need */
}


.CT-Farm{
  position: relative;
  display: inline-block;
  /*width: 25px; height: 25px;*/
  /*outline: 1px solid rgba(0, 0, 0, 0.1);*/
  /* Width and Height set in JS code
  width:100%;
  height:100%;*/
  /*background-color:green;*/

  background-image: url('Graphics/farmtile.png');
  background-size:contain;
  background-repeat: no-repeat;
  transform: rotateX(0deg) rotateZ(-45deg);
  margin:0px;
  padding:0px;
}

.CT-Centre{
  position: relative;
  display: inline-block;

  background-image: url('Graphics/hometile.png');
  background-size:contain;
  background-repeat: no-repeat;
  transform: rotateX(0deg) rotateZ(-45deg);
  margin:0px;
  padding:0px;
}

.CT-Wall{
  position: relative;
  display: inline-block;
  /*width: 25px; height: 25px;*/
  outline: 1px solid rgba(0, 0, 0, 0.1);
  
  width:100%;
  height:100%;
  background-color:darkslategrey;
}

.CT-Barracks{
  position: relative;
  display: inline-block;
  /*width: 25px; height: 25px;*/
  background-image: url('Graphics/barrackstile.png');
  background-size:contain;
  background-repeat: no-repeat;
  transform: rotateX(0deg) rotateZ(-45deg);
  margin:0px;
  padding:0px;
}

.CT-Turret{
  position: relative;
  display: inline-block;
  background-image: url('Graphics/turrettile.gif');
  background-size:contain;
  background-repeat: no-repeat;
  transform: rotateX(0deg) rotateZ(-45deg);
  margin:0px;
  padding:0px;
}

.CT-Storage {
  position: relative;
  display: inline-block;
  background-image: url('Graphics/storagetile.png');
  background-size:contain;
  background-repeat: no-repeat;
  transform: rotateX(0deg) rotateZ(-45deg);
  margin:0px;
  padding:0px;
}

.character {
  position: absolute;
  background-color: #000000; /* Character color */
  transition: transform 5s linear; /*ease; Smooth transition */
  z-index: 3; /* character layer */
  width:25%;
  height:25%;
  border-radius: 50%;
}

/*.info-popup{
  border: 1px solid black;
}*/