@charset "UTF-8";

h1 {
	text-align: center;
	margin-bottom: 0.25em;
}

.options-box {
	margin: 0 auto 1em;
	padding: 0.75em;
	width: 90%;
	border: 1px solid var(--text);
	border-radius: 0.5em;
	box-shadow: 1px 1px 0px grey;
	background-color: cornsilk;
	font-size: 0.9em;
	
	--form-bg: white;
	--bg: white;
	--text: black;
}

fieldset {
	color: var(--text);	/* No idea why this is necessary. Firefox is being weird. */
}

fieldset:not(:last-of-type) {
	margin-bottom: 0.4em;
}

legend {
	font-weight: bold;
	margin-bottom: 0.1em;
	font-size: 0.9em;
}

input, label, button {
	margin: 0.2em 0;
}

button {
	font-weight: bold;
	font-size: 1.1em;
	box-shadow: 1px 1px 0px grey;
}

button[aria-checked] {
	color: grey;
	background-color: var(--btn);
	
	&:hover, &:active {
		background-color: var(--btn-h);
	}
	
	--btn: var(--form-bg);
	--btn-h: lightgrey;
}

button[aria-checked="true"] {
	color: var(--text) !important;
	
	--btn: var(--brand-yellow);
	--btn-h: #e6c300;
}

[name="plane"] button {
	padding: 0.1em 0.4em;
}

[name="font"] button {
	vertical-align: middle;
	line-height: 100%;
	padding: 0.2em 0.3em;
	vertical-align: middle;
}

[name="generate"] button {
	color: white;
	text-shadow: 1px 1px 0px black;
}

#btn-generate {
	background-color: orangered;
	
	&:hover {
		background-color: #e63d00;
	}
	
	&:active {
		background-color: #cc3600;
	}
}

button[data-form] {
	background-color: darkkhaki;
	
	&:hover {
		background-color: #b0a94f;
	}
	
	&:active {
		background-color: #9e9947;
	}
}

#btn-restore {
	background-color: olivedrab;
	
	&:hover {
		background-color: #5c7a1f;
	}
	
	&:active {
		background-color: #4d6619;
	}
}

button:focus, input:focus {
	outline-width: 2px;
}

#btn-collapse {
	float: right;
	font-size: 1.2em;
	margin: 0 0 0 0.1em;
	background-color: white;
	
	&:hover {
		background-color: lightgrey;
	}
	
	&:active {
		background-color: darkgrey;
	}
}

#btn-collapse::before {
	content: "▲";
}

[data-collapsed="true"] #btn-collapse::before {
	content: "▼";
}

[data-collapsed="true"] fieldset:not([name="generate"]) {
	display: none;
}

.separator {
	font-weight: 900;
	font-size: 1.45em;
	margin: 0 0.15em;
}

.separator::before {
	content: "|";
}

#output {
	width: 95%;
	margin: 0 auto 2em;
	padding: 0.4rem 0.6rem;
	color: black;
	background-color: #f2f2f2;
	border: 1px dotted grey;
	border-radius: 0.5rem;
	white-space: pre-wrap;
	word-break: break-all;
	word-wrap: break-word;
	resize: vertical;
	text-align: start;
	unicode-bidi: plaintext;
	hyphens: manual;
	line-height: 2;
}

[data-font="arial"] {
	font-family: Arial, "Arial Unicode MS", "Arial Unicode", Helvetica, sans-serif;
}

[data-font="times"] {
	font-family: "Times New Roman", Times, serif;
}

[data-font="courier"] {
	font-family: "Courier New", Courier, monospace;
}

[data-font="code2000"] {
	font-family: Code2000, Code2001, Code2002, serif;
}

[data-font="symbola"] {
	font-family: Symbola, serif;
}

[data-font="segoe"] {
	font-family: "Segoe UI Emoji", "Segoe UI", "Segoe UI Symbols", "Segoe UI Historic", Segoe, sans-serif;
}

[data-font="unifont"] {
	font-family: Unifont, "Unifont Upper", "Unifont CSUR", sans-serif;
}

[data-font="allofemanubis"] {
	font-family: var(--allofemanubis);
}

button[data-font="allofemanubis"] {
	font-style: italic;
}

@media (max-width: 500px) {
	button {
		font-size: 1em;
	}
}

@media (max-width: 400px) {
	button {
		font-size: 0.9em;
	}
}

/*@media (prefers-color-scheme: dark) {
	#output {
		background-color: black;
	}
	
	button[aria-checked] {
		--btn-h: var(--highlight2);
	}
	
	button[aria-checked="true"] {
		--btn: var(--brand-purple);
		--btn-h: #b711ee;
	}
	
	.options-box {
		background-color: midnightblue;
	}
}*/