@charset "utf-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
div.circle {
	min-height: 90vh;
	overflow-x: hidden;
	display: grid;
	place-content: center;
	font-family: sans-serif;
	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)),
		var(--bgImg);
	background-size: cover;
	background-position: center;
}
ul {
	display: grid;
	grid-template-areas: "listoverlap";
	font-size: 2vmin;
	position: relative;
}

ul.rotate {
	transform: rotate(-90deg);
}

ul > li {
	display: grid;
	grid-template-areas: "itemoverlap";
	--rotate: calc(360deg / var(--event-count) * var(--event-index));
	transform: rotate(var(--rotate)) translateX(18.25em) scale(var(--scale, 1));
	transition: all 250ms ease;
}

div.circle {
	ul > li {
	grid-area: listoverlap;
	}
}

ul > li.event {
	cursor: pointer;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 var(--shadowSpread, 0) var(--highlightcolor, black),
		0 0 0.5em black;
	filter: grayscale();
	outline: none;
}

ul > li.event:hover,
ul > li.event:focus,
ul > li.event.active {
	filter: grayscale(0);
	z-index: 999;
	--scale: 1.2;
	--highlightcolor: white;
	--shadowSpread: 0.1em;
}
ul > li.event.isactive:hover,
ul > li.event.isactive:focus{
	filter: grayscale(0);
	z-index: 999;
	--scale: 1.2;
	--highlightcolor: white;
	--shadowSpread: 0.1em;
}
ul > li.event.isactive {
	filter: grayscale(0);
	z-index: 999;
	--scale: 1.2;
	--highlightcolor: none;
	--shadowSpread: 0.1em;
}
ul > li.event.active {
	z-index: 998;
}
ul > li.event > * {
	grid-area: itemoverlap;
	display: grid;
	place-items: center;
	transform: rotate(calc(var(--rotate) * -1 + 90deg));
}

ul > li.event > img {
	width: 4em;
	aspect-ratio: 1;
	object-fit: cover;
}

ul > div.selected-event {
	max-width: 60vmin;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(90deg);
}
ul > div.selected-event > .details {
	font-size: 2em;
	background: rgba(255, 255, 255, 0.9);
	padding: 0.5em;
	border-radius: 0.25em;
	white-space: nowrap;
}

.title {
	position: absolute;
	font-size: 1rem;
	width: 100%;
	color: white;
	text-align: center;
	padding: 1em;
	text-shadow: 1px 1px black;
}