:root {
  --landing-background-color-light: white;
  --landing-foreground-color-light: black;
  --landing-background-color-dark: black;
  --landing-foreground-color-dark: white;
  --landing-project-item-hover-color-light: #e8e8e8;
  --landing-project-item-active-color-light: #ccc;
  --landing-project-item-hover-color-dark: #444;
  --landing-project-item-active-color-dark: #666;

  --landing-background-color: var(--landing-background-color-light);
  --landing-foreground-color: var(--landing-foreground-color-light);
  --landing-project-item-hover-color: var(--landing-project-item-hover-color-light);
  --landing-project-item-active-color: var(--landing-project-item-active-color-light);
}

:root.dark-theme {
  --landing-background-color: var(--landing-background-color-dark);
  --landing-foreground-color: var(--landing-foreground-color-dark);
  --landing-project-item-hover-color: var(--landing-project-item-hover-color-dark);
  --landing-project-item-active-color: var(--landing-project-item-active-color-dark);
}

@media (prefers-color-scheme: dark) {
  :root {
    --landing-background-color: var(--landing-background-color-dark);
    --landing-foreground-color: var(--landing-foreground-color-dark);
    --landing-project-item-hover-color: var(--landing-project-item-hover-color-dark);
    --landing-project-item-active-color: var(--landing-project-item-active-color-dark);
  }

  :root.light-theme {
    --landing-background-color: var(--landing-background-color-light);
    --landing-foreground-color: var(--landing-foreground-color-light);
    --landing-project-item-hover-color: var(--landing-project-item-hover-color-light);
    --landing-project-item-active-color: var(--landing-project-item-active-color-light);
  }
}

a {
  color: inherit;
  text-decoration: inherit;
  cursor: pointer;
}

.landing-body {
  height: 100%;
  width: 100%;
}

.landing-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1em;
  height: calc(100% - 2rem);
  padding-top: 1em;
  padding-left: 6em;
}

.landing-item {
  font-size: 1.5em;
}

#fontra-icon-header {
  display: flex;
  gap: 2em;
}

#fontra-icon-header a {
  font-size: 0.8em;
}

#login-form {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
.login-label {
  color: gray;
  font-size: 0.85em;
  margin-top: 0.5em;
}

.login-input {
  font-family: fontra-ui-regular, sans-serif;
  font-size: 1em;
  width: 20em;
  padding: 0.25em;
  color: var(--landing-foreground-color);
  background-color: var(--landing-background-color);
}

.login-button {
  border-radius: 2em;
  background-color: #46f;
  width: max-content;
  color: white;
  padding: 0.5em 1.1em 0.5em 1em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  border: none;
  font-family: fontra-ui-semibold, sans-serif;
  font-size: 1em;
  transition: all 0.1s ease-in;
}

.login-button:hover {
  background-color: #24d;
  cursor: pointer;
}

.login-button:active {
  background-color: #02a;
  cursor: pointer;
}

.logout-button {
  border-radius: 2em;
  background-color: #999;
  width: max-content;
  color: white;
  padding: 0.5em 1.1em 0.5em 1em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  border: none;
  font-family: fontra-ui-semibold, sans-serif;
  font-size: 0.8em;
  transition: all 0.1s ease-in;
}

.logout-button:hover {
  background-color: #777;
  cursor: pointer;
}

.logout-button:active {
  background-color: #555;
  cursor: pointer;
}

#login-failure-message {
  font-family: fontra-ui-semibold, sans-serif;
  color: red;
}

#project-list {
  display: grid;
  overflow-y: auto;
}

.project-item {
  border-radius: 1em;
  padding: 0.25em 1em 0.25em 1em;
  transition: all 0.1s ease-in;
}

.project-item:hover {
  background-color: var(--landing-project-item-hover-color);
  cursor: pointer;
}

.project-item:active {
  background-color: var(--landing-project-item-active-color);
}

.hidden {
  display: none;
}
