source ⟩ hypertext ⟩ public ⟩ cosmetics ⟩ form-page.css

:root {
	--background: #000a;
	--text: #d8ffca;
	--text-translucent: #d8ffcaaa;
	--dark-text: #020;
	--accent: #fda;
}

body {
	background: url("/cosmetics/forest.jpg");
	font-family: var(--serif);
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
}

#body-container {
	display: flex;
	min-block-size: 100vh;
}

main {
	flex-grow: 1;
	max-inline-size: 60ch;
}

form {
	display: flex;
	flex-direction: column;
	gap: 1em;

	padding-inline: 2em;
	padding-block: 1em;

	background-color: var(--background);
	backdrop-filter: blur(0.5rem);
	border-radius: 0.5em;
	box-shadow: 0 0 2em black;
}

form > * {
	margin: 0;
}

form > h1 {
	font-size: 1.5rem;
	font-style: italic;
	font-variant-caps: small-caps;
}

div.input:not(.tick) label {
	display: block;

	margin-block-end: 0.25ch;

	color: var(--accent);
}

input[type="text"], input[type="password"] {
	max-inline-size: none;
	inline-size: 100%;
	margin-inline: 0;

	border: 1px solid var(--text-translucent);
	color: var(--text);
	border-radius: 0.5em;

	transition: border-color 0.25s;
}

input:is([type="text"], [type="password"]):is(:hover, :focus) {
	border-color: var(--text);
}

.input.tick {
	display: flex;
	align-items: center;
	gap: 1ch;
}

.input.tick input[type="checkbox"] {
	min-inline-size: 2em;
	min-block-size: 2em;

	accent-color: var(--text);
	background-color: transparent;
	color-scheme: dark;
}

.input.tick label {
	color: var(--accent);
	line-height: 1.1;
}

.input.tick label > small {
	display: block;

	margin-block-start: 0.1em;

	opacity: 0.8;
}

button, input[type="submit"] {
	min-inline-size: 7em;
	padding-inline: 1ch;
	padding-block: 0.5ch;

	color: var(--dark-text);

	background-color: var(--text);
	border-radius: 0.5em;

	transition: background-color 0.25s;
}

:is(button, input[type="submit"]):is(:hover, :focus) {
	background-color: var(--accent);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
}