:root {
  font-family: sans-serif;
  color-scheme: light dark;
  --fg-primary: light-dark(#000000, #dddddd);
  color: var(--fg-primary);
  --bg-primary: light-dark(#dddddd, #222222);
  --bg-secondary-opaque: light-dark(#d7d7d7, #333333);
  --bg-secondary: light-dark(#22222222, #dddddd22);
  --bg-tertiary: light-dark(#22222244, #d7d7d744);
  --bg-darken: #00000066;
  --bg-darken-darker: #00000088;
  --blur-small: blur(8px);
  --blur-medium: blur(16px);
  --blur-default: blur(32px);
  --radius-small: 0.25em;
  --radius-default: 0.5em;
}

html {
  height: 100%;
  display: flex;
  flex-flow: column;
  background-color: var(--bg-primary);
}

body {
  margin: 0;
  display: flex;
  flex-flow: column;
  flex: 1 0 auto;
}

body > :not(:is(#oneko, .Navbar)) {
  flex: 1 0 auto;
  padding: 1em;
}

body:has(.fullscreen) > :not(:is(.fullscreen, :has(.fullscreen))) {
  opacity: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0;
}

summary {
  cursor: pointer;
}

.has-tooltip {
  cursor: help;
}

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.transition-bg {
  transition-property: background-color;
  transition-duration: 150ms;
}

.transition-filter {
  transition-property: filter;
  transition-duration: 150ms;
}

.darken-on-hover:hover {
  filter: brightness(0.8);
  transition-property: filter;
  transition-duration: 150ms;
}

.buttons {
  display: flex;
  flex-flow: row wrap;
  gap: 0.5em;
  align-items: center;
}

.tab-container {
  display: flex;
  flex-flow: row wrap;
}

.navbar {
  position: sticky;
  top: 0;
  display: flex;
  flex-flow: row wrap;
  gap: 0.5em;
}

button:disabled {
  cursor: not-allowed;
}

a.button {
  text-decoration: none;
}

button,
.button {
  font-family: sans-serif;
  font-size: 1em;
  color: var(--fg-primary);
  background-color: var(--bg-secondary);
  border-radius: 0.5em;
  border: none;
  padding: 0.2em 0.5em;
}

button:not(:disabled):hover,
.button:hover {
  background-color: var(--bg-tertiary);
}

.invisible-radio,
.invisible-checkbox {
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  position: absolute;
  padding: 0;
}

.loading {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.faded {
  opacity: 0.75;
}

.tab-title {
  cursor: pointer;
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  max-width: 30ch;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.tab-title:has(:checked) {
  background: var(--bg-secondary);
}

.tab-contents {
  width: 100%;
  display: none;
  flex-flow: column;
  gap: 1em;
  margin-top: 1em;
}

.tab-title:has(:checked) + .tab-contents {
  display: flex;
  order: 1;
}

.boxed {
  border: 1px solid currentColor;
  border-radius: 0.5em;
  padding: 1em;
}

.hidden {
  display: none !important;
}

.blurred-small {
  filter: var(--blur-small);
}

.blurred-medium {
  filter: var(--blur-medium);
}

.blurred {
  filter: var(--blur-default);
}

body:has(.fullscreen) {
  overflow: hidden;
}

.show-newlines {
  white-space: pre-line;
}

a[target="_blank"]::after {
  content: "";
  background-color: currentColor;
  mask: url("./open_in_new_tab.svg") no-repeat;
  display: inline-block;
  height: 1em;
  width: 1em;
  margin-left: 0.2em;
  vertical-align: middle;
}

.fullscreen-preview {
  background: var(--bg-darken);
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
}

.fullscreen-preview img {
  max-height: 95vh;
  max-width: 95vw;
  border-radius: var(--radius-default);
}

.Navbar {
  display: flex;
  flex-flow: row nowrap;
  gap: 1em;
  align-items: center;
  justify-content: space-between;
  margin-right: 1em;

  a {
    text-decoration: none;
    color: var(--fg-primary);
    padding: 0.2em 0.5em;
    border-radius: var(--radius-small);

    &:hover {
      text-decoration: underline;
    }

    &:not([href]) {
      cursor: default;
      text-decoration: none;
      background: var(--bg-tertiary);
    }
  }
}

.Navbar__logo > img {
  height: 4em;
  width: 4em;
}

.Navbar__links {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  gap: 0.5em;
}

q {
  color: oklch(80% 10% 240);
}

blockquote {
  position: relative;
  margin: 0;
  margin-left: 1.5em;
  margin-right: 0.5em;
}

blockquote::before {
  content: "";
  position: absolute;
  left: -1em;
  height: 100%;
  display: inline-block;
  width: 0.25em;
  background: var(--bg-secondary);
  border-radius: 0.1em;
}