:root {
  font-family: sans-serif;
  color-scheme: light dark;
  --bg-primary: light-dark(#ffffff, #222222);
  --bg-secondary-opaque: light-dark(#eeeeee, #333333);
  --bg-secondary: light-dark(#22222222, #ffffff22);
  --bg-tertiary: light-dark(#22222244, #eeeeee44);
  --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;
}

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

summary {
  cursor: pointer;
}

.has-tooltip {
  cursor: help;
}

.fullscreen-body {
  display: flex;
  flex: 1 0 0;
  padding: 1em;
}

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-primary);
  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;
}

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

.navbar {
  position: sticky;
  top: 0;
  background-color: var(--bg-primary);
  display: flex;
  flex-flow: row wrap;
  gap: 0.5em;
}

body.fullscreen .navbar {
  margin: -1em -1em 0 -1em;
  padding: 1em;
}

button:disabled {
  cursor: not-allowed;
}

button,
.button {
  background-color: var(--bg-secondary);
  border-radius: 0.5em;
  border: none;
}

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

.invisible-radio {
  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;
}

.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;
}