html, body { height: 100%;}
body{
	background-color: DarkGoldenRod;
	user-select: none;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
	transition: background-color 5s ease-out;*
	/*height: 50vh;*/
}
body::-webkit-scrollbar{
	display: none;
}

textarea:focus, input:focus{
    outline: none;
}

div{
	margin:0;
	padding:0;
}

*:focus {
    outline: none;
}

.startHidden{
	display: none;
}

#content{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

#map{
	max-height:100vh;
	max-height: calc(var(--vh, 1vh) * 100);
	z-index:-1;
	box-shadow: 0.1vh 0.5vh 0.5vh;
}
.tokenContainer{
	position: absolute;
	transition: transform 0.15s ease-in-out;
}
.token{
	width:10vh;
	height:10vh;
	border-radius: 100%;
	box-shadow: 0.1vh 0.5vh 0.5vh;
	transition: transform 0.15s ease-in-out;
	border:1px solid black;
	z-index: 9000;
	cursor: grab;
	position: relative;
}
.token:hover{
	/*transform: scale(1.5);*/
}

.dragging{
	transform: scale(1.5);
	
	/*box-shadow: 0.1vh 0.5vh 0.5vh;*/
}

.camera{
	position:absolute;
	/*border:3px dashed black;*/
	z-index: 1;
}
.cameraHover{
	transition: border .2s ease;
}
.cameraHover:hover{
	border:4px solid black;
	cursor: pointer;
}

.cameraZone{
	position: absolute;
	cursor: pointer;
	border: 5px dashed red;
    border-radius: 100%;
    visibility: hidden;
    z-index: 9008;
}
.cameraZone:hover{
	border: 5px solid red;
}

#batteryContainer{
	z-index: 2;
	width:20%;
	height:10%;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease-in-out;
	cursor: grab;
}
#battery{
	width:90%;
	height:100%;
	background-color: grey;
	border:3px solid black;
	border-radius:5%;
	display: flex;
	align-items: center;
	box-shadow: 0.1vh 0.5vh 0.5vh;
}
#batteryCharge{
	text-align: center;
	height: 30%;
	width:30%;
	font-weight: bold;
}
#batteryBar{
	width:65%;
	height:30%;
	background-color: black;
}
#batteryBarLevel{
	width:100%;
	height: 100%;
	border:1px solid black;
	transition: width 1s linear;
}
#batteryButton{
	width:9%;
	height:40%;
	background-color:grey;
	border:3px solid black;
	border-left:none;
	box-shadow: 0.1vh 0.5vh 0.5vh;
}

#clock{
	z-index: 2;
	position: absolute;
	width:15%;
	height:10%;
	background-color: rgb(50,50,50);
	border:3px solid rgb(50,50,50);
	border-radius:10%;
	box-shadow: 0.1vh 0.5vh 0.5vh;
	cursor:grab;
	transition: transform 0.15s ease-in-out;
}
#clockPanel{
	position: relative;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	width:90%;
	height:80%;
	background-color: black;
	border:3px solid black;
}

#textConsoleContainer{
	cursor:grab;
	position: absolute;
	width:25%;
	height:15%;
	transition: transform 0.15s ease-in-out;
}
#textConsoleTitle{
	position: static;
	width:100%;
	height:10%;
	background-color: blue;
	border:1px solid black;
}
#textConsole{
	position: static;
	width:100%;
	height:auto;
	min-height:90%;
	background-color:black;
	color:white;
	box-shadow: 0.1vh 0.5vh 0.5vh black;
	border:1px solid black;
}

.door{
	position: absolute;
	width:13%;
	height:19%;
	border-radius: 100%;
	background-color: green;
	border:1vh solid black;
	overflow: hidden;
	cursor: pointer;
	z-index: 20;
}
#doorLeft{
	top:79%;
	left:9.1%;
}
#doorRight{
	top:79%;
	left:74.5%;
}
.doorDoor{
	height:100%;
	width:100%;
	background-color: red;
	display: none;
	z-index: 21;
}
.doorIcon{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	width:75%;
	height:75%;
}
.unlockedIcon{
	z-index: -1;
}

.screamer{
	z-index: 9011;
	height:100%;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	animation: bigger 2s ease-in-out;
}
@keyframes bigger{
	0%{ transform:  translate(-50%,-50%) scale(0);}
	20%{ transform:  translate(-50%,-50%) scale(2);}
	100%{transform:  translate(-50%,-50%) scale(1);}
}
#screamerBg{
	z-index: 9010;
	top:0;
	left:0;
	height:100%;
	width:100%;
	position:fixed;
	background-color: rgba(0,0,0,1);
	animation: toBlack 3s ease-in;
}
@keyframes toBlack{
	0% {background-color: rgba(0,0,0,0);}
	80%{background-color: rgba(0,0,0,0);}
	100%{background-color: rgba(0,0,0,1);}
}

.endLink{
	z-index: 9012;
	position: absolute;
	transform: translate(-50%, -50%);
	width:15%;
	height:30%;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	font-size:2.5vh;
	text-decoration: none;
	color:white;
	transition: width 1s ease;
	font-weight: bold;
	border-radius: 100% 100% 50% 50%; 
	animation: appear 2s ease;
}
.endLink:hover{
	width:20%;
}

.endLinkDiv{
	width:100%;
}

.endLinkImg{
	width: 100%;
	
}

@keyframes appear{
	0%{ opacity: 0;}
	70%{ opacity: 0;}
	100%{ opacity: 1; }
}

#endlink1{
	top:30%;
	left:20%;
}
#endlink2{
	top:30%;
	left:80%;
}
#endlink3{
	top:70%;
	left:20%;
}
#endlink4{
	top:70%;
	left:80%;
}

@media screen and (max-aspect-ratio:3508/2481) { 
	#map{
		max-width:100vw;
	}
	.token{
		width:7vw;
		height:7vw;
	}
}

#clockTime{
	font-family: monospace;
	position: relative;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	width: fit-content;
	height:fit-content;
	color:red;
}


#working{
	position: absolute;
	top:-1.8%;
	left:89.9%;
	width:5%;
	height:7%;
	display: none;
	z-index: 1;
}
#workIcon{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	width:100%;
	height:100%;
	animation: spin 3s linear infinite;
}
@keyframes spin{
	from{transform: rotate(0deg);}
	to {transform: rotate(720deg);}
}

#homeBtn{
	position: absolute;
	top:1.6%;
	left:80.7%;
	width:16.5%;
	height:16.5%;
	cursor:pointer;
}
#homeIcon{
	width:100%;
	height:100%;
}

#wait{
	position: absolute;
	top:56%;
	left:43.5%;
	width:10%;
	height:14%;
	background-color: slategray;
	border-radius:100%;
	border:1vh solid black;
	cursor:pointer;
}
#waitIcon{
	max-width: 100%;
	

}

.waiting{
	animation: waitingSpin 1s ease-out;

}
@keyframes waitingSpin{
	from{transform:  rotate(0deg);}
	to {transform:  rotate(720deg);}
}




#textConsole{
	font-size:2vh;
	word-break: break-word;
}
#batteryCharge{
	font-size:1.5vh;
}
#camCounter{
	position: absolute;
	top:69%;
	left:87%;
	width:11%;
	height:7%;
	background-color: grey;
	border-radius:10%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family:monospace;
	font-weight: bolder;
	border:3px solid black;
	box-shadow: 0.1vh 0.5vh 0.5vh;
	cursor:pointer;
	transition: transform 0.15s ease-in-out;
	font-size: 1.5vh;
}
#clockTime{
	font-size: 3vh;
}
@media only screen and (max-aspect-ratio:763/537) {
	#clockTime{
		font-size: 3vw;
	}
	#textConsole{
		font-size:1.5vw;
	}
	#batteryCharge{
		font-size:1.5vw;
	}
	#camCounter{
		font-size:1.5vw;
	}

}