:root {
  --clr-text: hsl(0, 0%, 20%);
  --clr-accent: hsl(0, 0%, 65%);
  --clr-body-bg: hsl(0, 0%, 90%);
  --clr-input-bg: hsl(0, 0%, 30%);
  --clr-button-bg: hsl(223, 100%, 50%);
  --clr-button-bg-hover: hsl(223, 100%, 60%);
  --clr-button-text: hsl(0, 0%, 90%);
  --clr-text-secondary: white;
}

body {
  background: var(--clr-body-bg);
  color: var(--clr-text);
}

button {
  border: none;
  background-color: var(--clr-button-bg);
  color: var(--clr-button-text);
}

button:hover {
  background-color: var(--clr-button-bg-hover);
}

form > input {
  background-color: var(--clr-input-bg);
  border: 1px solid var(--clr-accent);
}

::placeholder {
  color: var(--clr-body-bg);
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}