html { font-family: sans-serif; } main { margin: auto; padding: 2px 32px 32px; max-width: 800px; width: calc(100% - 82px); border-left: 4px solid #d3f; background-color: #f8eeff; } h1, h2, h3, h4 { margin-bottom: 0; } p { margin-top: 3px; } code, pre { font-size: 1rem; background-color: #eeccee; color: #003; } @media (prefers-color-scheme: dark) { body { color-scheme: dark; color: #fff; background-color: #111; } main { background-color: #222; } code, pre { background-color: #1c1c1c; color: #f90; } } video, img { max-width: 100%; } video { max-height: 500px; } .flags { display: flex; height: 30px; width: 100%; margin-bottom: 5px; border: 1px solid #fff; } .flags div { flex-grow: 1; } .flags #pan { background: linear-gradient( #f06 33.3%, #fd0 33.3% 66.6%, #0af 66.6%); } .flags #enby { background: linear-gradient( #fd0 25%, #fff 25% 50%, #a0f 50% 75%, #000 75%); } .flags #trans { background: linear-gradient( #5cf 20%, #fab 20% 40%, #fff 40% 60%, #fab 60% 80%, #5cf 80%); } .flags #pride { background: linear-gradient( #f00 16.6%, #f90 16.6% 33.3%, #ff0 33.3% 50%, #4d4 50% 66.6%, #06f 66.6% 83.3%, #a0f 83.3%); } .flags #lesbian { background: linear-gradient( #d20 14.3%, #e72 14.3% 28.6%, #f95 28.6% 42.9%, #fff 42.9% 57.1%, #d6a 57.1% 71.4%, #b59 71.4% 85.7%, #a06 85.7%); }