:root{
  color-scheme: light;
}

.dark {
  color-scheme: dark;
}

:root{
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  font-size: 14px;

  color: light-dark(#213547, rgba(200, 200, 200, 0.87));
  background-color: light-dark(#fff, #242424);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  width: 100%;
  height: 100%;
}

.default-link {
  font-weight: 500;
  color: light-dark(#59b7fe, #7eb6e0);
  text-decoration: inherit;
}
.default-link:hover {
  color: light-dark(#81c5f9, #3875a3);
}

body {
  margin: 0;
  min-width: 100svw;
  min-height: 100svh;
  overflow: hidden;
}



h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

.default-button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: light-dark(#e7e7e7, #1a1a1a);
  cursor: pointer;
  transition: border-color 0.25s;
}
.default-button:disabled{
  opacity: 0.5;
}
.default-button:hover:not(:disabled) {
  border-color: #646cff;
}
.default-button:focus,
.default-button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

.default-button.toggled {
  border-color: #fff874;
}

textarea {
  border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
  border-width: 1px;
  background-color: field;
}

input {
  border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
  border-width: 1px;
  background-color: field;
  padding: 1px 0px;
  padding-block: 1px;
  padding-inline: 2px;
  border-radius: 4px;
}
