* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
:root {
  --clr-body-bg: hsl(0 0% 90%);
  --clr-card-bg: hsl(0 0% 100%);
  --clr-text: hsl(0 0% 15%);
  --clr-heading: hsl(0 0% 25%);
}
body {
  background: var(--clr-body-bg);
  color: var(--clr-text);
}
h1,
h2,
h3,
p {
  color: var(--clr-heading);
  line-height: 1.1;
}
form > fieldset {
  border: 0;
  margin-inline: auto;
  display: flex;
  gap: 1rem;
  width: fit-content;
  padding: 1rem 2rem;
  border-radius: 0 0 0.5rem 0.5rem;
  background-color: #fff;
}
form input[type="radio"] {
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  outline: 3px solid var(--radio-color, currentColor);
  outline-offset: 3px;
  border-radius: 50%;
  cursor: pointer;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
#container {
  width: 80%;
  margin: 0 auto;
  margin-top: 1rem;
}
#cards {
  height: 500px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.card {
  background-color: var(--clr-card-bg);
  border-radius: 0.7rem;
  padding: 1rem;
  border-top: 4px solid;
}
.card p {
  margin-top: 0.5rem;
}
footer {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
input[type="radio"]:checked {
  background-color: var(--radio-color);
}
input[type="radio"]#light {
  --radio-color: gray;
}
input[type="radio"]#pink {
  --radio-color: pink;
}
input[type="radio"]#blue {
  --radio-color: blue;
}
input[type="radio"]#green {
  --radio-color: green;
}
input[type="radio"]#dark {
  --radio-color: #232323;
}
.pink {
  --clr-body-bg: hsl(310 50% 90%);
  --clr-card-bg: hsl(310 50% 100%);
  --clr-text: hsl(310 50% 15%);
  --clr-heading: hsl(310 50% 25%);
}

.blue {
  --clr-body-bg: hsl(209 50% 90%);
  --clr-card-bg: hsl(209 50% 100%);
  --clr-text: hsl(209 50% 15%);
  --clr-heading: hsl(209 50% 25%);
}

.green {
  --clr-body-bg: hsl(109 50% 90%);
  --clr-card-bg: hsl(109 50% 100%);
  --clr-text: hsl(109 50% 15%);
  --clr-heading: hsl(109 50% 25%);
}

.dark {
  --clr-body-bg: hsl(209 50% 10%);
  --clr-card-bg: hsl(209 50% 5%);
  --clr-text: hsl(209 50% 90%);
  --clr-heading: hsl(209 50% 80%);
}

:root:has(#pink:checked) {
  --clr-body-bg: hsl(310 50% 90%);
  --clr-card-bg: hsl(310 50% 100%);
  --clr-text: hsl(310 50% 15%);
  --clr-heading: hsl(310 50% 25%);
}

:root:has(#blue:checked) {
  --clr-body-bg: hsl(209 50% 90%);
  --clr-card-bg: hsl(209 50% 100%);
  --clr-text: hsl(209 50% 15%);
  --clr-heading: hsl(209 50% 25%);
}

:root:has(#green:checked) {
  --clr-body-bg: hsl(109 50% 90%);
  --clr-card-bg: hsl(109 50% 100%);
  --clr-text: hsl(109 50% 15%);
  --clr-heading: hsl(109 50% 25%);
}

:root:has(#dark:checked) {
  --clr-body-bg: hsl(209 50% 10%);
  --clr-card-bg: hsl(209 50% 5%);
  --clr-text: hsl(209 50% 90%);
  --clr-heading: hsl(209 50% 80%);
}