body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: skyblue;
}

div#container {
  width: 70%;
  min-height: 100vh;
  margin: auto;
  background-color: white;
}

header,
main {
  padding: 2rem;
}

header {
  background-color: rgb(68, 200, 245);
  color: white;
}

fieldset {
  display: none;
}

fieldset.active {
  display: block;
}

h1,
h2,
legend {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
}

h1 {
  font-size: 3.75rem;
  margin-bottom: 0.5rem;
}

h2 {
  font-size: 1.25rem;
}

legend {
  color: rgb(68, 200, 245);
  font-size: 1.1rem;
}

label,
input,
select {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

input[type='checkbox'],
input[type='checkbox'] + label {
  display: inline-block;
  width: auto;
}

label {
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}

p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

a.button,
input[type='submit'] {
  background-color: rgb(68, 200, 245);
  color: white;
  text-decoration: none;
  display: inline-block;
  padding: 0.25rem;
  margin-top: 1rem;
  width: auto;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

ul#overview {
  margin-top: 1rem;
  line-height: 120%;
}

ul#overview li {
  list-style: disc inside;
}

ul#overview span {
  font-weight: bold;
}

#feedback {
  font-weight: bold;
}

#previous {
  font-size: 0.75rem;
  color: darkgray;
  font-style: italic;
}

#start-over {
  background-color: rgb(0, 54, 72);
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 8px;
}
#start-over:hover {
  background-color: rgb(68, 200, 245);
}

#restart {
  background-color: rgb(0, 110, 255);
  color: white;
  padding: 1rem;
}
#extrafoto {
  width: 8rem;
  height: 8rem;
}