Mini Video Library

:root {
  --bg: #ece9d8;
  --panel: #ffffff;
  --line: #7f9db9;
  --text: #000000;
  --muted: #4b4b4b;
  --accent: #245edb;
  color-scheme: light;
}

* { scrollbar-color: #9db7df #f1efe2; }

body {
  font-family: Tahoma, "Segoe UI", sans-serif;
  font-size: 13px;
  background: linear-gradient(180deg, #6ea8e5 0, #b8d7f2 150px, #ece9d8 360px) fixed;
}

header {
  height: 58px;
  color: white;
  background: linear-gradient(180deg, #3c8cf3 0%, #1265d6 10%, #0b49b5 88%, #073b9b 100%);
  border-bottom: 2px solid #f5a62a;
  box-shadow: inset 0 1px #7bb6ff, 0 2px 5px #315f9690;
}

.brand { color: white; font-family: Tahoma, sans-serif; text-shadow: 1px 1px #003a91; }
.brand:first-letter { color: #8bd13c; }
nav { color: #fff; }
nav a { padding: 5px 10px; border-radius: 2px; }
nav a:hover { color: #fff; background: #ffffff25; }

main {
  margin-top: 26px;
  background: #ece9d8;
  border: 1px solid #164e9b;
  border-radius: 8px 8px 2px 2px;
  box-shadow: 3px 4px 12px #315f9670;
}

footer { color: #444; }
.hero h1, .detail-header h1, .settings h1 { color: #003399; letter-spacing: -.04em; }
.eyebrow { color: #e85b12 !important; }

input, select, textarea {
  color: #000;
  background: #fff;
  border: 1px solid #7f9db9;
  border-radius: 0;
  box-shadow: inset 1px 1px 2px #9995;
}

button, .button {
  color: #000;
  background: linear-gradient(180deg, #fff 0%, #f4f1e5 48%, #ddd8c8 52%, #f5f2e8 100%);
  border: 1px solid #003c74;
  border-radius: 3px;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #aca899;
  font-family: Tahoma, sans-serif;
}

button:hover, .button:hover { border-color: #e68b2c; box-shadow: inset 0 0 0 1px #ffd27a; }
button:active { background: #d6d2c2; box-shadow: inset 1px 1px 2px #777; }

.play {
  color: #fff;
  background: linear-gradient(180deg, #83d34a 0%, #3ca51d 45%, #248807 55%, #45ad25 100%);
  border: 1px solid #1d6b08;
  border-radius: 4px;
  box-shadow: inset 1px 1px #bdf297, inset -1px -1px #176000;
  text-shadow: 1px 1px #176000;
}

.poster, .cover {
  background: #fff;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 1px 1px 4px #5558;
}

.card h2 { color: #003399; }
.card p, .muted, .back { color: #555; }
.badge { color: #fff; background: #245edb; border: 1px solid #003caa; border-radius: 3px; }
.compatibility { color: #176000; background: #dff6c8; border: 1px solid #62a43b; border-radius: 3px; }

.media-facts div, .track-card, .detail-panels, .plugin-card, .stat-grid article {
  color: #000;
  background: #fff;
  border-color: #7f9db9;
  border-radius: 3px;
}

.detail-panels summary { color: #003399; background: linear-gradient(90deg, #d6e5fa, #fff); }
.detail-panels details+details, .panel-body { border-color: #b7c9df; }
.tag-cloud span { color: #000; background: #fffbd7; border: 1px solid #d6b95b; border-radius: 2px; }
.settings-tabs { background: #d6e5fa; border: 1px solid #7f9db9; border-radius: 3px; }
.settings-tabs button { color: #003399; background: transparent; border-color: transparent; box-shadow: none; }
.settings-tabs button.active { color: #fff; background: #245edb; border-color: #003caa; }
.notice { color: #176000; background: #dff6c8; border: 1px solid #62a43b; }
::selection { color: #fff; background: #245edb; }