@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');

.containerClass {
  margin: auto;
  padding: 0px;
  width: 1300px;
  height: 1100px;
  display: flex;
    flex-direction: column;
  /* border: 2px solid red; */
  position: relative;
  font-family: 'Kanit', sans-serif;
  font-size: 0.875rem;
}

/* Main Rows */
.playerRow {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: row;
  /* 	border: 1px solid green; */
}

.fieldRow {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 250px;
  /* 	border: 1px solid orange; */
}

.logRow {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: row;
  /* 	border: 1px solid orchid; */
}

/* Row 1 Colums */
.player1Stat,
.player1Read,
.middleGround,
.player2Stat,
.player2Read {
  margin: 0px;
  padding: 0px;
  width: 300px;
  height: 100%;
  /* 	border: 1px solid blue; */
}

.statIn {
  width: 24px;
  text-align: center;
}

.player1Read,
.player2Read  {
  margin: 0px;
  padding: 0px;
  width: 200px;
  height: 100%;
  /* 	border: 1px solid blue; */
}

.charComp {
  margin-left: 4px;
  margin-right: 4px;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #314b94;
}

.middleGround {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
}

.gDiv {
  margin: 0px;
  padding: 0px;
  margin-top: 20px;
  width: 100%;
  height: 60%;
  /* border: 1px solid red; */
}

.grass {
  top: 140px;
  left: 38.5%;
  width: 300px;
  position: absolute;
}

.archer {
  top: 225px;
  left: 39%;
  width: 70px;
  position: absolute;
}

.swordman {
  top: 208px;
  left: 52.5%;
  width: 120px;
  transform:scaleX(-1);
  position: absolute;
}

.fieldSet {
  margin: 0px;
  width: 100%;
  padding-bottom: 25px;
  height: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* border: 2px solid #314b94; */
}

/* Row 3 Colums */

.player1Actions,
.player2Actions {
  margin: 0px;
  padding: 0px;
  width: 200px;
  height: 100%;
  /* 	border: 1px solid purple; */
}

.player1Body,
.player2Body {
  margin: 0px;
  padding: 0px;
  width: 200px;
  height: 100%;
  /* 	border: 1px solid lightgreen;	 */
}

.gameLog {
  margin: 0px;
  padding: 0px;
  width: 700px;
  height: 100%;
  /* 	border: 1px solid darkgoldenrod; */
}

canvas {
  background-color: #1a381f;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

table {
	margin: auto;
	border:1px solid #b3adad;
	border-collapse:collapse;
	padding:2px;
	width: 96%;
}
table th {
	border:1px solid #b3adad;
	padding:2px;
	background: #f0f0f0;
	color: #313030;
}
table td {
	border:1px solid #b3adad;
	text-align:left;
	padding: 3px;
	background: #ffffff;
	color: #313030;
}