body {
	margin: 0;
	padding: 0;
	background-color: rgb(244, 226, 241); 
	cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><path fill='%236a0dad' d='M32 56S8 38 8 22a14 14 0 0 1 24-9.8A14 14 0 0 1 56 22c0 16-24 34-24 34z'/></svg>") 32 32, auto;
}

img {
	width: 100vw;
	height: 100vh;
	object-fit: contain;
	display: block;
}

.mainArea {
	position: relative;
	display: inline-block;
}

/*hotspots + locs*/
.hotspot {
	position: absolute;
	cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><path fill='%23d8b4fe' d='M32 56S8 38 8 22a14 14 0 0 1 24-9.8A14 14 0 0 1 56 22c0 16-24 34-24 34z'/></svg>") 32 32, auto;
}

.areaTeddy {
	width: 6%;
	height: 8%;
	top: 52.5%;
	left: 35.5%;
}
.locTeddy {
	top: 47.5%;
	left: 25.5%;
}
.areaPlant {
	width: 6%;
	height: 13%;
	top: 43%;
	left: 46%;
}
.locPlant {
	top: 30%;
	left: 36%;
}
.areaComputer {
	width: 8%;
	height: 10%;
	top: 42.5%;
	left: 60%;
}
.locComputer {
	top: 37.5%;
	left: 55%;
}
.areaCanvas {
	width: 6.5%;
	height: 10%;
	top: 37%;
	left: 52%;
}
.locCanvas {
	top: 32%;
	left: 47%;
}
.areaClock {
	width: 4.5%;
	height: 10%;
	top: 30%;
	left: 68%;
}
.locClock {
	top: 25%;
	left: 63%;
}
.areaTea {
	width: 2.3%;
	height: 4%;
	top: 49.25%;
	left: 57.35%;
}
.locTea {
	top: 44.25%;
	left: 52.35%;
}
.areaBlanket {
	width: 20%;
	height: 20%;
	top: 61%;
	left: 31%;
}
.locBlanket {
	top: 56%;
	left: 26%;
}
.areaWindow {
	width: 15%;
	height: 20%;
	top: 21%;
	left: 35.5%;
}
.locWindow {
	top: 16%;
	left: 30.5%;
}
.areaPens {
	width: 4%;
	height: 4%;
	top: 47.75%;
	left: 53%;
}
.locPens {
	top: 42.75%;
	left: 48%;
}
.areaMemory {
	width: 15%;
	height: 15%;
	top: 21%;
	left: 52%;
}
.locMemory {
	top: 16%;
	left: 47%;
}

/*notes*/
.note {
	position: absolute;
	background: rgb(186, 146, 189);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 14px;
	display: none;
	width: 160px;
	z-index: 10;
	cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><path fill='%23d8b4fe' d='M32 56S8 38 8 22a14 14 0 0 1 24-9.8A14 14 0 0 1 56 22c0 16-24 34-24 34z'/></svg>") 32 32, auto;
}

.note span {
	float: right;
	cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><path fill='%23d8b4fe' d='M32 56S8 38 8 22a14 14 0 0 1 24-9.8A14 14 0 0 1 56 22c0 16-24 34-24 34z'/></svg>") 32 32, auto;
	font-size: 16px;
	color: gray;
}

/*font*/
.margarine-regular {
	font-family: "Margarine", sans-serif;
	font-weight: 400;
	font-style: normal;
}