:root{
	--dark: #1c0e32;
	--mid: #5f30ab;
	--light: #f3effa;
}

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;

}

fieldset legend {
	padding: 0; 
	display: block;
	position: relative;
	top: 0.5em;
}

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

.pinfo input{
	margin-left: -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: #FFFFFF !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);
	}
	

}