:root {
  --color-text: oklch(0.1577 0.0176 81.33);
  --color-background: oklch(0.9633 0.0176 81.33);
  --color-parts-highlight: 0.5568 0.0743 143.31;
  --color-highlight: oklch(var(--color-parts-highlight) / 1); /* #597f57 */
  --color-highlight-hover: oklch(var(--color-parts-highlight) / 20%);
  --basic-link-primary: var(--color-highlight);
  --basic-link-secondary: var(--color-highlight-hover);
}

body {
  margin: 0;
  padding: 20px;
  font-weight: 400;
  color: var(--color-text);
  font-family: 'VCTR Mono', monospace;
  background-color: var(--color-background);
}

a:not(.logo) {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  background-image:
    linear-gradient(
      to bottom,
      var(--basic-link-secondary),
      var(--basic-link-secondary)
    ),
    linear-gradient(
      to bottom,
      var(--basic-link-primary),
      var(--basic-link-primary)
    );
  background-repeat: no-repeat;
  background-size:
    100% 35%,
    100% 8%;
  background-position: bottom;
  transition: background-size 0.05s ease-out;

  &:hover,
  &:focus-visible,
  &[aria-current='page'] {
    background-size:
      100% 100%,
      100% 8%;
    text-decoration-color: var(--basic-link-primary);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: oklch(0.9633 0.0176 81.33);
    --color-background: oklch(0.2075 0.0086 81.33);
    --color-parts-highlight: 0.5568 0.0743 143.31;
    --color-highlight: oklch(var(--color-parts-highlight) / 1);
    --color-highlight-hover: oklch(var(--color-parts-highlight) / 50%);
  }
}

/* Dropshare layout styles */
.navbar:not(:has(> .sitewrapper)),
.navbar:has(> .sitewrapper) .sitewrapper {
  gap: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
}

nav {
  padding-top: 20px;
  padding-bottom: 60px;
}
nav #navbar {
  text-align: right;
}
.logo img {
  width: 50px;
}
div.container.centered {
  margin: 10px auto;
  text-align: center;
}
div.container div.download {
  margin-top: 25px;
}
div.container div.download a.btn {
  margin-bottom: 5px;
  font-size: 16pt;
}
div.container div.download span.filesize {
  font-size: 10pt;
  color: rgb(160, 160, 160);
}

/* preview types */
img {
  max-width: 100%;
  max-height: 80vh;
}
video,
iframe {
  height: auto;
  max-height: 80vh;
  width: 100%;
}
iframe {
  height: 80vh;
}