@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&display=swap");

:root {
  --bg-color: #f0f0f0;
  --bg-sub-color: #f1f1f1;
  --route-bg-color: #ffffff;
  --text-color: #000000;
  --text-sub-color: #595959;
  --border-color: #e0e0e0;
  --error-color: #ff0000;
  --success-color: #00ff00;
  --accent-color: #3ad0a1;
  --accent-in-text-color: #000000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #181818;
    --bg-sub-color: #1e1e1e;
    --route-bg-color: #242424;
    --text-color: #ffffff;
    --text-sub-color: #a4a4a4;
    --border-color: #2c2c2c;
  }
}

* {
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-color) var(--border-color);
}

::selection {
  background-color: var(--accent-color);
  color: var(--accent-in-text-color);
}

html, body {
  width: 100dvw;
  height: 100dvh;
  font-size: 14px;
  font-family: "BIZ UDPGothic", sans-serif;
  line-height: 1.5rem;
  tab-size: 2;
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--accent-color);
}

label {
  width: fit-content;
}

.title {
  font-size: 1.6rem;
  font-weight: bold;
}

.modal {
  background-color: var(--bg-color);
  border-radius: 2rem;
  padding: 3rem 6rem;
  width: fit-content;
  height: fit-content;
  max-width: 70dvw;
  max-height: 90dvh;
}