html,
body {
  width: 100%;
  height: 100%;
}

body {
  --copy: #ccd8f6;
  --page-bg: #29343d;
  --button-bg: #745db9;
  --button-bg-hover: #645fff;
  --card-border: #232c34;
  --input-bg: #222;
  --button-radius: 0.375rem;
  background-color: var(--page-bg);
  color: var(--copy);
}

.wrap {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

body > .wrap > .header {
  /* display: none; */
  border-bottom: 1px solid var(--copy);
}

body > footer {
  display: none;
}

label {
  color: white;
}

input[type="text"],input[type="email"] {
  color: var(--copy);
  background-color: var(--input-bg);
  border: 1px solid var(--card-border);
  box-shadow: none;
  border-radius: var(--button-radius);
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--button-bg);
}

.button,
.button.button-outline {
  background-color: var(--button-bg);
  border-radius: var(--button-radius);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
  color: white;
  border: 0;
  transition: background-color 0.2s ease-in-out;
}

.button:hover,
.button.button-outline:hover {
  background-color: var(--button-bg-hover);
}