:root {
	--mono-font: "Fira Code", "Courier New", Courier, Unifont, monospace;
	--normal-font: Helvetica, "Trebuchet MS", Arial, sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: #024;
	font-family: var(--normal-font);
}

main {
	background-color: #eed;
	margin: 0 auto;
	padding: 1rem 2rem;
	max-width: 100ch;
	min-height: 100svh;
}

#title-box {
	width: fit-content;
	margin: 2rem auto;

	text-align: center;

	h1 {
		font-size: 3rem;
		font-family: var(--mono-font);
		white-space: nowrap;
		letter-spacing: 0.3ch;
	}

	p {
		/* make width of this <p> not be affected by its contents */
		contain: inline-size;
		width: 100%;

		overflow-wrap: break-word;
		font-size: small;

		text-wrap: pretty; /* prevent orphan word if possible */
	}
}

#main-input-section {
	display: flex;
	flex-direction: column;

	width: 100%;
	margin: 2rem 0;

	label {
		contain: inline-size;
	}

	#fake-input-box {
		background-color: #fffc;
		border: 2px solid black;
		border-radius: 4px;
		padding: 0.5rem;

		width: 100%;
		margin: 0.5rem 0;

		cursor: text;

		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;

		#mnemonic-word-sequence {
			/* disable this container's box, and make this container's
			children behave as if they were the children of this
			container's parent (and participate in the flexbox
			mechanics on that same level) */
			display: contents;

			.chosen-mnemonic-button {
				cursor: pointer;

				border: 2px solid #82cfc2;
				border-radius: 2px;
				background-color: #a9f3e7;
				padding: 0rem 0.5rem;
				width: fit-content;
				height: 2rem;

				.chosen-mnemonic-decodes-to {
					display: block;
					line-height: 1;
					font-size: 1.25rem;
					font-family: var(--mono-font);
					font-weight: bold;
				}

				.chosen-mnemonic-word {
					display: block;
					margin-top: -0.25rem;
					font-size: 0.75rem;
				}
			}
		}

		#real-input-box {
			background: none;
			border: none;
			outline: none;

			height: 2rem;
			font-size: 2rem;
			font-family: var(--mono-font);
			font-weight: bold;

			max-width: 100%;
			field-sizing: content;

			&::placeholder {
				opacity: 0.3;
			}
		}
	}
}