:root {
  --a: white;
  --b: #1c1c1f;
  --c: #232326;
  --d: #333335;
  --e: #444444;
  --f: #a7a7a7;
  --g:#313138;
  --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, .title {
  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], [data-upload], .ctx-btn  {
  cursor: pointer;
}

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

body, .ctx-menu {
  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,  .mover, .mover>button, .ctx-info, .ctx-btn, .ctx-menu {
  display: flex;
}

body,
.field,
.card, .mover, .ctx-info, .ctx-btn, .ctx-menu {
  align-items: center;
}
footer, .mover {
  justify-content: center;
}
.controls {
  justify-content: space-around;
}
 .mover, .ctx-btn  {
      justify-content: space-between;
}
.download {
  align-self: flex-start;
}
.controls{
  margin-bottom: 10px;
}
 .mover, .title, .download {
  margin-top: 10px;
}
body,
.page,
.results, .options, .ctx-menu{
  flex-direction: column;
}
.controls {
  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, .ctx-btn, .ctx-info {
  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, .ctx-menu {
  padding: 6px;
}

.ctx-btn {
    padding: 7px 8px;
}

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

.page, .ctx-info, .ctx-btn  {
    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, .ctx-btn, .ctx-menu {
  border-radius: 6px;
}

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

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

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

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

[data-upload]:hover {
    opacity: .6;
}

.ctx-menu {
  position: fixed;
}

.ctx-menu {
  min-width: 300px;
}
.ctx-menu {
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.ctx-menu {
  font-size: 12px;
}

.ctx-info, .ctx-hint {
    color: var(--f);
}

.ctx-info {
    padding: 4px 8px 8px;
}



.ctx-info, .ctx-hint {
  white-space: nowrap;
}

.ctx-btn {
  color: var(--a);
}