@media screen and (max-width:480px){
		.s-img-purple, .s-img-green, .s-img-blue{
		min-width: 21.703675613397vw;
		min-height: 21.703675613397vw;
		max-width: 21.703675613397vw;
		max-height: 21.703675613397vw;
		border-radius: 21.703675613397vw;
	}
	
	.s-link{
	max-width: 100%;
	}
	
	.s-panel{
		display: inline-flex;
		flex-direction: row;
		max-width: 100%;
		align-content: center;
		align-items: center;
		text-align: center;
		justify-content: center;
		width: 100%;
	}
	
	.s-icon-place{
		max-width: 100%;
		text-align:center;
		display: inline-flex;
		align-content: center;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
	
	.staff_sub_panel{
		display: inline-flex;
		flex-direction: column;
		padding: 0px 5vw 0px 5vw;
		align-content: center;
		align-items: center;
		text-align: center;
		justify-content: center;
		max-width: 100%;
	}
	
	.s-name, .s-role{
	transition-duration: 0.3s;
	user-select: none;
	font-size: 4.3407351226795vw;
	overflow: hidden;
	width: 120%;
	opacity: 1.0;
	}
	
	.s-icon-in-pad{

	}
	
	.s-name{
	margin-top: 0px;
	}
	
	.s-role{
	margin-top: 0px;;
	}
	
	.s-icon-out-pad{
		display: inline-flex;
		flex-direction: column;
		padding: 0px 1vw 6vw 1vw;
		width: 100%;
		align-items: center;
		align-content: center;
		text-align: center;
		justify-content: center;
		max-width: 100%;
	}

.instruct-row{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
text-align: left;
padding: 16px 0px;
color: #233f66;
border-radius: 16px;
background-color: #ffffff;
}

.steam-cont{
display: none;
}

.steam-cont-2{
display: inline-flex;
}

.step-container{
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
}

.instruct-row2{
display: flex;
flex-direction: column;
align-items: start;
width: 100%;
text-align: left;
padding: 16px 0px;
}
			#big-nav{
			display: none;
			}
			
			#m-nav{
			display: block;
			position: fixed;
			left: 0px;
			top: 0px;
			width: 100%;
			z-index: 2000;
			}
			.info-title-2-blue, .info-title-2-green, .info-title-2-purple, .info-title-blue, .info-title-green, .info-title-purple{
			padding-top: 32px;
			}
			
			.blue-hr2{
			background-image: linear-gradient(90deg, #233f66cc 0%, #233f66ff 25%, #233f66ff 75%, #233f66cc 100%);
			margin: 0px;
			border: none;
			outline: none;
			padding: 0px;
			}
			
			.green-hr2{
			background-image: linear-gradient(90deg, #004400cc 0%, #004400ff 25%, #004400ff 75%, #004400cc 100%);
			margin: 0px;
			border: none;
			outline: none;
			padding: 0px;
			}
			
			.purple-hr2{
			background-image: linear-gradient(90deg, #662266cc 0%, #662266ff 25%, #662266ff 75%, #662266cc 100%);
			margin: 0px;
			border: none;
			outline: none;
			padding: 0px;
			}
			
			
		
		.m-nav-pad{
		display: block;
		width: 100%;
		background-color: #ffffff;
		}
		
		.m-logo{
			background-image: url('images/icons 2023/images/logo.png');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
			width: 100%;
			height: 64px;
			min-height: 64px;
			}
		
.bug-t-pad{
font-size: 6.6919666474642vw;
}

.bug-panel-green, .bug-panel-blue, .bug-panel-purple{

}

.mm-b-text{
font-size: 5.3535733179713vw;
}

.m-nav-mm-blue{
background-image: url('images/icons 2023/images/hbm.png');
width: 64px;
height: 64px;
min-height: 64px;
min-width: 64px;
background-size: contain;
}

.m-nav-mm-green{
background-image: url('images/icons 2023/images/hbm.png');
width: 64px;
height: 64px;
min-height: 64px;
min-width: 64px;
background-size: contain;
}

.m-nav-mm-purple{
background-image: url('images/icons 2023/images/hbm.png');
width: 64px;
height: 64px;
min-height: 64px;
min-width: 64px;
background-size: contain;
}

.bug-container{
padding: 8px 0%;
margin: 0px;
max-width: 100%;
}

.bug-content{
font-size: 5.3535733179713vw;
}

.bug-s-pad, .bug-o-pad, .bug-d-pad{
font-size: calc(5.3535733179713vw * 0.75);
padding: 0px 1.3383933294928vw;
}
		
.instruct-title{
font-size: 7.4950026451599vw;
}
		
.steam-title{
padding-top: 16px;
width: 100%;
font-family: "Open Sans Bold";
font-size: 5.0858946520728vw;
}

.page-number-padding{
padding: 0px 1.7399113283407vw;

}

.page-number{
font-size: 9.3687533064499vw;
}
		
.rules-pad{
	padding: 0px 2.5%;
	font-family: "Open Sans Regular";
	font-size: 5.3535733179713vw;
	max-width: 95%;
	width: 100%;
	}
	
	.rules-div{
	text-align: left;
	}
	
	.rules-blue, .rules-green, .rules-purple{
	list-style-position: outside;
	padding-left: 48px;
	text-align: left;
	font-family: "Open Sans Bold";
	padding-top: 0;
	padding-bottom: 0;
	font-weight: normal;
	letter-spacing: 0.3pt;
	color: #000000;
}

.rules-blue li{
	color: #233f66;
	padding: 0;
	line-height: 0pt;
	margin: 0px;
}

.rules-green li{
	color: #004400;
	padding: 0;
	line-height: 0pt;
	margin: 0px;
}

.rules-pruple li{
	color: #662266;
	padding: 0;
	line-height: 0pt;
	margin: 0px;
}

.rules-green li p, .rules-blue li p, .rules-purple li p{
	font-family: "Open Sans Condensed Bold";
	font-size: 5.3535733179713vw;
	padding-left: 4px;
	line-height: 12pt;
	padding-top: 0;
	padding-bottom: 0;
}

.rules-green li p{
	color: #004400;
}

.rules-blue li p{
	color: #233f66;
}

.rules-purple li p{
	color: #662266;
}

.rules-green li .subrules-green li p, .rules-blue li .subrules-blue li p, .rules-purple li .subrules-purple li p{
	font-family: "Open Sans Condensed Bold";
	line-height: 12pt;
	letter-spacing: -0.25pt;
	word-spacing: 2pt;
	padding-top: 0;
	padding-bottom: 0;
}

.rules-blue li .subrules-blue li p{
	color: #476FFF;
}

.rules-purple li .subrules-purple li p{
	color: #cc66EE;
}

.rules-green li .subrules-green li p{
	color: #00a300;
}

.subrules-blue li, .subrules-green li, .subrules-purple li{
	list-style-position: outside;
	list-style-type: upper-alpha;
	font-size: 5.3535733179713vw;
	margin-left: -24px;
	line-height: 6.4242879815656vw;
}

.last-rule-green{
	color: #00a300;
}

.last-rule-blue{
	color: #476FFF;
}

.last-rule-purple{
	color: #cc66EE;
}

.subrules-blue li p, .subrules-purple li p, .subrules-green li p{
	text-align: left;
	font-size: 5.3535733179713vw;
	font-family: "Open Sans Regular";
	display: inline;
	line-height: 4.8182159861742vw;
}

.subrules-blue li p{
	color: #476FFF;
}

.subrules-green li p{
	color: #00a300;
}

.subrules-purple li p{
	color: #cc66EE;
}
	
	.news_button-blue, .news_button-green, .news_button-purple{
	padding-bottom: 8px;
	font-size: 6.4242879815656vw;
	user-select: none;
	}
	
	.news-container{
	font-family: "Open Sans Bold";
	color: #ffffff;
	display: inline-flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-bottom: 24px;
	max-width: 95%;
	width:100%;
	}
	
	.news-h3, .news-date{
	padding: 0px;
	margin: 0px;
	font-size: 7.4950026451599vw;
	}
	
	.news-title{
	display: inline-flex;
	flex-direction: row;
	padding: 4px 0px 0px 0px;
	text-align: center;
	width: 100%;
	align-content: center;
	align-items: center;
	justify-content: center;
	background-color: #ffffff33;
	border-bottom: solid 1px #ffffff22;
	}
	
	.news-title-name, .news-date{
	text-align: center;
	width:50%;
	padding-bottom: 8px;
	}
	
	.news-panel{
	border: solid 1px #ffffff66;
	background-color: #00000044;
	border-radius: 8px;
	max-width: 95%;
	box-shadow: 5px 5px 10px 0px #00000066;
	backdrop-filter: blur(8px);
	width: 100%;
	}
	
	.news-content{
	font-family: "Open Sans Regular";
	text-align: left;
	padding: 24px 16px 8px 16px;
	font-size: 5.3535733179713vw;
	box-shadow: inset 0px 0px 48px 0px #000000;
	border-radius: 0px 0px 8px 8px;
	}
	
	.news-content ol, .news-content ol ul, .news-content ul{
    margin-left: 16px;
	padding-left: 16px;
	padding-right: 0px;
	padding-bottom: 16px;
}

.news-content li{
margin-bottom: -3px;
}

.news-content ul, .news-content ol {
  list-style-position: outside;
}
	
		.video-text{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		}
		
		
		.video-title{
		font-family: "Paytone One Regular";
		font-size: 10.707146635943vw;
		padding-bottom: 1vw;
		}
		
		.title-blue{
		color: #000000;
		font-family: "Paytone One Regular";
		background-color: #476FFF;
		text-align: center;
		border-radius: 8px 8px 0px 0px;
		height: 16.060719953914vw;
		padding: 0px 0px 4px 0px;
		box-shadow: inset 0px 0px 40px #00398f;
		color: #ffffff;;
		border-top: solid 1px #476FFF;
		border-left: solid 1px #476FFF;
		border-right: solid 1px #476FFF;
		font-size: 5.3535733179713vw;
		}

		.title-green{
		color: #000000;
		font-family: "Paytone One Regular";
		background-color: #00a300;
		text-align: center;
		border-radius: 8px 8px 0px 0px;
		height: 16.060719953914vw;
		padding: 0px 0px 4px 0px;
		box-shadow: inset 0px 0px 40px #003300;
		color: #ffffff;;
		border-top: solid 1px #00a300;
		border-left: solid 1px #00a300;
		border-right: solid 1px #00a300;
		font-size: 5.3535733179713vw;
		}

		.title-purple{
		color: #000000;
		font-family: "Paytone One Regular";
		background-color: #cc66EE;
		text-align: center;
		border-radius: 8px 8px 0px 0px;
		height: 16.060719953914vw;
		padding: 0px 0px 4px 0px;
		box-shadow: inset 0px 0px 40px #220066;
		color: #ffffff;;
		border-top: solid 1px #cc66EE;
		border-left: solid 1px #cc66EE;
		border-right: solid 1px #cc66EE;
		font-size: 5.3535733179713vw;
		}

		.article-container{
		display: inline-flex;
		flex-direction: column;
		border-radius: 16px;
		box-shadow: 5px 5px 10px 0px #000000;
		width: 95%;
		}

		.content-green{
		font-family: "Open Sans Regular";
		font-size: 11pt;
		box-shadow: inset 0px 0px 48px #000000;
		border-radius: 0px 0px 8px 8px;
		background-color: #00a30066;
		border-left: solid 1px #00a300;
		border-right: solid 1px #00a300;
		border-bottom: solid 1px #00a300;
		color: #ffffff;
		}

		.content-blue{
		font-family: "Open Sans Regular";
		font-size: 11pt;
		box-shadow: inset 0px 0px 48px #000000;
		border-radius: 0px 0px 8px 8px;
		background-color: #476FFF66;
		border-left: solid 1px #476FFF;
		border-right: solid 1px #476FFF;
		border-bottom: solid 1px #476FFF;
		color: #ffffff;
		}

		.content-purple{
		font-family: "Open Sans Regular";
		font-size: 11pt;
		box-shadow: inset 0px 0px 48px #000000;
		border-radius: 0px 0px 8px 8px;
		background-color: #cc66EE66;
		border-left: solid 1px #cc66EE;
		border-right: solid 1px #cc66EE;
		border-bottom: solid 1px #cc66EE;
		color: #ffffff;
		}

		.section{
		height: calc(4.8182159861742vw + 0.25vw);
		padding: 0px;
		margin: 0px;
		display: block;
		font-size: 7.2273239792613vw;
		}

		.subsection{
		padding: 0px;
		margin: 0px;
		display: block;
		font-size: 11pt;
		text-align: left;
		}

		.nav-container{
		display: inline-flex;
		flex-direction: column;
		width: 100%;
		padding: 0px 0px 0px 0px;
		text-align: center;
		align-items: center;
		align-content: center;
		}

		.nav-containter-content{
		background-image: linear-gradient(90deg, #00000000 0%, #000000ff 33%, #000000ff 66%, #00000000 100%);
		padding: 0px 0px 4px 0px;
		margin: 0px;
		display: inline-block;
		flex-direction: row;
		text-align: center;
		align-content: center;
		align-items: center;
		width: 100%;
		height: 32px;
		color: #ffffff;
		}

		.nav-containter-blue{
		background-image: linear-gradient(90deg, #476FFF00 0%, #476FFF88 33%, #476FFF88 66%, #476FFF00 100%);
		margin: 0px;
		display: inline-block;
		flex-direction: row;
		text-align: center;
		align-content: center;
		align-items: center;
		width: 100%;
		height: 32px;
		color: #ffffff;
		}

		.nav-containter-green{
		background-image: linear-gradient(90deg, #00a30000 0%, #00a30088 33%, #00a30088 66%, #00a30000 100%);
		margin: 0px;
		display: inline-block;
		flex-direction: row;
		text-align: center;
		align-content: center;
		align-items: center;
		width: 100%;
		height: 32px;
		color: #ffffff;
		}

		.nav-containter-purple{
		background-image: linear-gradient(90deg, #cc66EE00 0%, #cc66EE88 33%, #cc66EE88 66%, #cc66EE00 100%);
		margin: 0px;
		display: inline-block;
		flex-direction: row;
		text-align: center;
		align-content: center;
		align-items: center;
		width: 100%;
		height: 32px;
		color: #ffffff;
		}
		
		.m-container-blue{
		background-color: #476FFF88;
		margin: 0px;
		display: inline-flex;
		flex-direction: row;
		text-align: center;
		align-content: center;
		align-items: center;
		width: 100%;
		color: #ffffff;
		}
		
		.m-container-green{
		background-color: #00a30088;
		margin: 0px;
		display: inline-flex;
		flex-direction: row;
		text-align: center;
		align-content: center;
		align-items: center;
		width: 100%;
		color: #ffffff;
		}
		
		.m-container-purple{
		background-color: #cc66EE88;
		margin: 0px;
		display: inline-flex;
		flex-direction: row;
		text-align: center;
		align-content: center;
		align-items: center;
		width: 100%;
		color: #ffffff;
		}

		.button-spot{
		display: inline-flex;
		vertical-align: middle;
		align-content: center;
		align-items: center;
		height: 32px;
		font-family: "Paytone One Regular"
		}

		.mbutton{

		}

		.mainmenu-blue{
		background-color: #233f66;
		}
		.mainmenu-green{
		background-color: #004400;
		}
		.mainmenu-purple{
		background-color: #662266;
		}

		.head-blue, .head-blue-ark, .head-blue-mc{
		background-color: #233f66aa;
		background-blend-mode: multiply;
		}
		.head-green, .head-green-ark, .head-green-mc{
		background-color: #004400aa;
		background-blend-mode: multiply;
		}
		.head-purple, .head-purple-ark, .head-purple-mc{
		background-color: #662266aa;
		background-blend-mode: multiply;
		}

		.head-blue, .head-green, .head-purple{
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
		background-image: url( "serenebg_2022.jpg");
		background-blend-mode: multiply;
		width: 100%;
		text-align: center;
		align-items: center;
		display: inline-flex;
		flex-direction: column;
		}
		
		.head-blue-ark, .head-green-ark, .head-purple-ark{
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
		background-image: url( "1292307-3000x1701-desktop-hd-ark-survival-evolved-wallpaper-photo.jpg");
		background-blend-mode: multiply;
		width: 100%;
		text-align: center;
		align-items: center;
		display: inline-flex;
		flex-direction: column;
		}
		
		.head-blue-mc, .head-green-mc, .head-purple-mc{
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
		background-image: url( "mcbg.png");
		background-blend-mode: multiply;
		width: 100%;
		text-align: center;
		align-items: center;
		display: inline-flex;
		flex-direction: column;
		}

		.blur-me{
		width: 100%;
		text-align: center;
		align-items: center;
		display: inline-flex;
		flex-direction: column;
		backdrop-filter: blur(2px);
		}

		.mbutton{
		text-transform: uppercase;
		}

		.serene-logo{
		font-family: "Paytone One Regular";
		font-size: ;
		text-align: center;
		color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		align-content: center;
		padding-top: calc(37.475013225799vw / 7);
		}

		.serene-title{
		font-size: 18.7375066129vw;
		}

		.serene-image{
		background-image: url("serenespin.gif");
		background-size: contain;
		width: 37.475013225799vw;
		height: 37.475013225799vw;
		display: none;
		position: absolute;
		margin-left: -37.475013225799vw;
		}

		.grad-hr{
		border: none;
		outline: none;
		padding: none;
		width: 100%;
		background-image: linear-gradient(90deg, #ffffff00 0%, #ffffffff 25%, #ffffffff 75%, #ffffff00 100%);
		height: 2px;
		margin: 0px;
		}

		#mainpage{
		width: 100%;
		text-align: center;
		padding-top: 0px;
		}

		.sectioned-area-1{
		height: 66.919666474642vw;
		width: 100%;
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
		background-color: #cc66EE;
		background-image: url( "serenebg_2022.jpg");
		background-blend-mode: multiply;
		opacity: 1.0;
		box-shadow: inset 0px 0px 32px #000000;
		}
		
		.sectioned-area-ark{
		height: 66.919666474642vw;
		width: 100%;
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
		background-color: #cc66EE;
		background-image: url( "1292307-3000x1701-desktop-hd-ark-survival-evolved-wallpaper-photo.jpg");
		background-blend-mode: multiply;
		opacity: 1.0;
		box-shadow: inset 0px 0px 32px #000000;
		}
		
		.sectioned-area-mc{
		height: 66.919666474642vw;
		width: 100%;
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
		background-color: #cc66EE;
		background-image: url( "mcbg.png");
		background-blend-mode: multiply;
		opacity: 1.0;
		box-shadow: inset 0px 0px 32px #000000;
		}

		.sectioned-area-2{
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
		background-color: #cc66EE;
		background-image: url( "serenebg_2022.jpg");
		background-blend-mode: multiply;
		opacity: 1.0;
		box-shadow: inset 0px 0px 32px #000000;
		max-width: 100%!important;
		transition-duration: 2s;
		}
		
		.sectioned-area-2-ark{
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
		background-color: #cc66EE;
		background-image: url( "1292307-3000x1701-desktop-hd-ark-survival-evolved-wallpaper-photo.jpg");
		background-blend-mode: multiply;
		opacity: 1.0;
		box-shadow: inset 0px 0px 32px #000000;
		max-width: 100%!important;
		transition-duration: 2s;
		}
		
		.sectioned-area-2-ark{
		width: 100%;
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
		background-color: #cc66EE;
		background-image: url( "mcbg.png");
		background-blend-mode: multiply;
		opacity: 1.0;
		box-shadow: inset 0px 0px 32px #000000;
		max-width:100%;
		transition-duration: 2s;
		}

		.sectional-bg-purple, .sectional-bg-purple-2{
		background-color: #662266aa;
		box-shadow: inset 0px 0px 12vw #662266;
		}

		.sectional-bg-green, .sectional-bg-green-2{
		background-color: #004400aa;
		box-shadow: inset 0px 0px 12vw #004400;
		}

		.sectional-bg-blue, .sectional-bg-blue-2{
		background-color: #233f66aa;
		box-shadow: inset 0px 0px 12vw #233f66;
		}

		.sectional-bg-blue, .sectional-bg-green, .sectional-bg-purple{
		height: 66.919666474642vw;
		width: 100%;
		position: absolute;
		left: 0;
		right: 100%;
		}

		.sectional-bg-blue-2, .sectional-bg-green-2, .sectional-bg-purple-2{
		backdrop-filter: blur(2px);
		}

		.section-content-color{
		height: 66.919666474642vw;
		width: 100%;
		color: #ffffff;
		font-family: "Open Sans Condensed Bold";
		font-size: calc(6.4242879815656vw * 0.76);
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		vertical-align: middle;
		}

		.section-content-color-2{
		max-width: 100%!important;
		color: #ffffff;
		font-family: "Open Sans Condensed Bold";
		font-size: 6.4242879815656vw;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		vertical-align: middle;
		}

		.button-nav{
		width: 100%;
		margin-top: 8px;
		padding: 8px, 0px;
		}

		.informative{
		width: 95%;
		padding: 48px 2.5% 64px 2.5%;
		font-family: "Paytone One Regular";
		font-size: 10.707146635943vw;
		background-color: #ffffff;
		}
		
		.informative2{
		width: 95%;
		padding: 6px 2.5% 32px 2.5%;
		font-family: "Paytone One Regular";
		font-size: 10.707146635943vw;
		background-color: #ffffff;
		}
		
		.informative3{
		width: 95%;
		padding: 6px 2.5% 0px 2.5%;
		font-family: "Paytone One Regular";
		font-size: 10.707146635943vw;
		background-color: #ffffff;
		}
		
		.informative4{
		width: 95%;
		padding: 32px 2.5% 0px 2.5%;
		font-family: "Paytone One Regular";
		font-size: 10.707146635943vw;
		background-color: #ffffff;
		}

		.info-panel{
		justify-content: center;
		align-content: center;
		align-items: top;
		text-align: center;
		display: inline-flex;
		width: 100%;
		}

		.info-title-blue, .info-title-2-blue{
		color: #233f66;
		}

		.info-title-green, .info-title-2-green{
		color: #004400;
		}

		.info-title-purple, .info-title-2-purple{
		color: #662266;
		}

		.info-title-blue, .info-title-green, .info-title-purple{
		padding-bottom: 32px;
		font-size: 10.707146635943vw; 
		}
		
		.info-title-2-blue, .info-title-2-green, .info-title-2-purple{
		padding-bottom: 0px;
		font-size: 10.707146635943vw; 
		text-align: center;
		margin: 0px;
		}

		.info-col-green{
		color: #004400;
		}

		.info-col-blue{
		color: #233f66;
		}

		.info-col-purple{
		color: #662266;
		}

		.info-col-purple, .info-col-green, .info-col-blue{
		font-family: "Open Sans Condensed Bold";
		width: 100%;
		display: block;
		text-align: center;
		font-size: 6.4242879815656vw;

		}

		.icon-img-purple, .icon-img-blue, .icon-img-green{
		width: 35.333583898611vw;
		height: 35.333583898611vw;
		background-size: contain;
		}

		.icon-img-purple{
		filter: sepia(100%) brightness(25%) saturate(1800%) hue-rotate(270deg);
		}

		.icon-img-blue{
		filter: sepia(100%) brightness(20%) saturate(1800%) hue-rotate(190deg);
		}

		.icon-img-green{
		filter: sepia(100%) brightness(20%) saturate(1800%) hue-rotate(120deg);
		}

		.subicon{
		width: 21.414293271885vw;
		height: 21.414293271885vw;
		background-size: contain;
		background-repeat:no-repeat;
		background-position: center;
		}

		.subicon-padding{
		display: inline-flex;
		flex-direction: row;
		text-align: left;
		}

		.subinfo{
		display: inline-flex;
		flex-direction: column;
		vertical-align: middle;
		padding-left: 6px;
		font-family: "Open Sans Condensed Bold";
		align-content: center;
		align-items: flex-start;
		justify-content: center;
		font-size: 4.8182159861742vw;
		width:100%;
		text-align: left;
		}

		.icon-img-green, .icon-img-blue, .icon-img-purple{
		user-select: none;
		cursor: pointer;
		background-repeat:no-repeat;
		}

		.icon-column{
		display: flex;
		flex-direction: row;
		align-items: center;
		align-content: center;
		justify-content: center;
		text-align: center;
		max-width: 100%;
		visibility: hidden;
		display: none;
		}
		
		#showme, #showmetoo{
		visibility: visible;
		display: flex!important;
		flex-direction: column!important;
		text-align:center!important;
		align-content: center!important;
		align-items: center!important;
		width: 100%;
		}
		.gen-button-purple{
		visibility: visible;
		display: flex;
		background-color: #662266;
		font-size: 3.725vw;
		color: #ffffff;
		padding: 0px 8px 4px 8px;
		border-radius: 24px;
		user-select: none;
		cursor: pointer;
		border: solid 4px #cc66EE;
		}
		
		.gen-button-green{
		visibility: visible;
		display: flex;
		background-color: #004400;
		font-size: 3.725vw;
		color: #ffffff;
		padding: 0px 8px 4px 8px;
		border-radius: 24px;
		user-select: none;
		cursor: pointer;
		border: solid 4px #00a300;
		}
		
		.gen-button-blue{
		visibility: visible;
		display: flex;
		background-color: #233f66;
		font-size: 3.725vw;
		color: #ffffff;
		padding: 0px 8px 4px 8px;
		border-radius: 24px;
		user-select: none;
		cursor: pointer;
		border: solid 4px #476FFF;
		}

		.icon-padding-green, .icon-padding-blue, .icon-padding-purple{
		padding: 0px;
		display: flex;
		flex-direction: column;
		font-family: "Paytone One Regular";
		font-size: 14pt;
		user-select: none;
		text-align: center;
		align-items: center;
		align-content: center;
		}

		.icon-padding-green, .icons-title-green{
		color: #004400;
		}

		.icon-padding-blue, .icons-title-blue{
		color: #233f66;
		}

		.icon-padding-purple, .icons-title-purple{
		color: #662266;
		}

		.icons-title-green, .icons-title-blue, .icons-title-purple{
		font-family: "Paytone One Regular";
		font-size: 10.707146635943vw;
		
		}

		.icon-name{
		font-size: 5.3535733179713vw;
		width: 10vw;
		}

		.icon-container{
		display: inline-flex;
		flex-direction: column;
		max-width: 100%;
		}

		.info-col-1-green{
		display: block;
		color: #004400;
		}

		.info-col-1-blue{
		display: block;
		color: #233f66;
		}

		.info-col-1-purple{
		display: block;
		color: #662266;
		}

		.info-col-1-blue, .info-col-1-green, .info-col-1-purple{
		width: 95%;
		padding-top: 32px;
		padding-bottom: 32px;
		font-family: "Open Sans Condensed Bold";
		text-align: justify;
		font-size: 6.4242879815656vw;;
		}

		.serene-quote{
		font-family: "Open Sans Italic";
		font-size: 5.3535733179713vw;
		}

		.info-stuff{
		visibility: hidden;
		display: none;
		position: absolute;
		background-color: #ffffff;
		z-index: 200;
		box-shadow: 5px 5px 20px 0px #000000;
		text-align: left;
		padding: 16px 16px;
		margin-top: calc(35.333583898611vw + 1vw);
		border-radius: 16px;
		}

		#theater:hover .info-stuff{
		visibility: hidden;
		display: flex;
		flex-direction: column;
		text-align: left;
		}
		#arena:hover .info-stuff{
		visibility: hidden;
		display: flex;
		flex-direction: column;
		text-align: left;
		}
		#egypt:hover .info-stuff{
		visibility: hidden;
		display: flex;
		flex-direction: column;
		text-align: left;
		}
		#caves:hover .info-stuff{
		visibility: hidden;
		display: flex;
		flex-direction: column;
		text-align: left;
		}
		#anime:hover .info-stuff{
		visibility: hidden;
		display: flex;
		flex-direction: column;
		text-align: left;
		}
		
		}