/* TODO: Manually set fallback hsl colors */
/* TODO: Set oklch colors */
:root {
    --codeberg: #44adff;
    --ko-fi: #ff5a16;
    --liberapay: #f6c915;
    --l-1: hsl(0 0% 100%);
    --l-1-50: hsl(0 0% 100% / 50%);
    --l-2: hsl(0 0% 93.45%);
    --l-3: hsl(0 0% 86.99%);
    --l-4: hsl(0 0% 80.61%);
    --m: hsl(0 0% 38.86%);
    --d-0: hsl(0 0% 0%);
    --d-1: hsl(0 0% 8.61%);
    --d-2: hsl(0 0% 17.93%);
    --d-2-50: hsl(0 0% 17.93% / 50%);
    --d-3: hsl(0 0% 28.06%);
    --orangeish: #ffdfbb;
    --s-big: 0 1rem 3rem rgba(0, 0, 0, 0.1);
    --s-little: .25rem .5rem 1rem rgba(0, 0, 0, 0.1);
    --call-to-action: #fb3e9f;
    --downloads-bottom-left: #bba8ff;
    --downloads-bottom-right: #ffd267;
    --multilingual-bottom-left: #370606;
    --multilingual-bottom-left: #2b280b;
    --multilingual-bottom-right: #2b280b;
    --multilingual-bottom-right: var(--d-1);
    --multilingual-button: hsl(211.8, 100%, 13.3%);
    --responsive-bottom-left: #553535;
    --responsive-bottom-right: rgb(106, 45, 9);
    --responsive-top-left: #936a46;
    --responsive-top-right: rgb(181, 74, 74);
    --streaming-bottom-left: #fff;
    --streaming-bottom-right: #fff;
    --themeable-bottom-left: #434b55;
    --themeable-bottom-left: var(--d-1);
    --themeable-bottom-right: #0b212b;
}
@supports (color: oklch(0% 0% 0)) {
    :root {
        --l-1: oklch(100% 0% 0);
        --l-1-50: oklch(100% 0% 0 / 50%);
        --l-2: oklch(95% 0% 0);
        --l-3: oklch(90% 0% 0);
        --l-4: oklch(85% 0% 0);
        --m: oklch(50% 0% 0);
        --d-0: oklch(0% 0% 0);
        --d-1: oklch(20% 0% 0);
        --d-2: oklch(30% 0% 0);
        --d-2-50: oklch(30% 0% 0 / 50%);
        --d-3: oklch(40% 0% 0);
    }
}
@font-face {
    font-display: swap;
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    src: url('barlow-v12-latin-regular.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    src: url('barlow-v12-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  src: url('barlow-v12-latin-700.woff2') format('woff2');
}
a {
    color: currentColor;
    text-underline-offset: .3rem;
}
a:hover { text-decoration: none; }
.all {
    text-decoration: underline;
    text-decoration-thickness: .3rem;
    text-underline-position: under;
}
.big_screenshot {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
    row-gap: 1rem;
}
.big_screenshot > img {
    border: 1px solid var(--l-4);
    border-radius: .5rem;
    box-shadow: var(--s-big);
    max-width: 100%;
}
.big_screenshot > a {
    align-items: center;
    color: var(--d-3);
    column-gap: .3rem;
    display: flex;
    font-size: .9rem;
    text-decoration: none;
}
.big_screenshot > a:hover { color: var(--d-1); }
body {
    background: var(--l-1);
    color: var(--d-2);
    font-family: 'Barlow', sans-serif;
    line-height: 1.6;
    margin: 0;
}
code {
    background: var(--l-2);
    border-radius: .3rem;
    font-weight: 600;
    margin-inline: .1rem;
    padding: .2rem .3rem;
    white-space: nowrap;
}
.constrain {
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    max-width: 65rem;
    padding-inline: 2rem;
}
.constrain.pad { row-gap: 2rem; }
.desc { max-width: 27rem; }
.desc span { font-size: 1.1rem; }
.external {
    background: var(--orangeish);
    border-radius: 1rem;
    color: var(--d-1);
    display: inline-block;
    margin-top: 1rem;
    padding: .2rem 1rem .3rem;
    text-decoration: none;
}
.external:focus-visible,
.external:hover {
    background-color: var(--l-1);
    color: var(--d-1);
}
.external + .external { margin-left: .5rem; }
footer {
    display: flex;
}
footer > div {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin: 5rem auto 2rem auto;
    max-width: 65rem;
    padding-inline: 2rem;
    row-gap: 1rem;
}
footer a:hover { color: var(--d-3); }
footer nav {
    column-gap: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
footer nav li { white-space: nowrap; }
footer nav ul li:first-child {
    color: var(--d-1);
    margin-bottom: .5rem;
}
footer nav ul li:not(:first-child) { margin-top: .2rem; }
footer nav a { text-decoration: none; }
footer .closing {
    align-items: center;
    column-gap: 1rem;
    display: flex;
    justify-content: space-between;
}
footer .closing span {
    color: var(--d-3);
    font-size: .9rem;
}
footer .icons {
    align-items: center;
    column-gap: .8rem;
    display: flex;
    font-size: 1.5rem;
}
h1,
h2 {
    margin: 0;
}
h1 {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.2;
}
h1.emphasized {
    font-size: min(calc(1rem + 4.8vw), 4.5rem);
    font-weight: 700;
    line-height: 1.1;
}
h2 {
    font-size: 2rem;
    font-weight: 600;
}
header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-inline: auto;
    max-width: 65rem;
    padding: .6rem 1rem .6rem .6rem;
}
header > a > svg {
    font-size: 1.8rem;
    position: relative;
    top: .05em;
}
header > * {
    align-items: center;
    column-gap: .3em;
    display: flex;
}
header a {
    border-radius: .5rem;
    outline: none;
    padding: .5rem .8rem;
    text-decoration: none;
    white-space: nowrap;
}
header > a:focus-visible,
header nav > a:focus-visible {
    background: var(--d-1);
    color: var(--l-1);
}
header .dropdown .hover_area {
    padding-top: 1.2rem;
    pointer-events: none;
    position: absolute;
    opacity: 0;
    transition: opacity .1s cubic-bezier(.79,.14,.15,.86);
}
header .dropdown > a { cursor: default; }
header .dropdown.emphasized > a {
    background: var(--call-to-action);
    color: var(--l-1);
}
header .dropdown > a::after {
    content: '⌄';
    position: relative;
    padding-left: .2rem;
    top: -.2rem;
}
header nav { position: relative; }
header .pane {
    align-content: flex-start;
    background: var(--l-1);
    border: 1px solid var(--l-4);
    border-radius: .5rem;
    box-shadow: 0 0 2rem var(--l-2);
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    padding: .8rem;
}
header .pane a {
    border-radius: .5rem;
    display: grid;
    justify-content: flex-start;
    padding: .4em .8em;
}
header .pane a:focus-visible,
header .pane a:hover {
    background: #f4eeea;
}
header .pane span {
    color: var(--d-3);
    font-size: .9rem;
    grid-column: 2;
}
header .pane strong {
    align-self: end;
    font-size: 1.1rem;
    grid-column: 2;
}
header .pane svg {
    color: var(--call-to-action);
    font-size: 1.4rem;
    grid-column: 1;
    grid-row: 1 / 3;
    margin: .6em .6em .6em 0;
}
header .dropdown:focus-within .hover_area,
header .dropdown:hover .hover_area {
    opacity: 1;
    pointer-events: auto;
}
.icon_links {
    align-items: flex-end;
    display: inline-flex;
    flex-direction: column;
    font-size: 1.05rem;
    margin-top: 2rem;
    row-gap: .8rem;
}
.icon_links a {
    align-items: center;
    background: var(--l-2);
    border-radius: .5rem;
    column-gap: .4rem;
    display: flex;
    padding-block: .1em;
    padding-inline: .6em;
    text-decoration: none;
}
.icon_links a[href*="codeberg"] { background: var(--codeberg); }
.icon_links a[href*="ko-fi"] { background: var(--ko-fi); }
.icon_links a[href*="liberapay"] { background: var(--liberapay); }
.icon_links svg {
    position: relative;
    top: .05rem;
}
.image {
    align-items: center;
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
}
.image a {
    align-items: center;
    background: var(--l-1-50);
    border-radius: .3rem;
    color: var(--d-3);
    column-gap: .3rem;
    display: flex;
    font-size: .9rem;
    padding: 0 .3rem;
    text-decoration: none;
}
.image a:hover { color: var(--d-1); }
.image a svg {
    font-size: .8rem;
    position: relative;
    top: .1em;
}
.introduction {
    text-align: center;
    margin-bottom: min(calc(1rem + 8vw), 8rem);
    margin-top: min(calc(1rem + 4vw), 4rem);
}
.introduction h1 svg {
    font-size: 1.2em;
    left: .1em;
    position: relative;
    top: .15em;
    z-index: -1;
}
.introduction p {
    font-size: 1.2rem;
    margin-inline: auto;
    max-width: 40rem;
}
.latest_release {
    display: flex;
    column-gap: 1rem;
    flex-wrap: wrap;
    font-size: 1.2rem;
    justify-content: center;
}
.logo {
    color: var(--d-1);
    max-width: 22rem;
}
.logo > svg {
    height: auto;
    width: 100%;
}
.quote {
    background: linear-gradient(45deg, oklch(0.57 0.23 6.17), oklch(0.35 0.23 265.76));
    border-radius: 1rem;
    color: var(--l-1);
    font-size: 1.4rem;
    font-weight: 600;
    padding: 3rem;
    text-align: center;
}
.quote li {
    display: inline;
    font-style: italic;
    padding-right: .5rem;
    white-space: nowrap;
}
.quote ul { margin: .5rem 0 0 0; }
section { padding-block: 5rem; }
section h2 { margin-bottom: .2rem; }
section li:not(:first-child) { margin-top: 1rem; }
section .split {
    margin-inline: auto;
    max-width: 65rem;
    padding: 2rem;
}
section.full { position: relative; }
section.full .gradient {
    background: linear-gradient(to right, #353535, transparent);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}
section:not(.full) .image img {
    max-height: 35rem;
    max-width: 35rem;
}
section:not(.full) .image img {
    border-radius: .5rem;
    box-shadow: var(--s-little);
    max-width: 100%;
}
section.full .image img {
    bottom: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}
section.responsive {
    background:
        radial-gradient(100% 100% at top left, var(--responsive-top-left), transparent),
        radial-gradient(100% 100% at top right, var(--responsive-top-right), transparent),
        radial-gradient(100% 100% at bottom left, var(--responsive-bottom-left), transparent),
        radial-gradient(100% 100% at bottom right, var(--responsive-bottom-right), transparent),
        linear-gradient(var(--d-0), var(--d-0));
    color: var(--l-2);
}
section.themeable {
    background:
        radial-gradient(100% 100% at bottom right, var(--themeable-bottom-right), transparent),
        radial-gradient(100% 100% at bottom left, var(--themeable-bottom-left), transparent),
        radial-gradient(100% 100% at top left, var(--responsive-bottom-left), transparent),
        radial-gradient(100% 100% at top right, var(--responsive-bottom-right), transparent),
        linear-gradient(var(--d-0), var(--d-0));
    color: var(--l-2);
}
section.multilingual {
    background:
        radial-gradient(100% 100% at top right, var(--themeable-bottom-right), transparent),
        radial-gradient(100% 100% at top left, var(--themeable-bottom-left), transparent),
        radial-gradient(100% 100% at bottom right, var(--multilingual-bottom-right), transparent),
        radial-gradient(100% 100% at bottom left, var(--multilingual-bottom-left), transparent),
        linear-gradient(var(--d-0), var(--d-0));
    color: var(--l-2);
}
section.downloads { background: linear-gradient(#fff6e5, #ffecc8); }
section.downloads { background: linear-gradient(var(--streaming), var(--l-1) 50%); }
section.downloads {
    background:
        radial-gradient(100% 100% at top left, var(--streaming-bottom-left), transparent),
        radial-gradient(100% 100% at top right, var(--streaming-bottom-right), transparent),
        radial-gradient(100% 100% at bottom left, var(--downloads-bottom-left), transparent),
        radial-gradient(100% 100% at bottom right, var(--downloads-bottom-right), transparent);
}
section.streaming { background: linear-gradient(#e5faff, #c8d8ff); }
section.streaming { background: linear-gradient(var(--l-1), var(--streaming) 50%); }
section.streaming {
    background:
        radial-gradient(100% 100% at bottom left, var(--streaming-bottom-left), transparent),
        radial-gradient(100% 100% at bottom right, var(--streaming-bottom-right), transparent);
}
section.more .image a,
section.multilingual .image a,
section.responsive .image a,
section.themeable .image a {
    background: var(--d-2-50);
    color: var(--l-3);
}
section li strong {
    align-items: center;
    column-gap: .3rem;
    display: flex;
}
section li strong svg {
    position: relative;
    top: .05em;
}

section.more {
    background:
        radial-gradient(100% 100% at top right, var(--multilingual-bottom-right), transparent),
        radial-gradient(100% 100% at top left, var(--multilingual-bottom-left), transparent),
        radial-gradient(100% 100% at bottom left, var(--d-0), transparent),
        radial-gradient(100% 100% at bottom right, var(--d-1), transparent),
        linear-gradient(var(--d-0), var(--d-0));
    color: var(--l-2);
}
section ul { margin-top: 2rem; }

/* TODO: Put this e.g. on "Free & Non-Profit" image and adapt it for others */
.extra_shadow {
    border-top: 1px solid var(--l-1);
      border-left: 1px solid var(--l-1);
      border-bottom: 2px solid var(--l-3);
      border-right: 2px solid var(--l-3);
}

.sites {
    display: flex;
    flex-wrap: wrap;
    column-gap: .5rem;
    row-gap: .5rem;
}
.sites a {
    background: var(--l-2);
    border-radius: .3rem;
    padding: 0 .3rem;
    text-decoration: none;
}
.sites a:hover { background: var(--l-3); }
.split {
    align-items: center;
    column-gap: 2rem;
    display: flex;
    justify-content: space-between;
    row-gap: 1rem;
}
.split.reverse {
    flex-direction: row-reverse;
}
svg { fill: currentColor; }
.translate {
    align-items: center;
    background: #ffd27e;
    border-radius: .5rem;
    color: var(--multilingual-button);
    column-gap: .4rem;
    display: inline-flex;
    font-size: 1.05rem;
    margin-top: 2rem;
    padding-block: .1em .2em;
    padding-inline: .6em;
    text-decoration: none;
}
ul {
    list-style: none;
    padding-left: 0;
}
video { max-width: 100%; }
@media (max-width: 60rem) {
    .icon_links { align-items: flex-start; }
    .split,
    .split.reverse {
        flex-direction: column-reverse;
    }
}
@media (min-width: 40rem) {
    header { font-size: 1.2rem; }
    header > a > svg { font-size: 1.8rem; }
}
@media (min-width: 60rem) {
    section .reverse li strong { flex-direction: row-reverse; }
}
@media (min-width: 60.001rem) {
    header > a { font-size: 1.4rem; }
    .split.reverse > *:nth-child(1) { text-align: right; }
}
@media (max-width: 44.999rem) {
    .introduction p br { display: none; }
}
@media (max-width: 40rem) {
    h1 { font-size: 8vw; }
    header p { font-size: 1rem; }
    .quote {
        border-radius: .5rem;
        font-size: 1rem;
        padding: 2rem;
    }
}
@media (max-width: 29.999rem) {
    .desktop_only { display: none !important; }
    .introduction p { font-size: 1rem; }
}
@media (min-width: 30rem) {
    .mobile_only { display: none !important; }
}
@media (max-width: 33rem) {
    .image img { max-width: 100%; }
    .split,
    .split.reverse {
        align-items: flex-start;
    }
}
@media (max-width: 25rem) {
    .latest_release > :first-child {
        width: 100%;
    }
}
@media (max-width: 23rem) {
    .image img { max-height: unset; }
}
@media (max-width: 92rem) {
    header .dropdown .hover_area { right: 0; }
}