body, html {
	height: 100%;
	width: 100%;
	margin:0;
	padding:0;
	overflow:auto;
	touch-action: none;
	background-color:#66a3ff;
}
#pageCon{
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-content:center;
}
.flexC{
	display:flex;
	justify-content:center;
	align-content:center;
}
#mainHeader{
	position:absolute;
	top:0;
	width:100%;
	height:100px;
}
#siteNavCon{
	z-index:5;
	position:absolute;
	top:100px;
	width:100%;
	height:80px;
}
#siteNavInner{
	
}
.navBtn{
	margin:5px;
	height:100%;
	width:150px;
	background-color:#ff1a1a;
	border:2px solid #e60000;
	font-family:'Boogaloo';
	font-size: 24px;
	border-radius:5px;
	border-style:outset;
	display:flex;
	justify-content:center;
	align-items:center;
	user-select:none;
}
.navBtn:hover, .dropItem:hover{
	background-color:#ffbb33;
	border:2px solid #e69900;
}
#assetsDrop{
	position:absolute;
	top:80px;
	margin:5px;
	width:150px;
	display:none;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}
.dropItem{
	width:100%;
	height:40px;
	background-color:#ff1a1a;
	border:2px solid #e60000;
	font-family:'Boogaloo';
	font-size: 24px;
}
#gameAssets:hover #assetsDrop {
  display: flex;
}
#logo{
	padding:2px;
}
#mainImg{
	position:absolute;
	top:200px;
	left:calc(50% - 320px);
	width:640px;
	height:480px;
	border:2px solid RoyalBlue;
	border-radius:25px;
	background-image:url(js-eras.png);
}
#siteIntro{
	padding:10px;
	margin-top:20px;
	width:80%;
	height:130px;
	border-radius:25px;
	background-color: #ffffb3;
	border:2px solid #f2ed5a;
	text-align:center;
	font-family:'Boogaloo';
	font-size: 22px;
}
#mainContent{
	padding:10px;
	position:absolute;
	top:200px;
	width:800px;
	border-radius:25px;
	background-color: #ffffb3;
	border:2px solid #f2ed5a;
	font-family:'Boogaloo';
	font-size: 22px;
	text-align:center;
	max-width:80vw;
}
#pageContents{
	font-family: "Roboto";
	font-size:auto;
	position:fixed;
	top:10vh;
	left:0;
	height:80vh;
	width:200px;
	background-color:white;
	display:flex;
	flex-direction:column;
	align-items:center;
	border:2px solid RoyalBlue;
	border-radius:0px 5px 5px 0px;
	background-color:#91a8ee;
	overflow-y:scroll;
	overflow-x:hidden;
	z-index:5;
}
.contentLine{
	background-color:#D9E1F9;
	margin:1px;
	width:100%;
	text-align:center;
	user-select:none;
}
.contentLine:hover{
	background-color:#F2F5FE;
}
.mainSect{
	background-color:#F2F5FE;
}
@media screen and (max-width:1240px) {
	#pageContents{
		display:none;
	}
}
.headingtext{
	font-family:'Candal';
}
.headingtext.mainsection{
	padding:10px;
	margin:10px;
}
.pagelink{
	page-break-before: always;
}
.hidden{
	display:none;
}
.player_container {
	display:flex;
	justify-content:center;
	align-items:center;
	padding:5px;
}
.links_container {
	display:flex;
	justify-content:space-evenly;
	align-items:center;
	padding:5px;
}
.audio-track{
	width:100%;
}
.loop_track{
  cursor: pointer;
  height: 40px;
  width: 40px;
  border-radius:5px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4wLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj4NCjwhLS0gQ3JlYXRvcjogQ29yZWxEUkFXIFg2IC0tPg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIwLjQyMTQ5MmluIiBoZWlnaHQ9IjAuMzkwMzdpbiIgdmVyc2lvbj0iMS4wIiBzdHlsZT0ic2hhcGUtcmVuZGVyaW5nOmdlb21ldHJpY1ByZWNpc2lvbjsgdGV4dC1yZW5kZXJpbmc6Z2VvbWV0cmljUHJlY2lzaW9uOyBpbWFnZS1yZW5kZXJpbmc6b3B0aW1pemVRdWFsaXR5OyBmaWxsLXJ1bGU6ZXZlbm9kZDsgY2xpcC1ydWxlOmV2ZW5vZGQiDQp2aWV3Qm94PSIwIDAgNDIwIDM4OSINCiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogPGRlZnM+DQogIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQogICA8IVtDREFUQVsNCiAgICAuZmlsMCB7ZmlsbDpibGFja30NCiAgIF1dPg0KICA8L3N0eWxlPg0KIDwvZGVmcz4NCiA8ZyBpZD0iTGF5ZXJfeDAwMjBfMSI+DQogIDxtZXRhZGF0YSBpZD0iQ29yZWxDb3JwSURfMENvcmVsLUxheWVyIi8+DQogIDxwYXRoIGNsYXNzPSJmaWwwIiBkPSJNMTg3IDMxMWMtNjksMCAtNzEsLTMgLTcxLC02OWwzOCAwIC03NyAtODIgLTc3IDgyIDM4IDAgMCA2OWMwLDQzIDM1LDc4IDc4LDc4bDc2IDAgMTEyIDBjNDMsMCA3OCwtMzUgNzgsLTc4bDAgLTY5IC0xNSAwIC00OCAwIC0xNSAwYzAsNjYgLTIsNjkgLTcxLDY5bC00NiAweiIvPg0KICA8cGF0aCBjbGFzcz0iZmlsMCIgZD0iTTIzMyA3OGM2OSwwIDcxLDMgNzEsNjlsLTM4IDAgNzcgODMgNzcgLTgzIC0zOCAwIDAgLTY5YzAsLTQzIC0zNSwtNzggLTc4LC03OGwtNzYgMCAtMTEyIDBjLTQzLDAgLTc4LDM1IC03OCw3OGwwIDY5IDE1IDAgNDggMCAxNSAwYzAsLTY2IDIsLTY5IDcxLC02OWw0NiAweiIvPg0KIDwvZz4NCjwvc3ZnPg0K);
  background-repeat: no-repeat !important;
  background-position: center;
  background-size: 20px;
  background-color: #F1F3F4;
  margin: 2px;
}
.loop_track.false{
	background-color: #F1F3F4;
}
.loop_track.true{
	background-color: gray;
}
#fileNotes{
	margin-top:10px;
	border:2px solid gray;
	border-radius:5px;
	background-color:gainsboro;
	font-family: "Roboto";
	font-size:18px;
}
.audiocon{
	border:2px solid RoyalBlue;
	border-radius:15px;
	background-color:#91a8ee;
	margin-bottom:10px;
}
#nextButton{
	border-radius:5px;
	width:100px;
	height:50px;
	background-color:DodgerBlue;
	align-self:center;
	display:flex;
	justify-content:center;
	align-items:center;
}
#tagsTabber{
	width:95%;
	height:auto;
	display:flex;
	justify-content:left;
	flex-wrap:wrap;
}
.tagTab{
	width:15%;
	background-color:SkyBlue;
	border-top:2px solid DodgerBlue;
	border-right:2px solid DodgerBlue;
	border-radius:5px 5px 0px 0px;
	padding:10px;
	user-select:none;
}
.tagTab:first-child{margin-left:5px;border-left:2px solid DodgerBlue;}
.tagTab:hover{
	background-color:#bee5f4;
}
#tagsField{
	background-color:SkyBlue;
	border:2px solid DodgerBlue;
	border-radius:5px;
	width:95%;
	padding:5px;
	height:auto;
	display:flex;
	justify-content:left;
	flex-wrap:wrap;
}
.tagBtn{
	font-family:Roboto;
	font-size:18px;
	font-weight:500;
	height:20px;
	width:auto;
	border-radius:5px;
	user-select:none;
	background-color:DodgerBlue;
	padding:10px;
	margin:5px;
	white-space:nowrap;
	display:flex;
	position:relative;
}
.tagBtn:hover{
	background-color:#80bfff;
}
.tagGroups{
	background-color:SkyBlue;
	/*border:2px solid DodgerBlue;*/
	border-radius:5px;
	width:95%;
	padding:5px;
	height:auto;
	display:none;
	justify-content:left;
	flex-wrap:wrap;
}