#preferences-wrapper {
	background-color: rgba(0, 0, 0, 0.8);
	transition: 0.3s background-color;

	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 5000000;
}

#preferences-wrapper.hidden {
	background-color: rgba(0, 0, 0, 0);
	pointer-events: none;
}

#preferences {
	position: absolute;
	width: 50em;
	max-width: calc(100vw - 2em);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	padding: 1em;
	background-color: #000;
	border: 1px solid var(--inverse-color);
	color: var(--inverse-color);
	transition: 0.3s top, 0.3s transform, 0.3s opacity;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
	#preferences {
		width: calc(100vw - 2em);
		max-width: none;
		padding: 0.8em;
		margin: 1em;
		font-size: 0.9em;
	}
	
	#preferences h1 {
		font-size: 1.8em;
	}
	
	#preferences-close {
		font-size: 1.8em;
		margin: -0.4em;
		margin-top: 0.4em;
		padding: 0.2em;
	}
	
	.preference {
		padding: 0.4em;
	}
	
	.explanation h2 {
		font-size: 1.1em;
		letter-spacing: -2px;
	}
	
	.explanation p {
		font-size: 0.9em;
	}
}

#preferences-wrapper.hidden #preferences {
	top: 100%;
	opacity: 0;
	transform: translate(-50%, 0) rotate(2deg);
}

#preflist {
	max-height: 60vh;
	overflow-y: auto;
}

#preferences h1 {
	font-family: "Heading", sans-serif;
	font-size: 2em;
	border-bottom: 1px solid var(--inverse-color);
	padding-bottom: 0.25em;
}

#preferences-close {
	color: #000;
	text-align: center;
	font-family: "Heading", sans-serif;
	font-size: 2em;
	margin: -0.5em;
	margin-top: 0.5em;
	background-color: var(--inverse-color);
	padding: 0.25em;
}

.preference {
	padding: 0.5em;
	display: inline-block;
	width: calc(100% - 1em);
	vertical-align: middle;

	transition: 0.3s filter, 0.3s opacity;
}

.preference.disabled {
	filter: grayscale(100%);
	opacity: 0.5;
}

.preference>* {
	display: inline-block;
	float: right;
}

.preference.disabled>* {
	pointer-events: none;
}

.preference>.explanation {
	float: left;
}

.explanation h2 {
	font-family: "Heading", sans-serif;
	letter-spacing: -4px;
}

.explanation p {
	font-family: "Tiny", sans-serif;
	margin-bottom: -0.2em;
}

.preferences-link {
	border-bottom: 1px solid var(--inverse-color);
	margin-left: 0.5em;
	display: inline;
	font-family: "Tiny", sans-serif;
}