/************************************TIME LINE **********************************************/

div#projects {
	transition: 1s;
	width: 100%;
}

#TLcont {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100%;
	/* background: #09F8 */
}

#TL {
	position: relative;
	overflow: hidden;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	/* background: #F509; */
	/* background: red; */
}

.event {
	width: 10rem;
	height: 10rem;
	max-width: 15vmin;
	max-height: 15vmin;
	overflow: visible;
	position: absolute;
	left: 50%;
	top: 40%;
	margin: -5rem;
	box-shadow: 0 0 50%;
	cursor: pointer;
	z-index: attr("data-index");
	background: none;
	border-radius: 100%;

	background: black;
	border-radius: 100%;
	border: outset;

	transform-origin: center;
	transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px))
		scale(var(--scale));
	/* opacity: calc(calc(calc(var(--scale) - 1) * 2) + 2); */
	opacity: var(--scale);

	/*get hypoternuse of event coords*/
	/* background-size: calc(sqrt(calc(calc(var(--x) * var(--x)) + calc(var(--y) * var(--y)))) * 1px); */

	box-shadow: calc(calc(var(--y) / var(--hyp)) * -1rem)
		calc(calc(var(--x) / var(--hyp)) * 1rem) 10rem /*blur*/ 2rem /*size*/
		hsl(30, 50%, calc(var(--scale) * 80%));
}

.event::after {
	content: "";

	width: calc(var(--nextDist) * 1px);
	height: 10px;

	background: black;
	display: block;
	z-index: -2;
	box-sizing: border-box;
	border-radius: 100%;

	position: absolute;
	top: 50%;
	right: 50%;
	border-right: solid 4rem black;

	transform-origin: right;
	transform: rotate(calc(var(--nextLine) * 1rad));

	filter: blur(5px);
	transition: scale 0.5s;
}

.event > * {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.event > h3 {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	text-align: center;
	vertical-align: middle;
	z-index: 1;
	font-size: min(3vmin, 1rem);
}

.event > .descript {
	scale: 0;
	position: absolute;
	background: #000b;
	padding: 2rem;
	transition: scale 1s;
	z-index: 10;
}

.event.view {
	scale: 1;
	transform: translate(40vmin, 0);
	/* background: red; */
	z-index: 11;
	box-shadow: 0 0 2rem 1rem #000;
}

.event.view::after {
	scale: 0;
}

.event.slow {
	transition: 1s;
}

#evtContent {
	max-width: 40vmin;
	max-height: 40vmin;
	background: rgba(var(--textBG), 0.8);
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	z-index: 10;
	border: 0.5rem groove rgba(var(--textBG), 1);
	border-radius: 1rem;
	padding: 2rem;
	overflow: scroll;
	text-align: center;
	transition: transform 0.5s;
}

#evtContent.closed {
	transform: translate(-50%, -50%) scale(0);
}

#evtContent > * {
	text-align: center;
}

.year {
	width: 5rem;
	height: 5rem;
	max-width: 7.5vmin;
	max-height: 7.5vmin;
	left: calc(50% + 2.5rem);
	top: calc(40% + 2.5rem);
}

.year {
	background: rgba(var(--accentCol), 0.8);
}

#scrollCont {
	width: 100%;
	height: 100%;
	overflow: scroll;
	position: relative;
	z-index: 0;
}

#evtClose {
	width: 1.5rem;
	height: 1.5rem;

	position: absolute;
	top: 0.5rem;
	right: 0.5rem;

	border: solid 2px black;
	border-radius: 50%;
	background-color: rgb(var(--accentCol));
	vertical-align: middle;
	cursor: pointer;
}

#scroller {
	--height: 0rem;
	height: calc(var(--height) + 100%);
	width: 1rem;
	top: 0;
	left: 10%;
	background: linear-gradient(green, red);
	position: absolute;
	z-index: -1;
	opacity: 0;
}

#yearLine {
	background: rgba(var(--textBG), 0.8);

	border-radius: 1rem;

	width: 80vw;
	height: 3rem;
	scale: 1;
	position: absolute;
	bottom: 3rem;
	left: 50vw;
	transform: translateX(-50%);

	mask-image: none;
	overflow: visible;

	transition: scale 1s;
	z-index: 10;
	box-sizing: border-box;
}

#yearLine.hide {
	scale: 0;
}

#yearP {
	--left: 100%;

	background: red;

	width: 2rem;
	height: 2rem;
	position: absolute;
	left: var(--left);
	top: -2rem;

	border-radius: 100% 100% 100% 30%;
	rotate: -45deg;

	cursor: pointer;
}

.yearMarker {
	position: absolute;
	writing-mode: vertical-lr;
	top: 0.5rem;
}

.moving {
	transition: 1s;
	z-index: 5;
}