:root {
	--dark: #22223b;
	--mid: #c9ada7;
	--light: #f2e9e4;
}

html * {
	box-sizing: border-box;
}

body {
	font-family: system-ui,sans-serif;
	font-size: 100%;
	line-height: 140%;
	background-color: var(--light);
	color: var(--dark);
}

h1,h2,h3,h4,h5 {color: var(--mid);}

fieldset {
	border-radius: 4px;
	position: relative;
	padding: 1em;
}

fieldset legend {
	padding: 0;
	display: block;
	position: absolute;
	top: .5em;
}


.pinfo label {
	display: inline-block;
	width: 7em;
	margin-top: 1em;
}

.pinfo input {
	margin-right: 1em;
}

.choices label {
	display: inline-block;
	width: 100%;
	outline: 1px  dotted var(--mid);
}

.choices p:nth-child(1) label {
	width: calc(100% - 24px);
}


@media (min-width:600px) {
	
	fieldset {
		width: 720px;
	}
    .pinfo input {
		border-color: #aaa !important;
	}
}

@media (prefers-color-scheme:dark) {
    
    body {
		background: var(--dark);
		color: var(--light);
	}
	
	.pinfo input {
		background-color: var(--dark);
		color: var(--mid);
		border-style: solid;
		border-width: 1px;
		border-color: var(--light);
	}
	
}