#home {
	--logoX: 0;
	--logoY: 0;
}

.bubble {
	--top: calc(calc(65vh - max(10vh, 5rem)) - calc(var(--logoY) / 2));
	position: absolute;
	top: var(--top);
	left: calc(50% - 6.5vmin);
	/* width: 7rem;
	height: 5rem; */
	width: 13vmin;
	height: 13vmin;
	/* transform: translate(0, -50%); */

	border: solid 5px black;
	border-radius: 100%;
	background-color: rgba(var(--textBG), 0.8);
	background-size: cover;
	background-position: center;
	box-shadow: 0 0 20px #ffbb7399;

	box-sizing: border-box;

	cursor: pointer;
}

.bubble h3 {
	position: absolute;
	top: 75%;
	left: 50%;

	text-align: center;

	transform: translateX(-50%);

	box-shadow: 0 5% 10% black;
}

#theatre {
	transform: translate(
		calc(calc(-0.2 * var(--logoX)) - 6.5vmin),
		calc(calc(-0.8 * var(--logoY)) - 15vmin)
	);
	background-image: url("../img/vlcsnap-2023-01-24-21h44m50s866.png");
}

#music {
	transform: translate(
		calc(calc(0.1 * var(--logoX)) + 6.5vmin),
		calc(calc(-1.1 * var(--logoY)) - 13vmin)
	);
	background-image: url("../img/Screenshot_20221102_111120.png");
}

#conferences {
	transform: translate(
		calc(calc(0.6 * var(--logoX)) + 6.5vmin),
		calc(calc(-0.3 * var(--logoY)) - 13vmin)
	);
	background-image: url("../img/IMG_20220323_122114.jpg");
}

#lightShows {
	transform: translate(
		calc(calc(-0.6 * var(--logoX)) - 13vmin),
		calc(calc(0.4 * var(--logoY)) - 13vmin)
	);
	background-image: url("../img/vlcsnap-2023-01-24-21h50m15s345.png");
}

#more {
	transform: translate(
		calc(calc(0.8 * var(--logoX)) + 13vmin),
		calc(calc(0.2 * var(--logoY)) + 13vmin)
	);
	background-image: url("../img/FINAL.png");
}

@media (max-width: 30rem) {
	#theatre {
		transform: translate(
			calc(calc(-0.2 * var(--logoX)) - 6.5vmin),
			calc(calc(-0.8 * var(--logoY)) - 15vmin)
		);
	}

	#music {
		transform: translate(
			calc(calc(0.1 * var(--logoX)) + 6.5vmin),
			calc(calc(-1.1 * var(--logoY)) - 13vmin)
		);
	}

	#conferences {
		transform: translate(
			calc(calc(-0.1 * var(--logoX)) - 1px),
			calc(calc(-2.3 * var(--logoY)) - 13vmin)
		);
	}

	#lightShows {
		transform: translate(
			calc(calc(-0.1 * var(--logoX)) - 13vmin),
			calc(calc(0.4 * var(--logoY)) + 13vmin)
		);
	}

	#more {
		transform: translate(
			calc(calc(0 * var(--logoX)) + 13vmin),
			calc(calc(1 * var(--logoY)) + 13vmin)
		);
	}
}