:root {
  color-scheme: light dark;

  --background-colour: #e5e5ea;
  --background-colour-dark: #1f212a;

  --background-colour-warning: #f3a011;
  --background-colour-warning-dark: #bd8727;

  --background-colour-primary: #4211f3;
  --background-colour-primary-dark: #3127bd;

  --background-colour-raised: #fff;
  --background-colour-raised-dark: #494c50;
}

* {
  box-sizing: border-box;
  user-select: none;
}

html, body, main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: light-dark(var(--background-colour), var(--background-colour-dark));
  color: light-dark(black, white);
  font-size: 16px;
  font-family: system-ui,
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Roboto,
  "Helvetica Neue",
  Arial,
  sans-serif;
}

.banner {
  background: light-dark(var(--background-colour-warning), var(--background-colour-warning-dark));
  padding: 8px;
  font-size: 0.8rem;
}

.page--login {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.page--login fieldset {
  margin: 0;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page--login label {
  font-size: 0.8rem;
}

.page--login input {
  font-family: monospace;
  background: light-dark(var(--background-colour-raised), var(--background-colour-raised-dark));
  appearance: none;
  border: none;
  padding: 4px 6px;
  margin: 0;
  user-select: auto;
}

.page--login button {
  background: light-dark(var(--background-colour-primary), var(--background-colour-primary-dark));
  color: white;
  appearance: none;
  border: none;
  padding: 4px 24px;
  cursor: pointer;
  margin: 6px auto 0 0;

  &:hover, &:active {
    opacity: 0.8;
  }
}

.page--index .apps {
  margin: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 1200px) {
  .page--index .apps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  .page--index .apps {
    grid-template-columns: 1fr;
  }
}

.page--index .app {
  display: flex;
  flex-direction: column;
  height: 180px;
  text-decoration: none;
  padding: 16px;
  background: light-dark(var(--background-colour-raised), var(--background-colour-raised-dark));
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: 110% 90%;
  color: light-dark(black, white);

  &.app--mail {
    background-image: url('/images/illustration-mail.svg');
  }

  &.app--forge {
    background-image: url('/images/illustration-forge.svg');
  }

  &.app--vault {
    background-image: url('/images/illustration-vault.svg');
    background-position: 90% 90%;
  }

  &.app--drive {
    background-image: url('/images/illustration-drive.svg');
    background-position: 100% 90%;
  }

  &.app--dav {
    background-image: url('/images/illustration-dav.svg');
  }

  &.app--ci {
    background-image: url('/images/illustration-ci.svg');
  }

  &.app--store {
    background-image: url('/images/illustration-store.svg');
  }

  &.app--ntfy {
    background-image: url('/images/illustration-ntfy.svg');
  }

  &.app--grafana {
    background-image: url('/images/illustration-grafana.svg');
  }

  &.app--bookmarks {
    background-image: url('/images/illustration-bookmarks.svg');
  }
}

.page--index .app__title {
  font-weight: 600;
  margin-bottom: 8px;
}

.page--index .app__description {
  font-size: 0.8rem;
}