:root { --main-a: #9f1232; --main-b: #8c0f2b; --main-c: #730c24; --green-a: #2d5203; --green-b: #345c05; --green-c: #366500; --green-d: #478105; --bright-a-tr: hsla(39, 100%, 50%, 0.4); --bright-a: #ffa900; --bright-b: #ff9200; --bright-c: #ff7c00; --light-a: #ede566; --light-b: #e0d742; --light-c: #cec31a; --logo-size: 7em; --gutter-width: 20px; } #split-left h3 { image-rendering: crisp-edges; background: url(../logo.png) top left / var(--logo-size) no-repeat; padding-top: calc(var(--logo-size) + 1em); } .documentation.documentation { background: var(--green-c); color: var(--main-b); } #split-left, h1, h2, h3, h4, h5, h6 { color: var(--bright-c) !important; } .gutter.gutter.gutter-horizontal { background: var(--main-a); } .gutter.gutter.gutter-horizontal::after { height: 100vh; display: flex; align-items: center; text-align: center; color: var(--main-c); content: ".. .. .. .."; line-height: 0.35em; font-weight: bolder; font-size: 150%; } .bg-white.bg-white, #split-right { background: var(--light-a); } .minishadow.minishadow { box-shadow: initial; border-bottom: 0.5em solid var(--light-b); } .border-bottom.border-bottom { border-bottom: 0.1em solid var(--light-b); } .fill-light.fill-light { background: var(--bright-a-tr); } .input.input { background: var(--bright-a); border: 0.1em solid var(--bright-b); } ::placeholder { color: var(--green-d); }