:root {
  --a: white;
  --b: #1c1c1f;
  --c: #232326;
  --d: #333335;
  --e: #444444;
  --x: #b32121;
  --size: 680px;
}
::selection {
  background: var(--x);
  color: var(--a);
}
*::-webkit-scrollbar {
  width: 2px;
}

*::-webkit-scrollbar-track {
  background: var(--c);
  border-radius: 6px;
}

*::-webkit-scrollbar-thumb {
  background: var(--e);
  border-radius: 6px;
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-color: var(--e) var(--c);
  }
}

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

a {
  text-decoration: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:focus {
  outline: none;
}

input::placeholder {
  color: gray;
}

body,
button,
textarea,
input,
a {
  color: var(--a);
  font-size: 13px;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-style: normal;
}
button:disabled {
    opacity: .5;
    cursor: default;
}
button, .options>span, input[readonly] {
  cursor: pointer;
}

button,
input {
  background: transparent;
  border: none;
  border-radius: inherit;
}

body {
  background: var(--b);
}

body {
  min-height: 100vh;
}
@supports (min-height: 100dvh) {
  body {
    min-height: 100dvh;
  }
}

.page,
body,
.field,
.icon,
footer,
.results,
.card, .player, .controls, .options, .config, .config>div, .mover, .mover>button {
  display: flex;
}

body,
.field,
.card, .mover {
  align-items: center;
}
footer, .mover {
  justify-content: center;
}
.controls {
  justify-content: space-around;
}
.config>div, .mover, .config {
      justify-content: space-between;
}
.download {
  align-self: flex-start;
}
.controls, .config {
  margin-bottom: 10px;
}
.config, .mover, .title, .download {
  margin-top: 10px;
}
body,
.page,
.results, .options{
  flex-direction: column;
}
.controls, .config>div, .config  {
  flex-direction: row;
}
.page {
  max-width: var(--size);
}

.page,
.field,
.field > input[type="text"],
.field > input[type="password"], .field > input[type="email"],
.results, video, .options {
  width: 100%;
}

input[type="text"], input[type="password"] {
    text-overflow: ellipsis;
}

main,
.page, .select {
  flex: 1 0 auto;
}

main, .select {
  position: relative;
}

.page,
footer {
  padding: 10px;
}

.field > input[type="text"],
.field > input[type="password"], .field > input[type="email"],
.stx, .options>span {
  padding: 6px;
}

.icon,
.card {
  padding: 4px;
}
.mover {
  gap:4px;
}
.results,
.card, .controls, .config  {
  gap: 6px;
}

.page {
    gap:12px;
}

.results, .options {
  overflow-x: auto;
}
.options {
  max-height: 180px;
}
.results {
  max-height: 350px;
}
video {
    height: 100%;
}
.player {
    max-height: 460px;
}
.field,
.results, .options, .mover>button  {
  background-color: var(--c);
}
.results {
  top: 0;
}
.options {
top: calc(100% + 5px);
}
.results, .options {
  left: 0;
}
.results, .options {
  position: absolute;
}

.field,
.results,
.card img, .player, .options, .mover>button {
  border-radius: 6px;
}

.field,
footer,
.results, .options{
  border-color: var(--d);
}
.field:has(input:focus), .mover>button  {
  border-color: var(--e);
}
.field,
.field:has(input:focus),
.results, .options, .mover>button  {
  border-width: 1px;
}
.field,
.field:has(input:focus), .results, .options, .mover>button  {
  border-style: solid;
}
footer {
  border-width: 0;
}
footer {
  border-top-width: 1px;
}
footer {
  border-style: dashed;
}

[data-state="off"], .hidden {
  display: none !important;
}

.card:hover, .options>span:hover, .selected  {
  background: var(--d);
}

.card img {
  max-width: 40px;
  max-height: 60px;
}
.results, .options {
    z-index: 6;
}