#canvas1 {
	border: 3px solid black;
	position: absolute;
	top: 50%;
	left: 85%;
	transform: translate(-50%, -50%);
	height: 450px;
	width: 200px;
}

#canvas2 {
	border: 3px solid black;
	position: absolute;
	top: 50%;
	left: 60%;
	transform: translate(-50%, -50%);
	height: 300px;
	width: 250px;
}

#canvas3 {
	border: 3px solid black;
	position: absolute;
	top: 25%;
	left: 85%;
	transform: translate(-50%, -50%);
	height: 450px;
	width: 200px;
}
#canvas4 {
	border: 3px solid black;
	position: absolute;
	top: 95%;
	left: 80%;
	transform: translate(-50%, -50%);
	height: 600px;
	width: 400px;
}



.grid {
	width: 606px;
	height: 606px;
	display: flex;
	flex-wrap: wrap;
}

.square {
	height: 100px;
	width: 50px;
	border: solid black 1px;
}

.square1 {
	height: 100px;
	width: 50px;
	border: solid black 1px;
	background-image: url("images/abilities.png")
}

.mole {
	background-color: blue;
	background-image: url("images/mole7.png");
}

body {
background-color: #9FDCD3;
border: 2px solid gray ;
border-radius: 16px ;
font-family: sans-serif;
margin-left: auto;
margin-right: auto;
max-width: 1024px ;
min-width: 256px ;
padding-top: 8px ;
padding-bottom: 24px ;
padding-left: 30px ;
padding-right: 30px ;
}
html {
/*background: radial-gradient(circle, SkyBlue,
SkyBlue 50%, LightCyan 50%,
SkyBlue) ; */

background-color:#81BBEF;
background-image: radial-gradient(white 2%, transparent 3%),
radial-gradient(white 2%, transparent 3%);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;

/*background-size: 8px 8px ; */
}
nav ul {
list-style-type: none;
background-color: #99c2ff;
border: 4px solid #111111;
border-radius: 10px ;
font-family: sans-serif;
font-weight: bold;
padding: 16px;
}
nav ul li {
display: inline;
border-right: 2px solid #111111;
padding-right: 8px;
padding-left: 8px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: #111111;
}


.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

.MP {
	width: 100px;
	height: 50px;
	font-size: 100px;
	color: red;
	margin-left: 200px;
	display: flex;
	flex-wrap: wrap;
}

.counter-preview {
	width: 100px;
	height: 50px;
	font-size: 100px;
	color: red;
	margin-left: 200px;
	
}

.dice1 {
	width: 200px;
	height: 200px;
	font-size: 100px;
	color: blue;
	margin-left: 300px;
	
}

.btnDice {
	margin-top: 200px;
	margin-right: 300px;
	width: 80px;
	height: 70px;
}

.HP {
	width: 100px;
	height: 50px;
	font-size: 100px;
	color: red;
	margin-left: 200px;
	display: flex;
	flex-wrap: wrap;
}

.hp {
	width: 100px;
	height: 300px;
	font-size: 100px;
	color: red;
	margin-left: 200px;
}

.decrement {
	margin-right: 100px;
	width: 80px;
	height: 70px;
}

.increment {
	margin-right: 100px;
	width: 80px;
	height: 70px;
}

.reset {
	margin-right: 100px;
	width: 80px;
	height: 70px;
}

.decrement2 {
	margin-right: 100px;
	width: 80px;
	height: 70px;
}

.increment2 {
	margin-right: 100px;
	width: 80px;
	height: 70px;
}

.reset2 {
	margin-right: 100px;
	width: 80px;
	height: 70px;
}