@font-face {
	font-family: hypnos-default;
	src: url("HypnoFont.ttf") format("truetype");
}

* {
	image-rendering: pixelated;
	font-family: hypnos-default;

    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}

:root {
	--bgfill: #e3dad4;
}


#main-win {
	position: fixed;
	width: 98vw; height: 95vh;
	left: 1vw; top: 2.5vh;
	
	overflow: hidden;
}

#main-win-border{
	position: relative; z-index: 150;
	width: 100%; height: 100%;
	border-image-source: url("images/windowpane.png");
	border-image-slice: 21 23 5 22 fill;
	border-image-width: 10vh 6vw 2vh 6vw;
	pointer-events: none;
}

.ui { 
	position: absolute;
	object-fit: contain;
	max-width: 100%; max-height: 100%;
	z-index: 160;
	width: 7vw; height: 7vh	/* these are just defaults*/
}

#explorer-header {
	position: absolute; z-index: 140;
	top: 9%; padding: 1% 3%;
	height: 7%; width: 101%;
	font-size: 1.25rem;

	background-image: url("images/explorerbar.png");
	background-size: 100% 100%;
	
	display: flex;
	justify-content: flex-start; 
	align-items: center;
}

#main-content {
	position: absolute; top: 0;
	width: 100%; height: 100%;
	background-color: var(--bgfill);
	overflow-y: scroll;
	
	border-style: solid;
	border-color: black;
	border-width: 0px 14vw;
}

#zoneselection {
	width: 100%; height: 20%;
	position: relative;
}

#zoneselection p {
	position: absolute; left: 20%;
	width: 65%; font-size: 1.2rem;
	margin-top: 5px;
	color: white; text-align: center; 
}

#zoneselection-icon {
	position: absolute; top: 0; z-index: 10;
	max-height: 78%; height: 100%;
	}
	
#zoneselection-bg {
	position: absolute; top: 0;
	width: 100%;
}

#autoplay-box {
	position: absolute; bottom: 1.5%; left: 1.5%; z-index: 140;
	width: 100%; height: 10%; overflow: hidden;
}

#autoplay-box>img {
	position: relative;
	height: 100%; z-index: 140;
}

#autoplay-text-box {
	position: absolute; top: 0; z-index: 130;
	left: -90.5%;
	height: 100%; width: 100%;
	transition: left ease-out 1.4s;
}

#autoplay-text-box>img {
	position: absolute; right: 0; z-index: 130;
	height: 100%;
}

#autoplay-text-text {
	position: absolute; z-index: 120;
	top: 10%; right: 0;
	height: 80%; width: 100%;
	
	background-color: purple; color: white;
	text-align: right;
	padding: 1.5%;
}