/* A minimal reset for a simple document */
html {
	box-sizing: border-box;
}
*, *::before, *::after {
	box-sizing: inherit;
	padding: 0;
	margin: 0;
}

/* Page settings */
body {
	font-family: "Segoe UI", "Helvetica Neue", sans-serif;
	color: #2f3029;
	background-color: #eb9b10;
}

/* These classes are added by JavaScript */
body.gold {
	background-color: #eb9b10;
}
body.ocean {
	background-color: #80bac7;
}
body.apple {
	background-color: #a2c74c;
}
body.lavender {
	background-color: #aa86db;
}

/* Page layout */
main {
	max-width: 640px;
	background-color: #fff6;
	padding: 1rem 2.4rem 1.75rem;
	border: 5px solid #fff8;
	margin: 2.75rem auto;
	box-shadow:
	0 0 0 5px #fff4,
	0 0 0 10px #fff2;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-family: Cambria, Georgia, serif;
	font-weight: normal;
	line-height: 1.2;
	text-wrap: balance;
}
h1 {
	font-size: 2.75rem;
}
h2 {
	font-size: 2.25rem;
	font-style: italic;
	color: #c64410;
	margin-top: 3rem;
}
p {
	font-size: 1.1rem;
	line-height: 1.55;
	text-wrap: pretty;
	margin-top: 0.5rem;
}
img {
   display: block;
   float: right;
   width: 40%;
   height: auto;
   margin: 15px 0 15px 25px;
   border-radius: 50% 50% 50% 50% / 30% 30% 70% 70% ;
   shape-outside: margin-box;
}

/* Links */
a:link {
	text-decoration-style: solid;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
a:link, a:visited {
	color: #000C;
	text-decoration-color: #0004;
}
a:hover, a:active, a:focus-visible {
	color: #C00;
}
a:focus-visible {
	outline: none;
	background-color: #FFF5;
}

/* Radio buttons */
fieldset {
	max-width: 660px;
	background-color: #fff2;
	margin: 0 auto;
	padding: 1.5rem;
	border: 0;
}
legend {
	float: left;
	width: 100%;
	margin: 0 0 0.5em 0;
}
input {
	margin-right: 0.5rem;
}
label + input {
	margin-left: 2.0rem;
}
label {
	text-transform: capitalize;
	cursor: pointer;
}
@media (min-width: 660px) {
	legend {
		width: fit-content;
		margin: 0 1.5em 0 0;
	}
}