/*selectors*/
div {
float: left;
clear: both;
border: 1px solid black;
border-radius: 5px;
}

#container {
background-color: grey;
margin-bottom: 40px;
width: 84%;
margin-left: 8%;
background-image: url("hexagonbg.png");
padding-bottom: 1%;
}

#game {
margin-top: 2.5%;
margin-left: 10%;
padding-right: 2%;
padding-left: 2%;
padding-top: 2%;
padding-bottom: 2%;
background-color: lightgray;
}

.responsive {
width: 62vw;
height: 100vh;
}

#headerofmenus {
/* some minor math changed by rowe */
width: 67%;
/* by removing flex your page is mobile responisve now */
margin-top: 2%;
margin-left: 12%; 
padding-left: 2%;
padding-right: 2%;
background-color: green;
/*display: flex;*/
/*please do not use flex */
}

.submenus {	
margin-left: 1%;
background-color: lime;
width: 5vw;
clear: none;
padding-left: 2%;
padding-right: 2%;
}

.text_container {
text-align: center;
width: 80%;
margin-left: 5%;
margin-top: 5%;
padding-right: 10%;
background-color: white;
}

.left_container {
width: 40%;
margin-left: 5%;
margin-top: 5%;
background-color: white;
float:left;
}

.right_container {
width: 40%;
margin-right: 5%;
margin-top: 5%;
background-color: white;
float:right;
clear: none;
}

.image_container {
text-align: center;
width: 90%;
margin-left: 5%;
background-color: whitesmoke;
border: 0px;
}

#door {
width: 0px;
height: 0px;	
margin-top: 500%;
margin-left: 40%;
background-color: black;
}

/*tag selectors*/
p {
margin-left: 10%;
color: black;
font-size: 25pt;
}

a {
/*	margin-left: 10%;*/
color: blue;
/*font-size: 25pt;*/
font-size: 1vw;
}

img {
margin-top: 1%;
margin-bottom: 1%;
margin-left: 4%;
width: 200px;
height: 200px;
}