* {
	box-sizing: border-box;
}

html {
	font-family: system-ui;
}

body {
	margin: 0;
	padding: 1rem;
}

.inaccessible :focus {
	outline: none;
}

main,
.main {
	inline-size: 45rem;
	margin-inline: auto;
	max-inline-size: 100%;
}

h1,
.h1 {
	font-size: 1.75rem;
	font-weight: 700;
	margin-block: 0 1.5rem;
}

form,
fieldset,
.fieldset {
	display: grid;
	gap: 1.5rem;
}

fieldset,
.fieldset {
	border: 0.0625rem solid lightgray;
	margin: 0;
	padding: 1rem;
}

.fieldset {
	margin-block-start: 0.6rem;
	padding-block-start: 1.5rem;
	position: relative;
}

legend,
.legend {
	font-weight: 700;
	padding: 0;
}

.legend {
	background: white;
	inset-block-start: -0.65rem;
	inset-inline-start: 1rem;
	position: absolute;
}

label,
.label {
	display: inline-block;
	padding-block-end: 0.25rem;
}

input,
textarea {
	border: 0.0625rem solid gray;
	display: block;
	font: inherit;
	padding-block: 0.4rem;
	padding-inline: 0.5rem;
}

textarea,
input:not([type="date"], [type="time"]) {
	inline-size: 100%;
}

button,
.button {
	background: aliceblue;
	border: 0.0625rem solid;
	cursor: pointer;
	font: inherit;
	justify-self: start;
	padding: 0.5rem;

	&:hover {
		background: lightblue;
	}
}