@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 100 800;
  src: url("./fonts/ws.1d373a58e574.woff2") format('woff2-variations');
}

@font-face {
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 100 800;
  src: url("./fonts/wsitalic.362d9b774cb8.woff2") format('woff2-variations');
}

:root {
  --green-20: 112, 225, 123;
  --green-40: 0, 169, 28;

  --black: 23, 25, 31;
  --grey-0: 255, 255, 255;
  --grey-50: 247, 247, 248;
  --grey-100: 243, 244, 246;
  --grey-200: 221, 223, 228;
  --grey-300: 190, 194, 202;
  --grey-400: 150, 155, 166;
  --grey-500: 110, 116, 129;
  --grey-600: 83, 88, 101;
  --grey-700: 61, 66, 77;
  --grey-800: 45, 49, 57;
  --grey-900: 32, 34, 40;
  --white: 255, 255, 255;
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Work Sans', system-ui, -apple-system, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  background-color: RGB(var(--black));
  color: RGB(var(--white));

  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

a {
  color: RGB(var(--white));
}

.box {
  background-color: RGB(var(--grey-900));
  box-shadow: 0 0.25rem 0.5rem #00000052;
  width: 350px;
  min-height: 300px;
  padding: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.box .logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  margin-bottom: 0.5rem;
}

.box .logo svg {
  width: 2rem;
  color: RGB(var(--green-20));
}

.box .logo span {
  font-size: 2.25rem;
  padding-left: 0.5rem;
  font-weight: 375;
  letter-spacing: -0.1rem;
}

form {
  margin-top: 1rem;
}

.field {
  padding-bottom: 0.5rem;
}

.field > * {
  padding-top: 0.5rem;
}

.field label {
  display: block;
  color: RGB(var(--grey-400));
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.errorlist {
  list-style: none;
  color: red;
}

textarea {
  resize: vertical;
}

input,
textarea,
button {
  padding: 0.475rem 0.75rem;
  border: 1px solid RGB(var(--grey-800));
  transition: background-color 0.25s;
  font-size: inherit;
}

input,
textarea {
  width: 100%;
  display: block;
  background-color: RGB(var(--grey-800));
  color: RGB(var(--grey-100));
}

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
button:focus {
  border: 1px solid RGB(var(--grey-100));
}

input:hover,
textarea:hover {
  background-color: RGB(var(--grey-700));
}

input:focus,
textarea:focus,
button:focus {
  outline: none;
}

button {
  width: 100%;
  background-color: RGB(var(--green-20));
}

button:focus,
button:hover {
  background-color: RGB(var(--green-40));
}

button[type='submit'] {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

p {
  margin-top: 1rem;
  max-width: 50ch;
}