source ⟩ hypertext ⟩ public ⟩ latbs ⟩ converter ⟩ converter.css

#converter fieldset {
	margin-block-end: 1em;
	margin-inline: 0;
	padding: 1em;

	--element-color: #9cd6ff;
	color: #70b6e7;

	accent-color: var(--element-color);
	background: linear-gradient(to bottom right, #002f56, #004158);
	border: none;
	border-radius: 1em;
	color-scheme: dark;
}

#converter fieldset#achillean {
	--element-color: #ffbab1;
	color: #f28e82;

	background: linear-gradient(to bottom right, #551303, #6a1720);
}

#converter legend {
	margin-block-end: 0.5ch;
	padding-inline: 0;

	color: var(--element-color);

	translate: 0 1em;
}

#converter legend strong {
	color: inherit;
	font-variant-caps: small-caps;
	font-weight: bold;
	letter-spacing: var(--caps-spacing);
}

.converter-date {
	margin-block-end: 0.5ch;

	font-size: 1.1em;
}

.converter-time {
	font-size: 0.9em;
}

.converter-date,
.converter-time {
	font-style: italic;
}

#converter input,
#converter select {
	color: var(--element-color);
	font-family: inherit;
	font-size: inherit;

	background-color: transparent;
	border: none;
	border-block-end: 1px solid;
}

#converter input[type="number"] {
	inline-size: 3em;
}

#converter input.year[type="number"] {
	inline-size: 4em;
}

#converter select.weekday {
	color: inherit;
	font-style: italic;

	appearance: none;
}