/* SPDX-FileCopyrightText: 2021 Ilmari Lauhakangas <ilmari.lauhakangas@libreoffice.org>
   SPDX-License-Identifier: CC0-1.0 */

:root {
    /* scale font-size down so it is equal to 10px in most browsers
       to make it easier to reason about rem values */
    font-size: 62.5%;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    --leading-normal: 1.5;
    --leading-none: 1;
    --light-gray: #f6f6f6;
    --lighter-gray: #f9f9f9;
    --lightest-gray: #fafafa;
    --gray: #e3e3e3;
    --dark-gray: #e6e6e6;
    --darker-gray: #9f9d9d;
    --darkest-gray: #525252;
    --main-brand: #18a303;
    --green-0: #106802;
    --green-2: #43c330;
    --scale-00: 0.8rem;
    --scale-0: 1rem;
    --scale-1: 1.2rem;
    --scale-2: 1.4rem;
    --scale-3: 1.6rem;
    --scale-4: 1.8rem;
    --scale-5: 2rem;
    --scale-6: 2.4rem;
    --scale-7: 2.8rem;
    --scale-8: 3.2rem;
    --scale-9: 3.6rem;
    --scale-10: 4rem;
    --scale-11: 4.4rem;
    --scale-12: 4.8rem;
    --scale-13: 5.2rem;
    --scale-14: 5.6rem;
    --scale-15: 6rem;
    --scale-16: 6.4rem;
    --scale-17: 6.8rem;
    --scale-18: 7.2rem;
    --scale-19: 7.6rem;
    --scale-20: 8rem;
    --scale-24: 9.6rem;
    --scale-25: 10rem;
    --scale-31: 12.4rem;
    --scale-37: 14.8rem;
    --scale-40: 16rem;
    --scale-48: 19.2rem;
    --scale-56: 22.4rem;
    --max-w-4xl: 896px;
    --max-w-5xl: 1024px;
    --max-w-6xl: 1152px;
    --max-w-xxs: 256px;
    --max-w-sm: 384px;
    --max-w-md: 448px;
    --max-w-lg: 512px;
    --max-w-xl: 576px;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-normal: 0;
}
@font-face {
    font-family: Lato;
    src: url(../fonts/Lato-Regular.woff2) format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Lato;
    src: url(../fonts/Lato-Black.woff2) format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Lato;
    src: url(../fonts/Lato-Bold.woff2) format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Lato;
    src: url(../fonts/Lato-BoldItalic.woff2) format("woff2");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
html, body {
    height: 100%;
}
body {
    font-family: Lato, -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom;
    font-size: 1.8rem;
    letter-spacing: .04rem;
    color: var(--darkest-gray);
    /* background by SVGBackgrounds.com */
    background-image: url("../media/subtle-prism.svg");
    background-size: cover;
    /* to keep footer always at the bottom */
    display: flex;
    flex-direction: column;
    line-height: var(--leading-normal); /* overwrites normalize.css:11 */
}
a {
    transition: all 320ms ease;
    cursor: pointer;
}
select {
    padding: var(--scale-00) var(--scale-0);
}
section:not(#donate, #infographic, #info, #download_libreoffice, #other_versions, #visit_the_wiki, #screenshots) {
    background-color: white;
}
.call-to-action {
    justify-content: space-between;
    max-width: var(--max-w-6xl);
    margin: 0 auto;
    padding: var(--scale-20) var(--scale-3);
}
.content {
    padding: var(--scale-7) 0;
}
.content img {
    max-width: 100%;
}
.content > img {
    display: block;
}
.content > img:has(+ img) {
    margin-block-end: var(--scale-0);
}
section p a, section h2 a, section h3 a, section li a, address a {
    color: #1c99e0;
}
section li a {
    word-break: break-word; /* Chrome doesn't wrap links by default */
}
.grid-wrapper {
    display: grid;
    grid-template-columns: [fullWidth-start] 20px
                           [col-start] repeat(12, minmax(auto, 85px))
                           [col-end] 20px [fullWidth-end];
}
.grid-wrapper > * {
    grid-column: col;
}
.full-width {
    display: grid;
    justify-content: center;
    grid-column: fullWidth;
}
.button {
    display: inline-block;
    background-color: var(--main-brand);
    padding: var(--scale-1) var(--scale-3);
    margin-inline-end: 0;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 900;
    box-shadow: 0 0 6px rgba(34, 74, 22, 0.25);
    text-align: center;
}
.button a {
    text-decoration: none;
    color: #fff;
}
.card {
    background: #fff;
    padding: var(--scale-5);
    box-shadow: 0px 0px 12px rgba(82, 82, 82, 0.2);
    border-radius: 10px;
}
.card p {
    margin: 0;
}
nav li, footer li {
    list-style: none;
}
nav ul, footer ul {
    padding: 0;
}
.js .lang-fallback-container {
    display: none;
}
.no-js label[for$=-input], .no-js input[list*=languages-] {
    display: none;
}
.lang-fallback-container input[type=checkbox] {
    /* from .visuallyhidden class of html5-boilerplate */
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}
label.lang-fallback {
    display: none;
}
nav.lang-fallback {
    z-index: 100;
    /* line them up horizontally */
    display: flex;
    flex-direction: row;
    /* allow for scrolling */
    overflow-x: auto;
    overflow-y: hidden;
    /* make it smooth on iOS */
    -webkit-overflow-scrolling: touch;
}
nav.lang-fallback a {
    color: var(--darkest-gray);
    border-inline: 2px solid var(--darkest-gray);
    display: block;
    line-height: 1.5;
    padding: 3px 6px;
    text-decoration: none;
    font-size: 24px;
    flex-shrink: 0;
    z-index: 100;
    white-space: nowrap;
}
nav.lang-fallback a:not(:first-child) {
     margin-inline-start: -2px;
}
#header-lang {
    background-color: var(--gray);
}
#header-lang .fullWidth-center {
    display: flex;
    flex-wrap: wrap;
    /* have to use flex-end instead of plain end,
    or Chrome doesn't get it */
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}
#nav-wrapper {
    background-color: white;
}
#nav-wrapper:not(:has(~ #dl-join)) {
    border-block-end: 1px solid var(--gray);
}
.nav-main {
    display: grid;
    align-items: center;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
}
.nav-main h2 {
    display: flex;
    justify-content: center;
}
.nav-main ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    margin: var(--scale-4) 0;
}
.nav-main .search-button,
.nav-main ul a,
.ft-donate-lang-social > p:first-child a {
    margin: var(--scale-00) var(--scale-3);
    padding-block-end: var(--scale-00);
    padding-block-start: var(--scale-00);
    white-space: nowrap;
    position: relative;
    /* don't grow larger than content */
    display: inline-block;
    color: var(--darkest-gray);
    font-size: var(--scale-4);
    text-decoration: none;
    /* in modern browsers, outline radius follows border-radius */
    border-radius: 5px;
}
.nav-main .search-button {
    background: no-repeat url(../media/searchicon.png);
    width: 30px;
    height: 30px;
    padding: 0;
}
.nav-main ul a:after {
    transition: all 320ms ease;
    transform: translateY(-10px);
    height: 1px;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    opacity: 0;
    display: block;
    margin: 0;
    content: "";
    background-color: var(--main-brand);
}
.nav-main ul a:not(.donate-button):hover {
    transition: all 320ms ease;
    color: var(--main-brand);
}
.nav-main ul a:hover:after {
    opacity: 1;
}
.nav-main .search-button:focus,
.nav-main ul a:not(.donate-button):focus {
    color: var(--main-brand);
    outline: 2px solid var(--main-brand);
}
.nav-main .search-button:active,
.nav-main ul a:active {
    outline: none;
}
.nav-main .donate-button,
.ft-donate-lang-social > p:first-child a, .opportunities ul a {
    color: #fff;
    background-color: var(--main-brand);
    padding: var(--scale-1) var(--scale-3);
    margin-inline-end: 0;
    text-transform: uppercase;
}
.logo {
    display: block;
    width: 160px;
    height: auto;
}
.fastSearch {
    grid-row: 3;
    background-color: var(--lighter-gray);
    border-block-start: 1px solid var(--main-brand);
    border-block-end: 1px solid var(--gray);
}
.fastSearch .fullWidth-center {
    position: relative;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}
.fastSearch input {
    width: 100%;
    height:var(--scale-12);
    font-size: var(--scale-5);
    color: var(--darkest-gray);
    font-weight: bold;
    border-radius: 3px 3px 0 0;
    border: none;
    outline: 0;
    text-align: start;
    text-indent: var(--scale-5);
    background-color: var(--lighter-gray);
    grid-column: 2;
}
.magnifying {
    grid-column: 1;
    background: no-repeat url(../media/searchicon.png);
    width: 30px;
    height: 30px;
}
.close {
    font-size: var(--scale-5);
    grid-column: 3;
}
#searchResults li {
    list-style: none;
    margin-inline-start: 0;
    background-color: var(--lighter-gray);
    border-block-end: 1px solid var(--darkest-gray);
}
#searchResults li .title {
    font-size: 1.1em;
    margin-block-end: var(--scale-0);
    display: inline-block;
}
#searchResults {
    display: inline-block;
    position: absolute;
    width: 320px;
    padding: 0;
    margin: 0;
    top:var(--scale-12);
    z-index: 100;
}
#searchResults a {
    text-decoration: none;
    padding: var(--scale-0);
    display: block;
    color: var(--darkest-gray);
}
#searchResults a:hover {
    outline: 0;
    background-color: var(--darkest-gray);
    color: #fff;
}
.os_win64,
.os_linux64,
.windows .os_win,
.windows.x64 .os_win,
.windows.aarch64 .os_win,
.os_win,
.os_winaarch64,
.os_macos,
.os_none,
.android .download-now,
.ios .download-now {
    display: none;
}
.windows.x64 .os_win64,
.windows.aarch64 .os_winaarch64,
.linux.x64 .os_linux64,
.windows .os_win,
.no-js .os_none,
.macos .os_none,
.macos .os_macos {
    display: inline-block;
}
#dl-join {
    padding: var(--scale-5);
}
#dl-join-buttons {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: auto;
    align-items: center;
    text-align: center;
    border-radius: var(--scale-1);
    max-width: 290px;
    justify-self: center;
}
#dl-join-buttons h1 {
    font-size: var(--scale-5);
    font-weight: 900;
    position: relative;
    grid-row: 1;
    grid-column: 1 / span fr;
}
#dl-join-buttons > p, #dl-join-buttons > div {
    grid-row: auto;
    grid-column: 1 / span 2;
    margin: var(--scale-5);
}
#dl-join-buttons a {
    text-decoration: none;
    color: #fff;
    background-color: var(--main-brand);
    padding: var(--scale-00) var(--scale-3);
    font-size: var(--scale-4);
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 5px;
}
#dl-join-buttons > p a {
    display: inline-block;
}
#hero {
    padding: 0;
}
.hero-container {
    display: grid;
    grid-column: fullWidth;
}
.hero-orbit-bg {
    background: #fff;
    max-height: 260px;
    overflow: clip;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,1) 90%, rgba(0,0,0,0));
    grid-row: 1;
    grid-column: 1;
}
.hero-orbit {
    all: unset;
    aspect-ratio: 1 / 1;
    container-type: inline-size;
    display: grid;
    width: 100%;
    position: relative;
    padding-block-start: var(--scale-12);
}
.hero-orbit li {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--main-brand);
    border-radius: 50%;
    display: grid;
    grid-area: 1 / 1;
    place-self: center;
    position: absolute;
    &::after {
        aspect-ratio: 1 / 1;
        content: '';
        display: block;
        offset-path: content-box;
        offset-anchor: top 30% left 25%;
        width: 60px;
    }
}
li.hero-math {
    display: none;
}
li.hero-base {
    width: 96cqi;
    top: 2cqi;
    &::after {
        background: no-repeat url("../media/libo-base.svg");
        filter: drop-shadow(2px 3px 3px rgba(115,36,169,0.2));
        offset-rotate: -20deg;
        offset-distance: 22%;
    }
}
li.hero-draw {
    display: none;
}
li.hero-impress {
    width: 108cqi;
    top: -4cqi;
    &::after {
        background: no-repeat url("../media/libo-impress.svg");
        filter: drop-shadow(2px 3px 3px rgba(208,18,13,0.2));
        offset-rotate: 22deg;
        offset-distance: -16%;
    }
}
li.hero-calc {
    display: none;
}
li.hero-writer {
    width: 120cqi;
    top: -10cqi;
    &::after {
        background: no-repeat url("../media/libo-writer.svg");
        filter: drop-shadow(2px 3px 3px rgba(8,63,166,0.2));
        offset-rotate: 21deg;
        offset-distance: 4%;
    }
}
.hero-screenshot-bg {
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 60%, rgba(255,255,255,1));
    max-width: 80cqi;
    grid-row: 1;
    grid-column: 1;
    justify-self: center;
    align-self: end;
}
.hero-screenshot {
    border-radius: 30px;
    border: 1px solid var(--main-brand);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,1) 60%, rgba(0,0,0,0));
    max-width: 100%;
}
.section-title {
    font-weight: 900;
    justify-self: center;
    /* because of box-shadow underline trick */
    overflow: hidden;
    font-size: var(--scale-8);
}
/* Box-shadow underline trick is the only way to limit
   the underline to the text width without underlining
   multiple lines when text wraps. Unfortunately reliable
   y-axis offset does not seem possible. */
.section-title:after {
    content: '';
    display: inline-block;
    vertical-align: bottom;
    height: 3px;
    box-shadow: -100vw 100vw 0 100vw var(--main-brand);
}
.why_choose {
    display: block;
}
.why_choose aside {
    max-width: 360px;
}
.why_choose strong {
    font-style: italic;
}
.why_choose .no-cost-arg,
.why_choose .language-arg {
    margin-block-end: var(--scale-20);
}
.sshotlist {
    display: grid;
    grid-template-columns: 1fr;
    grid-column: fullWidth;
    gap: 60px;
    justify-items: center;
}
.sshot {
    position: relative;
    display: flex;
}
.sshot .shotbg {
    content: '';
    position: absolute;
    z-index: 0;
    width: 267px;
    height: 246px;
    bottom: -25px;
}
.sshot.impress_shot .shotbg {
    left: -26px;
    background: #bb764e;
}
.sshot.calc_shot .shotbg {
    left: 26px;
    background: #5cbb4e;
}
.sshot.writer_shot .shotbg {
    left: -26px;
    background: #4e93bb;
}
.sshot.draw_shot .shotbg {
    left: 26px;
    background: #d6b74c;
}
.sshot {
    width: 264px;
}
.sshot img[src$='.png'] {
    width: 100%;
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.74);
    z-index: 1;
}
.sshot img[src$='.svg'] {
    width: 30px;
    bottom: 78px;
    position: absolute;
    z-index: 2;
}
.sshot.impress_shot img[src$='.svg'] {
    left: -41px;
}
.sshot.calc_shot img[src$='.svg'] {
    left: 278px;
}
.sshot.writer_shot img[src$='.svg'] {
    left: -41px;
}
.sshot.draw_shot img[src$='.svg'] {
    left: 278px;
}
.sshot h3 {
    font-size: var(--scale-13);
    margin: 0 0 var(--scale-00) 0;
}
.sshot p {
    font-size: var(--scale-5);
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
}
.carousel-item {
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.carousel-item p {
    font-size: var(--scale-4);
    letter-spacing: var(--tracking-wider);
    line-height: var(--leading-loose);
    margin: var(--scale-3) 0 var(--scale-8) 0;
}
.carousel-active:checked + .carousel-item {
    opacity: 1;
    pointer-events: auto;
    position: static;
}
#community-carousel-1.carousel-active:checked ~ .carousel-indicators label[for=community-carousel-1],
#community-carousel-2.carousel-active:checked ~ .carousel-indicators label[for=community-carousel-2],
#community-carousel-3.carousel-active:checked ~ .carousel-indicators label[for=community-carousel-3] {
    background-color: var(--darkest-gray);
}
.carousel-item img {
    height: auto;
    max-width: 100%
}
.carousel-active:checked + .carousel-item .carousel-caption {
    transition: opacity .6s ease-in;
    opacity: 1;
}
.carousel-indicators {
    list-style: none;
    margin: 0 0 var(--scale-1) 0;
    padding: 0;
    grid-row: 2;
    text-align: center;
}
.carousel-indicators li {
    display: inline-block;
}
.carousel-indicator {
    cursor: pointer;
    display: block;
    padding: 0.5rem var(--scale-0);
}
.carousel-indicator:hover .carousel-symbol {
    filter: drop-shadow(0 0var(--scale-00) #ffecc7);
}

.opportunities {
    grid-row: 2;
    grid-column: 1 / -1;
}
.opportunities ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}
.opportunities li {
    /* without this, the ul height is too small (but why??) */
    display: flex;
    margin: 0 var(--scale-1) var(--scale-1) 0;
}
.opportunities ul a {
    text-decoration: none;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: 0 0 6px rgba(34, 74, 22, 0.25);
}
#map_container {
    min-height: 432px;
    grid-row: 3;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
}
#community_map {
    flex: 1;
}
.what_people_are_saying {
    display: grid;
    grid-template-rows: auto auto;
    padding: 0 var(--scale-3);
}
.what_people_are_saying ul {
    grid-row: 2;
}
.meet_our_community, .content:last-of-type {
    /* to keep footer always at the bottom */
    flex: 1 0 auto;
}
.meet_our_community .carousel-indicators {
    grid-row: 3;
}
.carousel-indicators label {
    background-color: var(--darker-gray);
    border-radius: 50%;
    width: 15px;
    height: 15px;
    padding: 0;
}
.meet_our_community .carousel-item {
    grid-row: 2;
    justify-content: normal;
    font-size: var(--scale-0);
    background-color: var(--lightest-gray);
    border: 1px solid var(--light-gray);
    border-radius: var(--scale-1);
    margin: 0 auto var(--scale-10) auto;
    max-width: 216px;
    flex-direction: column;
}
.meet_our_community img {
    max-width: 216px;
    border-radius: var(--scale-1) var(--scale-1) 0 0;
}
.meet_our_community .carousel-item > p {
    margin: 0 0 var(--scale-5) 0;
}
.meet_our_community .carousel-caption {
    margin: var(--scale-5);
}
.meet_our_community em {
    display: block;
}
.colophon {
    background-color: var(--light-gray);
    /* to keep footer always at the bottom */
    flex-shrink: 0;
}
.colophon a {
    color: var(--darkest-gray);
    text-decoration: none;
}

.colophon a:hover {
    text-decoration: underline;
}
.colophon .fullWidth-center > h2 {
    margin: var(--scale-7) 0;
   /* using flex here is the cleanest way to avoid link hit area from
      growing in a weird way and not having unbalanced margins */
   display: flex;
}
.ft-main-item li {
    margin-block-end:var(--scale-00);
}
.ft-main-item li:last-child {
    margin-block-end: var(--scale-5);
}
.colophon h3 {
    margin-block-end:var(--scale-00);
    text-transform: none;
}
.ft-main-item ul {
    margin: 0;
}
.ft-donate-lang-social > p:first-child a {
    margin: var(--scale-7) 0 var(--scale-10) 0;
    padding: var(--scale-1) 0;
    width: 260px;
    text-align: center;
    text-transform: uppercase;
}
#languages-site-footer {
    width: 260px;
    margin-block-end: var(--scale-10);
}
.sm-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--scale-5);
    margin-block-end: var(--scale-5);
}
.sm-icon img {
    width: 25px;
    filter: invert(25%) sepia(0) saturate(1284%) hue-rotate(182deg) brightness(98%) contrast(69%);
    vertical-align: middle;
    margin-inline-end: 2px;
}
.ft-strip ul {
    padding: 0;
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
    margin: 0;
}
.ft-strip {
    margin: var(--scale-5) 0;
}
.youtube-video-container {
    position: relative;
    overflow: hidden;
    max-width: 560px;
    border: 1px solid var(--gray);
    padding: var(--scale-5);
}
.youtube-video-container:has(iframe) {
    border: none;
    padding: 0;
}
.contribution-container {
    border-block-start: 1px solid var(--gray);
    padding-block-start: var(--scale-5);
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(2, auto);
    column-gap: 20px;
    margin: var(--scale-7) 0;
}
.contribution-container h2 {
    margin-block-start: 0;
}
.contribution-container > div {
    grid-column: 1;
}
.contribution-container p:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
}
.libo-vs-aoo {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}
.libo-vs-aoo td, .libo-vs-aoo th {
    padding: var(--scale-0);
}
.libo-vs-aoo td:nth-child(-n+2) {
    font-weight: bold;
}
.libo-vs-aoo td:nth-child(2) {
    color: var(--main-brand);
}
.libo-vs-aoo tbody tr:nth-child(odd) {
    background-color: var(--light-gray);
}
.libo-vs-aoo tbody td, .libo-vs-aoo thead th:nth-child(n+2) {
    border: 1px solid var(--darker-gray);
}
.libo-vs-aoo img {
    margin: 0 auto;
}
.hide {
    display: none;
}
@supports (grid-area: auto) {
    .carousel-item {
        position: static;
        top: auto;
        transition: opacity .6s ease-in-out;
        grid-row: 3;
        grid-column: 1;
    }
}
@supports (grid-template-columns: subgrid) {
    .full-width {
        grid-template-columns: subgrid;
        padding: 0;
    }
    .fullWidth-center {
        grid-column: col;
    }
    .call-to-action {
        padding: var(--scale-20) var(--scale-3);
    }
    .what_people_are_saying {
        padding: 0 var(--scale-3);
    }
}
@supports not (grid-template-columns: subgrid) {
    .fullWidth-center {
        grid-column: 2 / -2;
    }
    #header-lang,
    .colophon,
    .fastSearch {
        grid-template-columns: max(100vw);
    }
    #header-lang > div,
    .colophon > div,
    .fastSearch > div {
        margin: 0 var(--scale-12);
    }
    .meet_our_community .section-title, .join_our_community .section-title, .section-title {
        margin-inline-start: var(--scale-10);
        margin-inline-end: var(--scale-10);
    }
}
@media (max-width:767px) {
    /* marketing team has a combined image, so plonk to second
       row on small screens */
    .contribution-container:has(#marketing) p:last-child {
        grid-column: 1;
        grid-row: 2;
    }
}
@media (min-width:768px) {
    .grid-wrapper {
        column-gap: 20px;
    }
    .card {
        padding: var(--scale-10);
    }
    .logo {
        width: 230px;
    }
    #searchResults {
        left: var(--scale-8);
    }
    #dl-join {
        padding: var(--scale-4);
    }
    #dl-join-buttons {
        grid-template-rows: auto auto;
        /* buttons not symmetrically aligned,
        join takes up more space */
        grid-template-columns: auto 1fr;
        background-size: contain;
        max-width: 740px;
    }
    #dl-join-buttons h1 {
        font-size: var(--scale-6);
    }
    #dl-join-buttons > div {
        grid-column: 1;
        margin: 0 0 var(--scale-9) var(--scale-25);
    }
    #dl-join-buttons > p {
        grid-column: 2;
        margin: 0 0 var(--scale-9) 0;
    }
    .hero-orbit-bg {
        max-height: 530px;
    }
    .hero-orbit {
        padding-block-start: var(--scale-24);
    }
    li.hero-math {
        display: grid;
        width: 90cqi;
        top: 5cqi;
        &::after {
            background: no-repeat url("../media/libo-math.svg");
            filter: drop-shadow(2px 3px 3px rgba(193,0,24,0.2));
            offset-rotate: 9deg;
            offset-distance: -24%;
        }
    }
    li.hero-base {
        display: grid;
        width: 96cqi;
        top: 2cqi;
        &::after {
            offset-rotate: -23deg;
            offset-distance: 21%;
        }
    }
    li.hero-draw {
        display: grid;
        width: 102cqi;
        top: -1cqi;
        &::after {
            background: no-repeat url("../media/libo-draw.svg");
            filter: drop-shadow(2px 3px 3px rgba(203,109,48,0.2));
            offset-rotate: -19deg;
            offset-distance: -17%;
        }
    }
    li.hero-impress {
        display: grid;
        width: 108cqi;
        top: -4cqi;
        &::after {
            offset-rotate: 22deg;
            offset-distance: 15%;
        }
    }
    li.hero-calc {
        display: grid;
        width: 114cqi;
        top: -7cqi;
        &::after {
            background: no-repeat url("../media/libo-calc.svg");
            filter: drop-shadow(2px 3px 3px rgba(0,124,60,0.2));
            offset-rotate: -19deg;
            offset-distance: -4%;
        }
    }
    li.hero-writer {
        display: grid;
        width: 120cqi;
        top: -10cqi;
        &::after {
            offset-rotate: 21deg;
            offset-distance: 4%;
        }
    }
    .why_choose aside p {
        margin: var(--scale-10) var(--scale-5) var(--scale-5) var(--scale-5);
    }
    .sshotlist {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        row-gap: 80px;
    }
    .sshot.impress_shot, .sshot.writer_shot {
        justify-self: end;
    }
    .sshot.calc_shot, .sshot.draw_shot {
        justify-self: start;
    }
    .carousel-indicators {
        background: 0 0;
    }
    .carousel-item {
        flex-direction: row;
    }
    .carousel-caption {
        padding: 0 0 0 var(--scale-6);
    }
    .carousel-symbol {
        display: inline;
    }
    .opportunities ul {
        flex-direction: row;
    }
    .meet_our_community .carousel-item, .meet_our_community img {
        max-width: 432px;
    }
    .libo-vs-aoo {
        font-size: var(--scale-5);
    }
    .lang-fallback-container {
        cursor: pointer;
        display: block;
        background: transparent;
        border: none;
        text-transform: none;
        padding: 0;
        line-height: normal;
    }
    nav.lang-fallback {
        display: none;
    }
    /* change the menu direction to stacked */
    .lang-fallback-container input:checked:not(:disabled) ~ nav.lang-fallback {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        max-height: 480px;
        position: absolute;
    }
    nav.lang-fallback a {
        font-size: 19px;
        white-space: normal;
        background-color: var(--gray);
        border: var(--darkest-gray) 2px solid;
    }
    nav.lang-fallback a:not(:first-child) {
        margin-inline-start: 0;
        margin-block-start: -2px;
    }
    .no-js label.lang-fallback {
        display: inline;
    }
    label.lang-fallback:after {
        font-size: 30px;
        color: var(--darkest-gray);
        content:"⌄";
    }
    .credits_grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(auto, 100px));
        grid-template-rows: auto;
        gap: 10px;
    }
    .credits_grid p {
        word-break: break-word;
    }
}
@media (min-width:1024px) {
    .grid-wrapper {
        grid-template-columns: [fullWidth-start] 52px
                               [col-start] repeat(12, minmax(auto, 85px))
                               [col-end] 52px [fullWidth-end];
    }
    .call-to-action {
        max-width: none;
        margin: 0;
        padding: 0;
        display: grid;
    }
    #dl-join {
        padding: var(--scale-5);
    }
    #dl-join-buttons > div {
        margin: 0 0 var(--scale-9) var(--scale-31);
    }
    #dl-join-buttons > div p {
        margin: 0;
    }
    .hero-orbit-bg {
        max-height: 750px;
    }
    .hero-orbit {
        padding-block-start: var(--scale-37);
    }
    .section-title {
        grid-row: 1;
        justify-self: auto;
    }
    .why_choose aside {
        grid-row: 2;
        display: grid;
        grid-template-rows: auto 1fr;
        justify-items: center;
    }
    .why_choose .no-cost-arg,
    .why_choose .language-arg {
        margin-block-end: 0;
    }
    .sshotlist {
        margin: var(--scale-20) 0 var(--scale-10) 0;
    }
    .sshot .shotbg {
        width: 387px;
        height: 329px;
        bottom: -19px;
    }
    .sshot.impress_shot .shotbg {
        left: -26px;
    }
    .sshot.calc_shot .shotbg {
        left: 26px;
    }
    .sshot.writer_shot .shotbg {
        left: -26px;
    }
    .sshot.draw_shot .shotbg {
        left: 26px;
    }
    .sshot {
        width: 388px;
    }
    .sshot img[src$='.svg'] {
        width: 60px;
        bottom: 107px;
    }
    .sshot.impress_shot img[src$='.svg'] {
        left: -56px;
    }
    .sshot.calc_shot img[src$='.svg'] {
        left: 384px;
    }
    .sshot.writer_shot img[src$='.svg'] {
        left: -56px;
    }
    .sshot.draw_shot img[src$='.svg'] {
        left: 384px;
    }
    .join_our_community {
        grid-template-rows: auto auto;
    }
    .opportunities {
        grid-row: 2;
        grid-column: 2 / span 6;
    }
    #map_container {
        grid-row: 2;
        grid-column: 8 / span 6;
    }
    .meet_our_community {
        grid-template-rows: auto auto auto;
    }
    .meet_our_community .carousel-item {
        font-size: var(--scale-5);
        display: grid;
        grid-template-columns: auto auto;
        align-items: center;
        margin: 0 0 var(--scale-10) 0;
        max-width: none;
    }
    .meet_our_community img {
        max-width: 432px;
        /* proportional height of the smallest image */
        max-height: 367px;
        border-radius: var(--scale-1) 0 0 var(--scale-1);
    }
    .meet_our_community .carousel-item > p {
        margin: 0;
        /* gets rid of unwanted bottom margin */
        display: flex;
    }
    .meet_our_community .carousel-caption {
        margin: 0 var(--scale-24);
    }
    .colophon {
        display: grid;
    }
    .colophon .fullWidth-center {
        display: grid;
        grid-template-rows: auto auto auto;
        grid-template-columns: repeat(5, 1fr);
        column-gap: var(--scale-5);
    }
    .colophon .fullWidth-center > h2 {
        grid-row: 1;
        grid-column: 1 / span 2;
    }
    .ft-main-item {
        grid-row: 2;
    }
    .ft-donate-lang-social {
        grid-row: 1 / span 3;
        grid-column: 5;
    }
    .ft-strip {
        grid-row: 3;
        grid-column: 1 / span 4;
    }
    @supports not (grid-template-columns: subgrid) {
        #header-lang > div,
        .colophon > div,
        .fastSearch > div {
            margin: 0 var(--scale-25);
        }
        .call-to-action {
            justify-content: center;
            grid-template-columns: auto;
            column-gap: 50px;
            margin: 0 var(--scale-10);
        }
        .call-to-action h2 {
            grid-column: 1 / 2;
        }
        .why_choose h2 {
            grid-column: 1 / 3;
        }
        .join_our_community {
            grid-template-columns: 1fr 1fr;
            margin: 0 auto;
            max-width: var(--max-w-4xl);
        }
        .opportunities {
            grid-row: 2;
            grid-column: 1;
        }
        #map_container {
            grid-row: 2;
            grid-column: 2;
        }
    }
    @supports (grid-template-columns: subgrid) {
        .why_choose .no-cost-arg {
            grid-column: 2 / span 4;
        }
        .why_choose .language-arg {
            grid-column: 6 / span 4;
        }
        .why_choose .community-arg {
            grid-column: 10 / span 4;
        }
    }
}
@media (min-width:1280px) {
    /* Content living in the center has a maximum width of
       1240px, consisting of 11 grid-gaps of 20px and 12 columns
       of max 85px.
       The minimum left/right margin for center content is 100px, consisting of 2 grid-gaps of 20px and 2 named grid lines of minimum 80px. */
    .grid-wrapper {
        grid-template-columns: [fullWidth-start] minmax(80px, 1fr)
                               [col-start] repeat(12, minmax(auto, 85px))
                               [col-end] minmax(80px, 1fr) [fullWidth-end];
    }
    .nav-main ul a {
        margin-inline-start: var(--scale-6);
        margin-inline-end: var(--scale-6);
    }
    .content {
        padding: var(--scale-7) var(--scale-40);
    }
    #dl-join-buttons {
        max-width: 1000px;
    }
    #dl-join-buttons h1 {
        font-size: var(--scale-8);
    }
    #dl-join-buttons a {
        padding: var(--scale-3) var(--scale-8);
        font-size: var(--scale-5);
    }
    .hero-orbit-bg {
        max-height: 900px;
    }
    .hero-orbit {
        padding-block-start: var(--scale-40);
    }
    .hero-orbit li::after {
        offset-anchor: top 50% left 50%;
    }
    li.hero-math {
        &::after {
            background-size: cover;
            offset-rotate: 9deg;
            offset-distance: -23%;
        }
    }
    li.hero-base {
        &::after {
            background-size: cover;
            offset-rotate: -20deg;
            offset-distance: 20%;
        }
    }
    li.hero-draw {
        &::after {
            background-size: cover;
            offset-rotate: -19deg;
            offset-distance: -16%;
        }
    }
    li.hero-impress {
        &::after {
            background-size: cover;
            offset-rotate: 39deg;
            offset-distance: 15%;
        }
    }
    li.hero-calc {
        &::after {
            background-size: cover;
            offset-rotate: -19deg;
            offset-distance: -4%;
        }
    }
    li.hero-writer {
        &::after {
            background-size: cover;
            offset-rotate: 21deg;
            offset-distance: 4%;
        }
    }
    .section-title {
        font-size: var(--scale-12);
    }
    @supports not (grid-template-columns: subgrid) {
        #header-lang,
        .colophon,
        .fastSearch {
            grid-template-columns: max(1280px);
        }
        .call-to-action {
            max-width: var(--max-w-6xl);
        }
    }
}
@media (min-width:1390px) {
    .nav-main {
        display: grid;
        align-items: center;
        grid-template-columns: auto auto;
        grid-template-rows: auto;
    }
    .nav-main h2 {
        display: flex;
        justify-content: normal;
    }
    .hero-orbit {
        padding-block-start: var(--scale-48);
    }
    li.hero-math {
        &::after {
            offset-rotate: 9deg;
            offset-distance: -16%;
        }
    }
    li.hero-base {
        &::after {
            offset-rotate: -36deg;
            offset-distance: 14%;
        }
    }
    li.hero-draw {
        &::after {
            offset-rotate: -19deg;
            offset-distance: -12%;
        }
    }
    li.hero-impress {
        &::after {
            offset-rotate: 22deg;
            offset-distance: 11%;
        }
    }
    li.hero-calc {
        &::after {
            offset-rotate: -19deg;
            offset-distance: -4%;
        }
    }
    li.hero-writer {
        &::after {
            offset-rotate: 21deg;
            offset-distance: 4%;
        }
    }
}
@media (min-width:1800px) {
    /* Limit the growth of the orbital decoration element */
    .grid-wrapper {
        grid-template-columns: [fullWidth-start] minmax(80px, 1fr)
                               [bigCol-start] minmax(auto, 100px)
                               [col-start] repeat(12, minmax(auto, 85px))
                               [col-end] minmax(auto, 100px) [bigCol-end]
                               minmax(80px, 1fr) [fullWidth-end];
    }
    .hero-container {
        grid-column: bigCol;
    }
}