body {
	background-color: #282c33;
	color: var(--text);
	font-family: "Monaspace Neon", monospace;
	/* font-family: "Fira Sans", monospace; */
}
html {
	scroll-snap-type: y mandatory;
	overflow-y: scroll;
	overflow-x: hidden;
	user-select: none;
}
section {
	min-width: 100vw;
	min-height: 100vh;
	scroll-snap-align: start;
	scroll-snap-stop: always;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	/* border-bottom: #1d2025 1px solid; */
}

span.syntax.foreground {
	color: var(--syntax-foreground);
}
span.syntax.background {
	color: var(--syntax-background);
}
span.syntax.gutter {
	color: var(--syntax-gutter);
}
span.syntax.comment {
	font-style: italic;
	color: var(--syntax-comment);
}
span.syntax.guide {
	color: var(--syntax-guide);
}
span.syntax.accent {
	color: var(--syntax-accent);
}
span.text {
	color: var(--text);
}
span.cyan {
	color: var(--cyan);
}
span.blue {
	color: var(--blue);
}
span.purple {
	color: var(--purple);
}
span.green {
	color: var(--green);
}
span.rose {
	color: var(--rose);
}
span.orange {
	color: var(--orange);
}
span.red {
	color: var(--red);
}
span.gold {
	color: var(--gold);
}
span.wavy-underline {
	text-decoration: underline wavy #ff6347;
}

section#landing h2 {
	font-size: 24px;
	line-height: 24px;
}
.string-wrapper {
	display: inline-block;
	overflow: hidden;
	top: 5px;
	position: relative;
	height: 24px;
	z-index: 1;
}
.string {
	display: flex;
	flex-direction: column;
	text-align: center;
	animation: move 10s infinite;
	animation-delay: 1.5s;
	height: 24px;
}
.string span {
	line-height: 24px;
}

/* 24px each */
/* @keyframes move {
	0% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-24px);
	}
	60% {
		transform: translateY(-48px);
	}
	90% {
		transform: translateY(0);
	}
} */
@keyframes move {
	0%,
	20% {
		transform: translateY(0);
	}
	30%,
	50% {
		transform: translateY(-24px);
	}
	60%,
	80% {
		transform: translateY(-48px);
	}
	90%,
	100% {
		transform: translateY(0);
	}
}

section#age {
	& .lifetime {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 16px;
	}
	& .lifetime h6 {
		color: var(--syntax-comment);
	}
}

section#weeks {
	font-size: 12px !important;
	padding: 2.5em 0;
	& .container {
		border-radius: 8px;
		margin-bottom: 1em;
		& .label {
			margin: 0 8px 8px 0;
			color: var(--syntax-comment);
			font-weight: normal;
		}
		& .label--year {
			font-weight: bold;
			transform: rotate(180deg);
			position: absolute;
			width: max-content;
			text-orientation: sideways;
			writing-mode: vertical-rl;
			left: 6px;
			top: 28px;
			color: var(--text);
		}
		& .label--weeks {
			font-weight: bold;
			position: absolute;
			margin-top: -1em;
		}
		& [data-week] {
			background-color: var(--syntax-gutter);
			height: 16px !important;
			width: 16px !important;
			border-radius: 4px;
		}
		& tr td:first-child {
			width: 24px;
		}
		& tr td:last-child {
			width: 8px;
		}
		& th {
			padding-bottom: 0.5em;
		}
		& td.label {
			padding-right: 8px;
		}
		& table {
			table-layout: fixed;
			margin-top: 1em;
		}
		& .past {
			background-color: var(--syntax-comment);
		}
		& .current {
			background-color: var(--syntax-accent);
		}
		/* optional - only affects events in future */
		& :not(.current):not(.past).event div {
			opacity: 0.25;
		}
	}
	& .info {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		gap: 8px;
		& div {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: row;
			gap: 8px;
			font-size: 11px;
		}
		& .color {
			width: 16px;
			height: 16px;
			border-radius: 4px;
			/* background-color: var(--syntax-comment); */
		}
	}
	& table {
		transition: opacity 0.5s ease-in-out;
		position: relative;
		top: 0;
	}
	& tr {
		transition: opacity 1s ease-in-out;
		opacity: 1;
		display: table-row; /* Ensure the default display is table-row */
		&.hidden {
			opacity: 0;
			display: none;
		}
	}
	& .unfold {
		z-index: 500;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		transition: transform 0.5s ease-in-out, opacity 0.4s ease-in-out;
		& i {
			font-size: 8em;
			cursor: pointer;
		}
		/* &:not(.active:hover) {
			animation: idleArrowBouncing 2.5s cubic-bezier(0.25, 1.5, 0.5, 1) infinite;
			animation-delay: 3s;
		} */
		&:not(.active):hover {
			transform: translate(0, -12px);
		}
		&.active {
			transform: translate(0, 100%);
			opacity: 0;
		}
	}
}
@keyframes idleArrowBouncing {
	0%,
	100% {
		transform: translateY(0);
	}
	20% {
		transform: translateY(-15px); /* Hauptbounce */
	}
	40% {
		transform: translateY(5px); /* Rückprall */
	}
	60% {
		transform: translateY(-5px); /* Nachbounce */
	}
	80% {
		transform: translateY(2px); /* Kleiner Nachprall */
	}
}

section#weeks.collapsed {
	/* & .container .shadow {
		width: 100%;
		height: 100%;
		position: absolute;
		background: linear-gradient(180deg, var(--syntax-background) 100%, var(--syntax-background) 0%);
	} */
	& table {
		opacity: 0.6;
	}
}

/* Tooltip styles */
.tippy-box[data-theme~="custom"] {
	padding: 10px;
	background-color: var(--syntax-foreground);
	color: var(--text);
	border-radius: 4px;
}

.tippy-box[data-theme~="custom"] > .tippy-arrow {
	color: var(--syntax-foreground);
}

.tippy-content ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.tippy-content li {
	color: var(--text);
}

.tippy-content li:not(:last-child) {
	margin-bottom: 0.75em;
}