img,
video {
  max-width: 100%;
  height: auto;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
}

table {
  border-collapse: collapse;
  margin-bottom: 10px;
  width: 100%;
  table-layout: auto;
}

table caption {
  text-align: left;
}

td,
th {
  padding: 6px;
  text-align: left;
  vertical-align: top;
  word-wrap: break-word;
}

thead {
  border-bottom: 1px solid var(--border);
}

tfoot {
  border-top: 1px solid var(--border);
}

tbody tr:nth-child(even) {
  background-color: var(--background-bright);
}

tbody tr:nth-child(even) button {
  background-color: var(--background-bright);
}

tbody tr:nth-child(even) button:hover {
  background-color: var(--background-body);
}

::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--background-main);
}

::-webkit-scrollbar-thumb {
  border-radius: 6px;
  border: 2px solid var(--background-main);
}

::-webkit-scrollbar-thumb:not(:hover) {
  background: var(--scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

::selection {
  background-color: var(--selection);
  color: var(--text-selection);
}

details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--background-bright);
  padding: 10px 10px 0;
  margin: 1em 0;
  border-radius: 6px;
  overflow: hidden;
}

details[open] {
  padding: 10px;
}

details > :last-child {
  margin-bottom: 0;
}

details[open] summary {
  margin-bottom: 10px;
}

summary {
  display: list-item;
  background-color: var(--background-main);
  padding: 10px;
  margin: -10px -10px 0;
  cursor: pointer;
  outline: none;
}

summary:hover,
summary:focus {
  text-decoration: underline;
}

details > :not(summary) {
  margin-top: 0;
}

summary::-webkit-details-marker {
  color: var(--text-main);
}

dialog {
  background-color: var(--background-bright);
  color: var(--text-main);
  border: none;
  border-radius: 6px;
  border-color: var(--border);
  padding: 10px 30px;
}

dialog > header:first-child {
  background-color: var(--background-main);
  border-radius: 6px 6px 0 0;
  margin: -10px -30px 10px;
  padding: 10px;
  text-align: center;
}

dialog::backdrop {
  background: #0000009c;
  backdrop-filter: blur(4px);
}

footer {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  color: var(--text-muted);
}

body > footer {
  margin-top: 40px;
}