div {
float: left;
clear: both;
margin-left: 10%;
}


#container {
background-color: lightcyan;
/*height: 1800px;*/
margin-bottom: 10px;
width: 80%;
margin-left: 10%;
float: left;
clear: both;
}

.headerofmenus {
width: 90%;
margin-left: 5%;
padding-bottom: 1vh;
background-color: skyblue;
/*height: 50px;*/
}

.contentholder {
background-color: skyblue;
width: 80%;
margin-left: 10%;
/*height: 1800px;*/
margin-top: 10px;
margin-bottom: 10px;
font-size: 25pt;
font-family: Bradley Hand, cursive;
}

.menubox {
	background-color: white;
	color: black;
	margin: 1vh;
	padding: 1vh;
	clear: none;
	font-family: Garamond;
	/*we want menu boxes side by side, no clear*/
}

.menubox:hover {
	background-color: lightgrey;
	scale: 110%;
}


a {
	font-size: 40px;
}

img {
	width: 31.76%;
}

/*effect for hovering images*/
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {
	opacity: 0.7;
	scale: 105%;
}

/*zooming images*/
.zoom-img {
  width: 200px;
  transition: transform 0.3s ease; /* Smooth transition */
}

#img-zoom:target {
  transform: scale(5.0); /* Scale it up */
  position: relative;
  z-index: 100;
}