hra.css

#menu{
display: flex;
flex-direction:line;
margin:auto;
justify-content:space-evenly;
}

#obdelnik{
	height:600px;
	width:100%;
	display: flex;
  flex-direction:column;
  margin:auto;
	background-color:black;
	z-index: 	-1;
	justify-content:space-evenly;
	position:relative;
}

#pointstable{
position:relative;
width:25px;
height:25px;
margin-top: 15px;
border:5px solid #98bf21;
padding:5px;
font-size: 15;
}

.box{
top:140px;
height:30px;
width:30px;
background:#98bf21;
margin:6px;
z-index: 1;
max-width: 40px;
max-height: 40px;
}

#monstrimage{
max-width: 40px;
max-height: 40px;
border: 2px solid red;
border-style: double;
border-radius: 5px;
z-index: 2;
}

#monstr1{
position: absolute;
top: 140px;
}
#monstr2{
position: absolute;
top: 250px;
}
#monstr3{
position: absolute;
top: 360px;
}
#monstr4{
position: absolute;
top: 465px;
}
#monstr5{
position: absolute;
top: 575px;
}

#edge{
    width:100%;
    height:600px;
    border:1px solid #3377af;
    padding:5px;
}

.dot {
    height: 25px;
    width: 25px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}

.invisible{
    display: none;
	
}