* {
	margin: 0;
	font-family: "Public Sans", "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
	color: black;
}

body {
	display: flex;
	flex-direction: column;
}

#overlay{
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 11;
	pointer-events: none;
}

#overlay-copyright {
	position: absolute;
	font-size: 1.5vmin;
	bottom: 1vh;
	right: 1vw;
	color: white;
	text-shadow: 0 0 1vmin black;
}


#loading {
	position: absolute;
	background: black;
	height: 100%;
	width: 100%;
	z-index: 10;

	display: flex;
	justify-content: center;
}

@keyframes loadend {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

#loading * {
	pointer-events: none;
}

#loading>* {
	animation: 1s fadein;
	transition: opacity 0.5s;
}

@keyframes fadein {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

#load-logo {
	position: absolute;
	margin: auto;
	height: 25vh;
	top: 30vh;
	transition:  translate 1s;
}

#load-welcome{
	position: absolute;
	font-size: 4vmin;
	color: white;
	top:60vh;
}

#loading-bar{
	position: absolute;
	margin: auto;
	top:70vh;
	height: 10vh;
	display: flex;
	justify-content: center;
	gap:3vh
}
#loading-bar .particle{
	background: white;
	border-radius: 100%;
	height: 1.5vmin;
	width:1.5vmin;
	transition: scale 0.5s;
}

.particle:nth-child(1){
	animation: 2s ease infinite particle-anime;
}
.particle:nth-child(2){
	animation: 2s ease 0.2s infinite particle-anime;
}
.particle:nth-child(3){
	animation: 2s ease 0.4s infinite particle-anime;
}
.particle:nth-child(4){
	animation: 2s ease 0.6s infinite particle-anime;
}
.particle:nth-child(5){
	animation: 2s ease 0.8s infinite particle-anime;
}

@keyframes particle-anime{
	0%{
		translate:0 0;
	}
	50%{
		translate: 0 1vmin;
	}
	100%{
		translate: 0 0;
	}
}


#header {
	position: absolute;
	height: 8vmin;
	width:100%;
	background: rgba(0, 0, 0, 0.5);
}

#main {
	height: 100%;
	width: 100%;
}

#mainBack{
	position: absolute;
	background-size: auto 140vh;
	background-repeat: repeat;

	height: 100%;
	width: 100%;
}

#mainMenu{
	position: absolute;
	top:0;
	width:100vw;
	height:100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	overflow: auto;
	background-color:rgba(0,0,0,0.5);
	background-image: url(../images/logo-watermark.png) ;
	background-repeat: no-repeat;
	background-position: center right -10vmin;
	background-size: auto 85vh;
}

#topView{
	width: 100%;
	height: 30vmin;
}

#topView *{
	text-align: center;
	color: white;
}
#topView h1{
	font-size: 10vmin;
	line-height: 100%;
	margin:2.5vmin 0;
}
#topView p{
	font-size: 3vmin;;
	line-height: 5vmin;
}

#mainMenu .field{
	position: relative;
	width:40vmin;
	height: 25vmin;
	border-radius: 1vmin;
	overflow: hidden;
	display: flex;
	justify-content: center;
	margin: 5vmin;
	outline: solid white 0.5vmin;
	box-shadow: 0 1vmin 3vmin black;
	transition:border-radius 0.5s;
}

#mainMenu .field p{
	position: absolute;
	bottom:0;
	left:0;
	right:0;
	text-align: center;
	font-size: 2vmin;
	margin:0 auto;
	padding: 1vmin 0;
	text-shadow: 0 0 1vmin black;
	color: white;
	background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3));
	transition: scale 0.5s;
	transform-origin:bottom ;
}

#mainMenu .field:hover p{
	scale:1.2;
}

#mainMenu .field img{
	position: absolute;
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: scale 0.5s;
}

#mainMenu .field:hover img:nth-child(2){
	scale:1.1;
}

#panorama{
	position: absolute;
	width:100%;
	height: 100%;
	top:0;
	opacity:0;
	transition: opacity 0.5s;
	visibility: hidden;
}

.pnlm-load-box{
	visibility: hidden;
}

.hotSpot{
	width:0;
	height: 0;
	transition: opacity 0.5s;
}
.hidden .hotSpot{
	opacity: 0;
}
.hidden .hotSpot:hover{
	opacity: 1;
}
.direction{
	position: absolute;
	top:-8vmin;
	left:-8vmin;
	width:16vmin;
	height:16vmin;
	background-image:url("../images/direction.png");
	background-size: cover;
	transition: scale 0.5s;
}
.direction:hover{
	scale:1.1;
}
.fieldPrev{
	position: absolute;
	top:-25vmin;
	left:-10vmin;
	width:20vmin;
	height: 20vmin;
	border-radius: 50%;
	box-shadow: 0 0 1vmin black;
	overflow: hidden;
}
.fieldPrev img{
	position: absolute;
	width:20vmin;
	height: 20vmin;

}
.fieldPrev h1{
	position: absolute;
	bottom: 0;
	padding-bottom:4vmin;
	font-size: 1.5vmin;
	color: white;
	text-align: center;
	width: 100%;
	text-shadow: 0 0 1vmin black;
	background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3));
}

#UI{
	visibility: hidden;
	opacity: 0;
	transition: opacity 1s;
	position: absolute;
	height: 100%;
	width:100%;
	pointer-events: none;
	overflow: hidden;
}

#UI *{
	transition: opacity 0.5s;
	pointer-events:auto;
}

#UI.hidden>*{
	opacity: 0;
}
#UI.hidden>div:hover,#UI.hidden #panoramaInfo{
	opacity:1;
}

#panoramaInfo{
	position: absolute;
	bottom:5vmin;
	left:5vmin;
}
#panoramaInfo *{
	color: white;
	text-shadow: 0 0 1vmin black;
}
#panoramaInfo h1{
	font-size: 3vmin;
	width:fit-content;
}
#panoramaInfo p{
	font-size: 1.5vmin;
	line-height: 2vmin;
	text-align: right;
	width:auto;
}

#miniMap{
	position: absolute;
	border-radius: 50%;
	height: 14vmin;
	width:14vmin;
	top:5vmin;
	right: 5vmin;
	overflow: hidden;
	background:black;
	box-shadow: 0 0 1vmin black;
}
#miniMap img{
	position: absolute;
}
#miniMapImg{
	width: 100vmin;
	top:7vmin;
	left:7vmin;
}
#miniMapPlayer{
	width: 13vmin;
	margin:0.5vmin;
	outline: solid white 0.2vmin;
	border-radius: 50%;
}

#timeIndicator{
	position: absolute;
	width:4vmin;
	height: 4vmin;
	border-radius: 50%;
	background:rgba(0,0,0,0.5);
	transition: opacity 0.5s ,background 0.5s;

	top:2vmin;
	right:2vmin;
	box-shadow: 0 0 1vmin black;
	visibility: hidden;
}

#timeIndicator:hover{
	background:black;
}
#timeIndicator img{
	outline: solid white 0.2vmin;
	margin: 0.5vmin;
	width:3vmin;
	border-radius: 50%;
}

#menuOpener{
	position: absolute;
	height: 5vmin;
	top:4vmin;
	left:0vmin;
	display: flex;
	background:rgba(255, 0, 0, 0.7);
	border-top-right-radius: 1vmin;
	border-bottom-right-radius: 1vmin;
}
#menuOpener *{
	pointer-events: none;
}
#menuOpener img{
	height: 100%;
	translate: 0.5vmin;
	transition: translate 0.5s;
}
#menuOpener:hover img{
	translate: 0;
}
#menuOpener h2{
	margin-top: 0.5vmin;
	margin-right: 1vmin;
	line-height: 2vmin;
	font-size: 1.5vmin;
	text-align:center;
}

#UIButtons{
	position: absolute;
	display: flex;
	flex-flow: column;
	top:15vmin;
	left:5vmin;
	gap:5vmin;
}
#UIButtons>div{
	position: relative;
	height: 5vmin;
	width: 5vmin;
}
#UIButtons>div>img{
	height: 100%;
}
#UIButtons>div>p{
	color: white;
	font-size: 1.5vmin;
	text-shadow: 0 0 1vmin black;
	position: absolute;
	text-align: center;
	transition: opacity 0.5s,translate 0.5s;
	opacity: 0;
	pointer-events: none;
	bottom:-1vmin;
	margin:0 -2.5vmin;
	width:10vmin;
}
#UIButtons>div:hover>p{
	opacity: 1;
	translate:0 1vmin;
}

#UIpop{
	position: absolute;
	visibility: hidden;
	width:100%;
	height: 100%;
	transition: opacity 1s, translate 1s;
	opacity: 0;
	translate: 0 1vmin;
}
#popCloser{
	position: absolute;
	width: 100%;
	height: 100%;
}

#UIpop>.content{
	position: absolute;
	left: 0;
	right: 0;
	top:0;
	bottom: 0;
	margin: auto;
	background:rgba(0, 0, 0, 0.5);
	color: white;
	border-radius: 2vmin;
}
#UIpop>.content.hidden{
	visibility: hidden;
}

.popClose{
	position: absolute;
	width: 1.5vmin;
	top:1vmin;
	right: 1vmin;
}

#homePop{
	height: 15vmin;
	width:60vmin;
}
#homePop p{
	position: absolute;
	text-align: center;
	top:5vmin;
	line-height: 5vmin;
	font-size: 2vmin;
	width:100%;
	text-align: center;
	color: white;
}

#sharePop{
	height:18vmin;
	width:60vmin;
}
#copyArea{
	position: absolute;
	display: flex;
	top:5vmin;
	left:5vmin;
	width:50vmin;
}
#sharePop input[type=button]{
	font-size: 3vmin;
	width:10vmin;
	text-align: center;
	color: black;
	background: gray;
	transition:  background 0.5s;
	border: none;
	border-top-left-radius: 1vmin;
	border-bottom-left-radius: 1vmin;
}
#sharePop input[type=button]:hover{
	background: lightgray;
}
#sharePop input[type=text]{
	font-size: 3vmin;
	width:40vmin;
	text-align: center;
	color: black;
	border: none;
	border-top-right-radius: 1vmin;
	border-bottom-right-radius: 1vmin;
}
#sharePop input:focus{
	outline: none;
}
#sharePop a{
	position: absolute;
	text-align: center;
	text-decoration: none;
	top:10vmin;
	left:20vmin;
	line-height: 5vmin;
	font-size: 2vmin;
	width:20vmin;
	text-align: center;
	color: white;
}
#sharePop a::after{
	content: "";
	position: absolute;
	width:15vmin;
	height: 0.5vmin;
	bottom:0.5vmin;
	left:0;
	right: 0;
	margin: auto;
	scale: 0 1;
	transition: scale 0.5s;
	background:white;
}
#sharePop a:hover:after{
	scale: 1 1;
}





#mapMenu{
	position: absolute;
	width:100%;
	height: 100%;
	top:0;
	opacity:0;
	transition: opacity 0.5s;
	visibility: hidden;
	overflow: hidden;
	background:rgba(0,0,0,0.5);
}
#mapMenu>*{
	position: relative;
}

#mapSelect{
	width:30vmin;
	height: 100%;
	background:black;
}

#menuHeader{
	height: 10vmin;
	width:100%;
	display: flex;
}
#menuHeader img{
	height:8vmin;
	margin:1vmin;
}
#menuHeader h1{
	color: white;
	font-size: 3vmin;
	line-height: 4vmin;
	margin-top:3vmin;
}

#menuMaps{
	height: calc(100vh - 10vmin);
	display: flex;
	flex-flow: column;
	gap:0.5vmin;
}

#menuMaps .field{
	position: relative;
	height: 12vmin;
	overflow: hidden;
	opacity: 0.5;
	transition:  opacity 0.5s,height 0.5s;
}
#menuMaps .field img{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#menuMaps .field p{
	position: absolute;
	color: white;
	width:29vmin;
	padding-right:1vmin;
	text-align: right;
	font-size: 2vmin;
	text-shadow: 0 0 1vmin black;
	line-height: 4vmin;
	bottom:0;
	background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3));
}
#menuMaps .field.selected{
	opacity: 1;
	height: 15vmin;
}
#menuMaps .field:hover{
	opacity: 1;
}
#menuMaps .field.notready{
	opacity: 0.5;
}
#menuMaps .field.notready:hover{
	opacity: 0.5;
}


#mainMap{
	position: absolute;
	top:0;
	left:40vmin;
	height: 100%;
	width:60vmin;
}

.bigFieldMap{
	position: absolute;
	width:60vw;
	top:0;
	bottom:0;
	margin: auto 0;
}
.bigFieldMap.hidden{
	visibility: hidden;
}

.mainMapImg{
	width:100%;
}
.mapPortal{
	position: absolute;
	width:2vw;
	height: 2vw;
	top:-1vw;
	left:-1vw;
	background-image:url("../images/portal.png");
	background-size: cover;
}
.mapPortal{
	position: absolute;
	width:2vw;
	height: 2vw;
	top:-1vw;
	left:-1vw;
	background-image:url("../images/portal.png");
	background-size: cover;
	transition: scale 0.5s;
}
.mapPortal.dungeon{
	background-image: url("../images/dungeon.png");
	scale:0.75;
}
.mapPortal:hover{
	scale:1.1;
	z-index:1;
}

#menuClose{
	position: absolute;
	right:5vmin;
	bottom:10vmin;
	outline:solid white 0.2vmin;
	transition: background 0.5s;
}
#menuClose:hover{
	background:rgba(255, 255, 255, 0.5);
}
#menuClose p{
	font-size: 2vmin;
	text-shadow: 0 0 1vmin black;
	width:fit-content;
	padding:0 3vmin;
	color: white;
}