/*selectors*/
div {
float: left;
clear: both;
border: 1px solid black;
border-radius: 0px;
font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
}

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

#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: 69%;
margin-top: 0.5%;
margin-left: 9%; 
padding-left: 11%;
padding-top: 1%;
padding-bottom: 0.5%;
background-color: black;
}


.submenus {	
margin-right: 2%;
background-color: lime;
clear: none;
padding-left: 2%;
padding-right: 2%;
cursor: pointer;
transition: background-color 0.4s;
font-size: 1.8vw;
}

.submenus:hover {
  background-color: #04AA6D;
}
.gamesubmenus {	
margin-left: 1%;
background-color: white;
clear: none;
padding-left: 2%;
padding-right: 2%;
margin-top: 1%;
margin-bottom: 1%;
cursor: pointer;
transition: background-color 1s;
font-size: 1.4vw;
border-radius: 5px;
width: 100%;
}
.gamesubmenus:hover {
  background-color: #e01d31;
}

#gamecontainer {
background-color: lightgray;
display: grid;
place-items: center;
width: 33%;
margin-left: 30%; 
padding-left: 2%;
padding-right: 2%;
}

#gamesign {
text-align: center;
width: 33%;
margin-left: 30%; 
margin-top: 2%; 
padding-left: 2%;
padding-right: 2%;
font-size: 1.3vw;
background-color: white;
}

.text_container {
text-align: center;
width: 80%;
margin-left: 5%;
margin-top: 2%;
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: 200px;
height: 400px;	
margin-top: 500%;
margin-left: 45%;
background-color: black;
background-image: url("door.png");
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
#door:hover {
background-image: url("opendoor.png");
}

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

a {
color: black;
}

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