@font-face{font-family:"HOA";src:url("../fonts/HOA-Regular.ttf")} @font-face{font-family:"Fira Sans";src:url("../fonts/FiraSans-Regular.ttf")} html { font-family: "Fira Sans", sans-serif; --hoa-bg-color: #F5F5F5; --hoa-fg-color: #6c1384; --hoa-text-color: #000000; } @media (prefers-color-scheme: dark) { html { --hoa-bg-color: #000000; --hoa-fg-color: #93ec7b; --hoa-text-color: #F5F5F5; } .tiles img, #left img, #right img { filter: invert(); } a { color: #ffff11; } a:visited { color: #aae574; } } .hoa { font-family: "HOA", sans-serif; } body { margin: 0; background-color: var(--hoa-bg-color); color: var(--hoa-text-color); font-size: 21px; } #main { max-width: 750px; margin: 0 auto; flex-grow: 1; background: inherit; padding: 0 6px; } #main > h1, #main > h1 + p { text-align: center; font-size: 32px; } #main > h1 { font-size: 74px; } .tiles { display: flex; flex-wrap: wrap; justify-content: space-around; } .tiles > a { width: 160px; height: 160px; background: aqua; margin: 10px; border: 1px solid var(--hoa-fg-color); } #right, #left { height: 100vh; position: sticky; top: 0; } #right { width: 299px; overflow: hidden; display: flex; flex-direction: column; flex-shrink: 1; min-width: 150px; border-left: 1px solid var(--hoa-fg-color); } #right > img { width: 90%; flex-grow: 1; align-self: center; } #left { width: 79px; display: flex; flex-shrink: 0; flex-direction: column; overflow-y: auto; border-right: 1px solid var(--hoa-fg-color); } #left > a { display: block; width: 60px; height: 60px; background: red; margin: 10px auto; flex-shrink: 0; border: 1px solid var(--hoa-fg-color); } #left > a.active { filter: invert(); } #left > a > img, .tiles > a > img { width: 100%; height: 100%; } .index-row { display: flex; flex-wrap: nowrap; } #sticky { position: sticky; top: 0; margin-top: 50px; background: inherit; padding: 20px 0; z-index: 4; } a.active { font-weight: bold; text-decoration: none; } #languages-menu { margin: 5px auto 0; } #footnote { text-align: center; } @media only screen and (max-width: 980px) { #right { display: none; } }