:root { color-scheme: light dark; --red: #c51e0e; } @media (prefers-color-scheme: dark) { :root { --red: #F4511E; } } *, *::before, *::after { box-sizing: border-box; appearance: none; } *:focus { outline: 2px solid var(--red); } body { margin: 0 auto; padding: 0; text-align: center; } a { color: var(--red); } textarea, input { font-family: sans-serif; font-size: 0.8em; } nav { margin-bottom: 20px; } input::file-selector-button { appearance: none; } #search-form { display: inline-block; } .mao-error { display: flex; flex-direction: column; background: url("/chairman_1.jpg"); background-size: auto 600px; background-repeat: no-repeat; background-position: center center; height: 600px; } .hidden { display: none; } .mao-error p { color: white; text-transform: uppercase; font-weight: bold; font-family: "Impact", "Bebas", "League Gothic", "Oswald", "Coluna", "Ubuntu Condensed", system-ui, sans-serif; text-shadow: 3px 3px 0 black, -3px -3px 0 black, 3px -3px 0 black, -3px 3px 0 black, -3px 0px 0 black, 3px 0px 0 black, 0px 3px 0 black, 0px -3px 0 black; font-size: 2em; } .mao-error p:last-child { margin-top: auto; } #video-list { padding: 0; list-style: none; width: 100%; max-width: 800px; margin: auto; } #video-player { height: 60vh; width: 100%; background-color: black; } #video-result { width: 106vh; display: none; text-align: left; margin: auto; } .video-item { padding: 0.5rem; display: flex; flex-direction: row; align-items: flex-start; gap: 2rem; text-align: left; background-color: rgba(255, 255, 255, 0.3); border: 1px solid black; } @media (prefers-color-scheme: dark) { .video-item { background-color: rgba(0, 0, 0, 0.3); } } .video-item .video-image { position: relative; width: 200px; height: 113px; overflow: hidden; background-color: black; } .video-item .video-image img { position: absolute; inset: 0; width: 100%; height: 100%; } .video-item .shadow { object-fit: cover; filter: blur(0.25rem) brightness(50%); } .video-item .non-shadow { object-fit: contain; } .video-item .video-info { padding-block: 0.5em; } .video-item a { font-size: 1.4em; font-weight: bold; }