:root {
	--background-color: white;
	--text-color: black;
	--font-size: 1rem;
	--capitalization: none;
	--margin-top: 1.4em;
}
@font-face {
	font-family: "Limkin";
	src: url("https://toomuchtype.com/fonts/limkin/variable/TMT-LimkinVF.ttf") format(truetype),
		 url("https://toomuchtype.com/fonts/limkin/variable/TMT-LimkinVF.woff") format(woff),
		 url("https://toomuchtype.com/fonts/limkin/variable/TMT-LimkinVF.woff2") format(woff2);
	font-weight: 100 900;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Settings */
@keyframes settings-in {
	from {
		opacity: 0;
		transform: translateY(2vw);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.settings {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: start;
	justify-content: center;
	padding: 15vw 10vw;
	overflow-y: scroll;
	opacity: 0;
	transform: translateY(2vw);
	animation: settings-in 1s .2s forwards;
}
.settings * {
	font-family: "Limkin";
	font-variation-settings: "wght" 500, "SRFF" 50;
	font-weight: 500;
	font-size: 3vw;
	line-height: 1.3em;
}
.settings-content {
	max-width: 1200px;
	display: flex;
	align-items: start;
	flex-direction: column;
	gap: 1.2em;
}
@keyframes settings-left {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0%);
	}
}
.settings-title {
	background-color: black;
	color: white;
	line-height: 1.2em;
	padding: .6em 1.2em .4em 1.2em;
	border-radius: 4em;
	text-align: center;
	margin-bottom: .2em;
}
.settings-question {
	display: flex;
	align-items: start;
	gap: 1.2em;
	border-top: 1px solid black;
	padding-top: 1.2em;
	width: 100%;
}
.settings-question-number {
	background-color: black;
	color: white;
	aspect-ratio: 1/1;
	width: 2.1em;
	height: 2.1em;
	display: flex;
	align-items: center;
	justify-content: center;
	font-variation-settings: "wght" 550, "SRFF" 50;
	font-weight: 550;
	font-size: .5em;
	line-height: 1em;
	padding-top: .2em;
	border-radius: 50%;
	text-align: center;
}
.settings-question-content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: .6em;
}
.settings-question-options {
	display: flex;
	gap: .4em;
	flex-wrap: wrap;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}
.settings-question-option {
	margin: 0;
	font-size: 1.4vw;
	line-height: 1.4em;
	border: .15em solid black;
	background-color: white;
	padding: .55em 1.2em .4em 1.2em;
	border-radius: 2em;
	font-variation-settings: "wght" 550, "SRFF" 50;
	font-weight: 550;
	cursor: pointer;
	color: black;
	text-align: center;
	text-decoration: none;
}
.settings-question-option:hover {
	background-color: black;
	color: white;
}
.settings-question-option:active {
	transform: scale(.9);
}
.settings-question-option[data-active="1"] {
	background-color: black;
	color: white;
}
.settings-question-break {
	border-top: 1px solid black;
	width: 100%;
	padding: 4em 0 2.8em;
	align-self: center;
	text-align: center;
}
.settings-question-value[data-active="0"] {
	display: none;
}
.question[data-active="0"] {
	display: none;
}
.settings-question-option-display {
	padding-top: .2em;
	min-width: 10vw;
	text-align: center;
	margin: 0;
	font-size: 2vw;
	line-height: 1.4em;
	font-variation-settings: "wght" 550, "SRFF" 50;
	font-weight: 550;
}
.settings-question-option-display * {
	margin: 0;
	font-size: 2vw;
	line-height: 1.4em;
	font-variation-settings: "wght" 550, "SRFF" 50;
	font-weight: 550;
}
.settings-question-option-value {
	align-self: center;
	background-color: white;
	color: black;
	aspect-ratio: 1/1;
	width: 2.1em;
	height: 2.1em;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4vw;
	line-height: 1.4em;
	border: .15em solid black;
	padding-top: .2em;
	border-radius: 50%;
	text-align: center;
	cursor: pointer;
	font-variation-settings: "wght" 600, "SRFF" 50;
	font-weight: 600;
}
.settings-question-option-value:hover {
	background-color: black;
	color: white;
}
.settings-question-option-value:active {
	transform: scale(.9);
}
.generate {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: .4em;
	justify-content: center;
	border-top: 1px solid black;
	padding-top: 4em;
	width: 100%;
}
.generate-text {
	text-align: center;
}
.generate-button {
	margin: 0;
	font-size: 1.4vw;
	line-height: 1.4em;
	border: .15em solid black;
	background-color: white;
	padding: .55em 1.2em .4em 1.2em;
	border-radius: 2em;
	font-variation-settings: "wght" 550, "SRFF" 50;
	font-weight: 550;
	cursor: pointer;
	color: black;
	text-align: center;
	text-decoration: none;
}
.generate-button:hover {
	color: white;
	background-color: black;
}
.generate-button:active {
	transform: scale(.9);
}
.skip {
	position: fixed;
	bottom: 1vw;
	right: 1vw;
	font-family: "Limkin";
	font-variation-settings: "wght" 500, "SRFF" 50;
	font-weight: 500;
	font-size: 1.4vw;
	line-height: 1.3em;
}
.skip[data-active="0"] {
	display: none;
}
.loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	width: 100vw;
	height: 100dvh;
	background-color: black;
	color: white;
	font-size: 24px;
	opacity: 0;
	font-family: "Limkin";
	z-index: 99999;
	font-variation-settings: "wght" 500, "SRFF" 50;
	font-weight: 500;
}

/* Printable content */
.printout {
	font-family: "Limkin";
	font-size: var(--font-size);
	text-transform: var(--capitalization);
	font-variation-settings: "wght" 500, "SRFF" 50;
	font-weight: 500;
	text-align: justify;
	line-height: 2em;
	display: none;
	padding: 12pt;
}
.printout section {
	display: inline;
}
.printout section[data-book="1"] {
	display: block;
	break-before: left;
}
.printout-bubble-filled {
	font-size: var(--font-size);
	border: .1em solid black;
	display: inline;
	background-color: black;
	color: white;
	padding: .6em 1.2em .4em 1.2em;
	border-radius: 2em;
	line-height: 1em !important;
}
.printout-bubble-outline {
	font-size: var(--font-size);
	border: .1em solid black;
	display: inline;
	padding: .6em 1.2em .4em 1.2em;
	border-radius: 2em;
	line-height: 1em !important;
	break-before: always;
}
.printout-paragraph {
	display: inline;
	border: .1em solid black;
	padding: .4em .8em .25em .8em;
	border-radius: 2em;
}
.printout-paragraph[data-book="1"] {
	border: unset;
	padding: unset;
}
#printout-end {
	display: block;
	width: 1em;
	height: 1em;
	background-color: white;
}
.printout-bubble-filled[data-book="1"], .printout-bubble-outline[data-book="1"] {
	display: inline-block !important;
	margin-top: 0 !important;
}
[data-book="1"] {
	display: block !important;
	margin-top: var(--margin-top);
}
@media print {
	.settings {
		display: none;
	}
	.skip {
		display: none;
	}
}

/* Mobile styles */
@media screen and (max-width: 800px) {
	.settings {
		padding: 40px 20px;
	}
	.settings * {
		font-size: 5vw;
	}
	.settings-question-number {
		width: 2.1em;
		height: 2.1em;
		font-size: .5em;
		line-height: 1em;
		padding-top: .2em;
	}
	.settings-question-option {
		font-size: 2.8vw;
	}
	.generate-button {
		font-size: 2.8vw;
	}
}