hoa.css

@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;
    }
}