:root
{
	--background-color: #8fc83b;
	--interact-bg-color: #b5e372;
	--hover-border-color: #95c352;
	--selected-border-color: #75a332;
	--search-border-width: 3px;
	--search-border-radius: 6px;
	--questions-label-bg: #6fb5084f;
	--questions-control: #66a905;
	--disabled-color: #e7e7e7;
}


html
{
	font-size: 14px;
}

@media (min-width: 768px)
{
	html
	{
		font-size: 16px;
	}
}

html
{
	position: relative;
	min-height: 100%;
	background: var(--background-color);
	padding-left: 1em;
	padding-right: 1em;
}

body
{
	background-color: white;
	max-width: 980px;
	min-height: 100%;
	height: 100%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
}

tr:hover
{
	background: var(--interact-bg-color);
}

td {
	width: 50%;
}

td a
{
	display: block;
	padding: 16px;
	text-decoration: none;
	color: black;
}

header
{
	display: flex;
	height: 6em;
	justify-content: space-between;
}

footer
{
	display: flex;
	justify-content: space-between;
	margin-left: 2em;
	margin-right: 2em;
	margin-top: .5em;
	padding-bottom: 1em;
}

.sponsors
{
	display: flex;
	height: 8em;
	justify-content: center;
}

main
{
	display: flex;
	flex-direction: column;
}

nav
{
	display: flex;
	align-items: center;
	font-size: 1.3em;
	gap: 1em;
}

	nav a
	{
		display: inline-block;
		text-decoration: none;
		color: black;
		padding: .4em .9em;
		background: var(--interact-bg-color);
		height: 1.2em;
		border-radius: .2em;
		border: 2px solid var(--interact-bg-color);
	}

		nav a:hover:not(.selected)
		{
			border: 2px solid var(--hover-border-color);
		}

		nav a.selected
		{
			border: 2px solid var(--selected-border-color);
		}

main.home h1, main.home h2, main.home h3, main.list h1, main.list h2, main.list h3
{
	max-width: 490px;
	margin-left: 4em;
	margin-right: 4em;
	text-align: center;
	align-self: center
}

main.home p, main.list p
{
	margin-left: 2em;
	margin-right: 2em;
}

.list
{
	padding: 0 2em 2em 2em;
}

.search
{
	display: flex;
	justify-content: center;
	font-size: 1.4em;
	margin-top: 1em;
	margin-bottom: 2em;
}

	.search > *
	{
		border: 0;
		border-color: #327c34;
		border-style: solid;
		border-top-width: var(--search-border-width);
		border-bottom-width: var(--search-border-width);
	}

	.search:focus-within > *
	{
		border-color: black;
	}

	.search input
	{
		border-radius: var(--search-border-radius) 0 0 var(--search-border-radius);
		border-left-width: var(--search-border-width);
		font-size: 1em;
		height: 1.4em;
		padding-left: .2em;
	}

		.search input:focus
		{
			outline: none;
		}

	.search a
	{
		display: flex;
		align-items: center;
		color: red;
		text-decoration: none;
		stroke-width: 3px;
		padding: 8px;
	}

		.search a:hover
		{
			color: white;
			background: red;
			stroke-width: 5px;
		}

	.search button
	{
		display: flex;
		align-items: center;
		stroke-width: 4px;
		background: #6ab425;
		border-radius: 0 var(--search-border-radius) var(--search-border-radius) 0;
		border-right-width: var(--search-border-width);
		cursor: pointer;
		color: white;
		padding: 8px;
	}

		.search button:hover
		{
			background: var(--hover-border-color);
		}

.hidden
{
	display: none;
}

.pager
{
	display: flex;
	justify-content: space-between;
}

	.pager a, .pager span, .pager button
	{
		display: inline-block;
		text-decoration: none;
		color: black;
		padding: .3em .5em;
		background: var(--interact-bg-color);
		height: 1.1em;
		border-radius: .2em;
		border: 2px solid var(--interact-bg-color);
	}

	.pager button {
		height: 2em;
	}

		.pager a:hover, .pager button:hover
		{
			border: 2px solid var(--hover-border-color);
		}

	.pager span, .pager button:disabled
	{
		border: 2px solid var(--selected-border-color);
	}

.tabs
{
	display: flex;
	gap: 0.5rem;
	border-bottom: 1px solid #ddd;
}

.tab
{
	appearance: none;
	background: none;
	border: none;
	padding: 0.5rem 0.75rem;
	font: inherit;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}

	.tab[aria-selected="true"]
	{
		border-bottom-color: #0077ff;
		color: #0077ff;
		font-weight: 600;
	}

div.visroot
{
	margin-top: .3em;
	position: relative;
	display:flex;
	flex-wrap: wrap;
}

div.visroot > canvas
{
	flex-basis: 100%;
}

div.visualization.active div.title
{
	display: none;
	visibility: hidden;
}

div.visualization.active .visroot div:not(.title)
{
	display: contents;
}

div.visualization.active ul {
	margin: 0;
	padding: 0;
}

div.visualization.active li
{
	display: none;
	visibility: hidden;
	text-align: center;
	vertical-align: middle;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	text-overflow: ellipsis;
	overflow: clip;
	text-decoration: none;
	color: black;
	border-radius: 50%;
	background: white;
}

div.visualization div:has(div.title.active) > div.title:not(.active)
{
	display: inline-block;
	visibility: visible;
	margin-right: .5em;
}

	div.visualization div:has(div.title.active) > div.title:not(.active)::after {
		padding-left: .5em;
		content: ">";
	}

	div.visualization div.title.active
	{
		display: inline-block;
		visibility: visible;
		flex-basis: 100%;
		text-align: center;
		padding-left: 15%;
		padding-right: 15%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-size: 3em;
	}

	div.visualization.active li > a
	{
		display: flex;
		align-items: center;
		text-decoration: none;
		color: black;
	}

	div.visualization.active li > a > span
	{
		max-width: 100%;
		overflow: clip;
		text-overflow: ellipsis;
	}

	div.visualization > div.visroot > div.pager {
		display: flex !important;
		gap: .2em;
		margin-top: -6em;
	}

.sponsors img
{
	height: 100%;
}

main.art > *
{
	margin-left: 2em;
	margin-right: 2em;
}

.divider, main.art > .divider
{
	margin: 0;
	height: 1em;
	background: var(--background-color);
}

main.art > .top
{
	display: flex;
	flex-direction: column;
}

	main.art > .top > .image
	{
		width: 100%;
		max-height: 630px;
		display: flex;
		justify-content: space-around;
	}

	main.art > .top > .image > img
	{
		max-width: 100%;
	}

@media (min-width: 2000px)
{
	main.art > .top
	{
		display: grid;
		grid-template-columns: 50% 50%;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"name media"
			"data media";
	}

		main.art > .top > .name
		{
			grid-area: name;
		}

		main.art > .top > .image
		{
			margin-top: 1em;
			margin-bottom: 1em;
			grid-area: media;
			width: 100%;
		}

		main.art > .top > .data
		{
			grid-area: data;
		}
}

.questions
{
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

	.questions > form
	{
		background: white;
		padding: 1.2rem;
		border-radius: 8px;
		max-width: 600px;
		width: 90%;
		position: relative;
		box-shadow: 0 4px 20px rgba(0,0,0,0.2);
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		border: 4px solid #6fb508;
	}

	/* Title bar */
	.questions > div
	{
		background: white;
		padding: 1.2rem;
		border-radius: 8px;
		max-width: 600px;
		width: 90%;
		display: flex;
		justify-content: space-between;
		align-content: center;
		margin-bottom: .5rem;
		border: 4px solid #6fb508;
	}

		.questions > div > h2
		{
			margin: 0;
			padding-left: 0.5rem;
			padding-top: .2rem;
			font-size: 1.4rem;
			color: #6fb508;
		}

		.questions > div > button
		{
			position: relative;
			width: 32px;
			height: 32px;
			background: var(--interact-bg-color);
			border: none;
			border-radius: 50%;
			cursor: pointer;
			padding: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: background 0.2s ease;
		}

			.questions > div > button:hover
			{
				background: var(--hover-border-color);
			}

			.questions > div > button::before, .questions > div > button::after
			{
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				width: 20px;
				height: 2px;
				background: black;
				transform-origin: center;
			}

			.questions > div > button::before
			{
				transform: translate(-50%, -50%) rotate(45deg);
			}

			.questions > div > button::after
			{
				transform: translate(-50%, -50%) rotate(-45deg);
			}


	.questions > form > div:not(.controls)
	{
		display: none;
		flex-direction: column;
	}

	.questions > form > div.active
	{
		display: flex;
	}

	.questions > form > div > h3
	{
		margin: 0;
		margin-bottom: .5rem;
		margin-left: .5rem;
		font-size: 1.1rem;
		color: #6fb508
	}

	.questions > form > div > ul
	{
		list-style: none;
		padding-left: 0;
		margin: 0;
	}

		.questions > form > div > ul label
		{
			background: var(--questions-label-bg);
			padding: .6rem .8rem;
			border-radius: .5rem;
			display: flex;
			align-items: center;
		}

		.questions > form > div > ul input[type="checkbox"], .questions > form > div > ul input[type="radio"]
		{
			width: 20px;
			height: 20px;
			border: 3px solid var(--questions-control);
			border-radius: 6px;
			appearance: none;
			cursor: pointer;
			margin-right: 6px;
			position: relative;
		}

		.questions > form > div > ul input[type="radio"]
		{
			border-radius: 50%;
			margin-bottom: 3px;
		}

		.questions > form > div > ul input[type="checkbox"]:checked
		{
			background-color: var(--questions-control);
		}

		.questions > form > div > ul input[type="radio"]:checked::after
		{
			content: "";
			position: absolute;
			top: 3px;
			left: 3px;
			width: 8px;
			height: 8px;
			background: var(--questions-control);
			border-radius: 50%;
		}

		.questions > form > div > ul input[type="checkbox"]:checked::after
		{
			content: "";
			position: absolute;
			top: -1px;
			left: 3px;
			width: 5px;
			height: 10px;
			border: solid white;
			border-width: 0 3px 3px 0;
			transform: rotate(35deg);
		}

		.questions > form > div > ul textarea
		{
			resize: none;
			width: 100%;
			padding: .4rem;
		}

		.questions > form > div > ul > li:not(:last-child)
		{
			margin-bottom: .3rem;
		}

		.questions > form > div > ul:not(:last-child)
		{
			margin-bottom: .8rem;
		}

		.questions > form > div > ul > li > span
		{
			margin-left: 1.5rem;
		}

	.questions > form > .controls
	{
		margin-top: 1.5rem;
		display: flex;
		justify-content: end;
		gap: 0.5rem;
	}


		.questions > form > .controls > button
		{
			display: inline-block;
			text-decoration: none;
			color: black;
			padding: .3em .5em;
			background: var(--interact-bg-color);
			height: 2em;
			width: 6.5em;
			border: none;
			transition: background 0.2s ease;
		}

			.questions > form > .controls > button:hover
			{
				background: var(--hover-border-color);
			}

			.questions > form > .controls > button:disabled
			{
				background: var(--disabled-color);
			}

.questions-button
{
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	background: var(--interact-bg-color);
	border: none;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 9998;
	position: fixed;
}

	.questions-button:hover
	{
		background: var(--hover-border-color);
	}

.attention-pulse
{
	animation: pulse 1.2s ease-out 3;
}

@keyframes pulse
{
	0%
	{
		transform: scale(1);
	}

	40%
	{
		transform: scale(1.25);
	}

	100%
	{
		transform: scale(1);
	}
}