body, html {
	margin: 0;
	padding: 0;
	
	overflow: hidden;
}

#picture-container {
	position: absolute;
	left: var(--bg-left);
	top: var(--bg-top);

	width: min(100vw, calc(100vh * var(--natural-ratio)));
	height: min(100vh, calc(100vw / var(--natural-ratio)));
}

img#bg {
	position: absolute;
	-webkit-user-drag: none;

	left: var(--bg-left);
	top: var(--bg-top);
}

.point {
	position: relative;
	content: '';
	width: 20px;
	height: 20px;
	background-color: rgb(241, 15, 15);
	border-radius: 50%;
	
}

.point::after {
	width: 100px;
	height: 20px;
	display: none;
	color: hsl(0, 11%, 96%);
	
	position: relative;
	left: 20px;

	user-select: none;
}

.point#west-teaching-facility {
	left: 36.8%;
	top: 31.2%;
}

.point#west-teaching-facility::after {
	content: '西区教学楼';
}

.point#library {
	left: 11.5%;
	top: 40%;
}

.point#library::after {
	content: '图书馆';
}

.point#Ground {
	left: 88%;
	top: 28%;
}

.point#Ground::after {
	content: '田径场';
}

.point#west-dormitory {
	left: 95%;
	top: 10%;
}

.point#west-dormitory::after {
	content: '西园宿舍';
}

.point#west-canteen {
	left: 75.8%;
	top: 0.5%;
}

.point#west-canteen::after {
	content: '西园食堂';
}

.point#hospital {
	left: 55%;
	top: -6%;
}

.point#hospital::after {
	content: '医科组团';
}

.point#pig {
	left: 56.9%;
	top: 33.8%;
}

.point#pig::after {
	content: '猪婆山';
}

.point#gym {
	left: 64%;
	top: 90%;
}

.point#gym::after {
	content: '体育馆';
}

.point#hall {
	left: 28%;
	top: 76%;
}

.point#hall::after {
	content: '大礼堂';
}

.point#room {
	left: 16%;
	top: -5%;
}

.point#room::after {
	content: '理学园';
}
.point:hover::after {
	display: block !important;
	animation: label-enter 1s linear forward;
}
