div {
text-align: center;
float: left;
clear: both;
}


.backgroundcontainer {
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	background-color: slateblue;
	padding: 25px;
}

#header {
	font-size: 60pt;
	font-family: courier new;
	color: solid black;
	margin-left: 100px;
	margin-left: 10%;
	margin-right: 10%;
}

.menuheader {
	width: 75%;
	background-color: maroon;
	border-radius: 25px;
	margin-left: 10%;
	padding: 10px;
}

.menubox {
	width: 5%;
	/* do not shrink too much */
	min-width: 50px ;
	background-color: marron;
	float: left;
	padding-left: 10px;
	padding-right: 10px;
	margin-left: 50px;
	margin-top: 40px;
	margin-bottom: 30px;
	font-size: 25pt;
	color: palegoldenrod;
	clear: none;
}



.contentBlock {
	width: 90%;
	background-color: palevioletred;
	border-radius: 100px;
	margin-left: 5%;
}

.menubox:hover {
	color: royalblue;
	font-size: 27pt;
}

/* ====== toool tips ====== */


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 100px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  font-size: 15pt;
 
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}


/*===================================================*/


/* === remove underline from menubar === */

a:link {
color: white;
text-decoration: none;
}

/* visited link */
a:visited {
color: white;
text-decoration: none;
}

 mouse over link 
a:hover {
text-decoration: none;
color: hotpink;
}

/* selected link */
a:active {
color: yellow;
text-decoration: none;
}
 
 /*=======================================*/

/* === icon settings === */
.material-symbols-outlined {
	font-variation-settings: 
	  'FILL' 0,
	  'wght' 400,
	  'GRAD' 0,
	  'opsz' 24
}
/* === change and overide size === */
.iconsize{
	font-size: 40pt !important;
}


/* ===== homepage css ===== */

#Map1 {
	width: 525px;
	height: 525px;
	float: left;
	margin: 4%;
	border-radius: 100px;
}

#Map2 {
	width: 	800px;
	height: 750px;
	float: 	left;
	margin: 4%;
	border-radius: 50px;
}

#alphabet {
	width: 35%;
	margin-top: 4%;
	margin-right: 4%;
	float: right;
}

.introText {
	width: 90%;
	font-size: 25pt;
	text-align: left;
	margin: 5%;
}

#textContainer1 {
	width: 50%;
	float: left;
	margin: 4%;
	background-color: goldenrod;
}

#textContainer2 {
	width: 40%;
	float: right;
	margin: 4%;
	background-color: lightblue;
}

/*================================*/



/* ===== gods css ====== */

.godImages {
	width: 250px;
	float: left;
	clear: left;
	margin: 5%;
}

.godDescription {
	float: left;
	font-size: 20pt;
	margin: 5%;
	text-align: left;
}

/*=========================*/



/* ===== monsters css ===== */

.monsterImage {
	width: 30%;
	float: right;
	clear: right;
	margin: 3.5%;
}

.monsterDescription {
	width: 40%;
	float: left;
	clear: left;
	margin: 3.5%;
	font-size: 20pt;
	text-align: left;
}

.monsterCatagory{
	font-size: 25pt;
	margin-left: 18%;
	margin-top: 3%;
	margin-bottom: 2%;
	text-align: center;
	width: 60%;
	background-color: goldenrod;
	border-radius: 25px;
}

/* ======================== */



/* ===== Heroes css ===== */

.heroeImage {
	height: 350px;
	margin: 40px;
	float: left;
	clear: left;
}

.heroeDescription {
	height: 350px;
	width: 600px;
	margin: 40px;
	float: right;
	clear: right;
	font-size: 20pt;
	text-align: left;
}

/* ====================== */



/* ===== items css ====== */

.itemimage {
	height: 300px;
	float: right;
	clear: right;
	margin-right: 50px;
	margin-top: 35px;
	margin-bottom: 35px;
}

.itemdescription {
	height: 300px;
	width: 50%;
	float: left;
	clear: left;
	margin-left: 50px;
	margin-top: 35px;
	margin-bottom: 35px;
	font-size: 20pt;
	text-align: left;
}

/* ======================= */



/* ===== Games CSS ===== */

.gameLink {
	font-size: 25pt;
	color: black;
	margin-top: 50px;
	margin-bottom: 50px;
	margin-left: 100px;
}

.gameImage {
	width: 300px;
	height: 300px;
	border-radius: 25px;
}

.gameContentBlock {
	width: 100%;
	padding: 5%;
	background-color: steelblue;
}

.backButton {
	width: 200px;
	margin-bottom: 100px;
	background-color: maroon;
	font-size: 20pt;
	border-radius: 25px;
}

/* ======================= */



/* ===== Games CSS ===== */

#projectDescription {
	font-size: 20pt;
	margin-left: 100px;
	margin-right: 100px;
	margin-bottom: 50px;
	margin-top: 50px;
}

.projectImage {
	width: 70%;
	margin-top: 25px;
	margin-bottom: 50px;
}

/* ======================= */