* {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: 16px; line-height: 2.2; height: 100%; background: #101010;}
h1,h2,h3,strong,b {font-weight: bold;}
body {overflow-y: scroll; height: 100%; color: #101010; font-family: 'Geist', sans-serif;}
body::after {content: ""; position: fixed; left: 0; top: 0; background: #101010; height: 100vh; width: 0.75rem; z-index: 4;}
h1,h2,h3 {line-height: 1.1; margin-bottom: 0.5em; padding-top: 1.5em;}
h2 {font-weight: 500;}
a {color: #101010;}
code {font-family: 'dejavu_sans_monobook', monospace; font-size: 0.85rem; display: inline-block; background: #fafafa; border: 1px solid rgba(0,0,0,0.1); padding: 0rem 0.15rem 0 0.2rem; border-radius: 0.2rem; color: rgba(0,0,0,0.85);}
pre {padding: 1rem 1.25rem 1.15rem; margin-bottom: 1.5rem; background: #fafafa; border: 1px solid rgba(0,0,0,0.1); overflow: auto;}
pre code {font-family: 'dejavu_sans_monobook', monospace; font-size: 0.85rem; line-height: 1.6; display: block; background: none; padding: 0; border: 0;}
img {max-width: 100%; border: 1px solid rgba(0,0,0,0.2);}
/* a film in a post (the video shortcode) is framed like a picture; it sits
   outside a paragraph, so it takes over a paragraph's spacing. The lightbox
   one has its own rules. */
.videoplayer {position: relative; line-height: 0; margin-bottom: 1.5rem;}
.videoplayer video {display: block; width: 100%; height: auto; border: 1px solid rgba(0,0,0,0.2);}
.videoplayer.nocontrols video {cursor: pointer;}
.videoplayer:has(+ p.videocaption) {margin-bottom: 0;}
/* a link to a screencast opens it in the lightbox; one wrapped around a
   picture is the picture's own box, one in a sentence stays a piece of text */
a.lightbox-video {cursor: pointer;}
a.lightbox-video:has(> img) {display: block; line-height: 0;}
/* an italic line right after an image is its caption, in posts and docs alike */
p:has(> img:first-child) > em, p:has(> a:first-child > img) > em, p.videocaption > em {display: block; margin-top: 0.35rem; font-size: 0.9rem; line-height: 1.4; opacity: 0.6;}
.date:first-child {position: relative; margin-top: 0.75rem; top: 1.75rem; opacity: 0.5; font-size: 0.9rem; font-family: 'dejavu_sans_monobook', monospace;}
.h1 {
    line-height: 1.15;
    font-size: 1.5rem;
    display: flex;
    text-decoration: none;
    font-weight: 700;
    align-items: center;
    margin-right: 2rem;
}
.h1 .hugocmslogo {display: block; text-align: center; padding: 1rem 0.9rem 0.7rem 2.75rem;}
.h1 .hugocmslogo img {min-width: 2rem; width: 2rem; border: 0;}

.header {position: relative; top: 0; background: white; width: 100%; z-index: 4;}
.header > div {max-width: 80rem; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
.header > div > div {display: flex; align-items: center; gap: 2rem; margin-right: 1.25rem;}
.header > div ul {display: flex; gap: 1.5rem;}
.header > div ul li:nth-last-child(1) {display: none;}
.header > div ul li {list-style: none;}
.header > div ul li a {color: rgba(16, 16, 16, 0.5); text-decoration: none; font-size: 1rem; display: block;}
.header > div ul li.active > a { font-weight: normal; color: #101010;}
.header > div button {width: 2rem; height: 2rem; border: 0; background: 0; border-radius: 0; cursor: pointer; display: none; position: relative;}
.header > div button span {display: block; height: 2px; background: #101010; margin: 0.5rem 0;}
body.showmenu .header > div button span {position: absolute; transform: rotate(45deg); width: 100%; top: 0.5rem; transform-origin: center center;}
body.showmenu .header > div button span + span {transform: rotate(-45deg);}

.main {display: flex; justify-content: center; background: white;}
.main > .sidebar {margin-left: 0.75rem; min-width: 20rem; padding: 4.25rem 2rem 4.25rem; border-right: 1px solid rgba(0,0,0,0.1);}
.main > .sidebar > div > ul ul {margin-left: 1.4rem;}
.main > .sidebar li {line-height: 1.5; padding: 0; list-style: none;}
.main > .sidebar li a {color: rgba(16, 16, 16, 0.5); text-decoration: none; display: block; line-height: 2;}

ul.nestedmenu {margin-left: 0;}
ul.nestedmenu li {list-style: none;}
ul.nestedmenu li > ul {display: none;}
ul.nestedmenu li > a {color: rgba(16, 16, 16, 0.5);}
ul.nestedmenu li > a::before {content: ""; display: inline-block; margin-right: 1rem; width: 0.5rem; text-align: center;}
ul.nestedmenu li.haschildren > a::before {content: "›";}
ul.nestedmenu li.haschildren.active > a::before {transform: rotate(90deg);}
ul.nestedmenu li.active > ul {display: block;}
ul.nestedmenu li.active > a {color: #101010; font-weight: normal;}
ul.nestedmenu > li > ul {margin-bottom: 1rem;}

.main > .content {flex-grow: 1; padding: 2rem 2rem 6rem; max-width: 59.25rem;}
.innercontent {max-width: 60rem; display: flex; width: 100%; flex-direction: column; margin: 0 auto;}
.innercontent > .innerinnercontent {max-width: 40rem; margin: 0 auto; width: 100%; line-height: 1.5; font-size: 1.05rem;}
.main > .sidebar + .content > .innercontent > .innerinnercontent {max-width: 45rem;}
.main > .content h1 {font-size: 2.5rem; padding: 0.8em 0 0.5rem;}
.main > .content h2 {font-size: 1.6rem; }
.main > .content h3 {font-size: 1.1rem; line-height: 1.6; padding-top: 1.25rem;}
.main > .content p {margin-bottom: 1.5rem; font-size: 1.05rem;}
.main > .content ol {margin: 0 0 1.5rem 2rem;}
.main > .content ul {margin: 0 0 1.5rem 2rem;}
.main > .content li.active { font-weight: normal;}

form {max-width: 33rem;}
form > div {display: flex; flex-direction: column; margin-bottom: 1rem;}
form > div.radio + .radio {bottom: 1rem; position: relative; margin-bottom: 0;}
input:not([type="radio"],[type="checkbox"]), textarea, select {
    border: 1px solid rgba(0,0,0,0.2);
    background: #fafafa;
    display: block;
    resize: none;
    padding: 0.25rem 0.5rem;
    line-height: 1.5;
    font-size: 1rem;
    border-radius: 0;
    -webkit-appearance: none;
    font-family: 'dejavu_sans_monobook', monospace;
    font-size: 0.85rem;
}
input[type="submit"], .button {
    display: inline-block;
    width: auto;
    padding: 0rem 1.25rem;
    height: 2.25rem;
    line-height: 2.25rem;
    color: white;
    background: #101010;
    border: 0;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.9rem;
    font-family: 'Geist', sans-serif;
}
.button.demo {position: relative; left: 0.75rem; box-shadow: inset 0px 0px 0px 1px #101010; background: transparent; color: #101010;}
label > input {margin-right: 0.5rem;}
form > div > label {margin-bottom: 0.25rem; font-size: 1rem;}


.features, .graphics, .instantpublishing, .steps, .faq {text-align: center;}

body.home .main, body.home .stats, body.home .features, body.home .instantpublishing, body.home .steps, body.home .faq {flex-direction: column; align-items: center; display: flex; width: 100%;}
body.home .main > .content {text-align: center; padding-bottom: 4rem;}
/* who the home page is for, above the heading, and the one above get started, like the labels of the numbers;
   their size and spacing are the ones of annotate.now: 5rem below the header, 1rem above the heading, on a
   phone too */
body.home .main > .content .kicker, body.home .steps .kicker {margin: 0; opacity: 0.5; text-transform: uppercase; letter-spacing: 0.1rem; font-size: 0.8125rem; line-height: 1.5;}
body.home .main > .content .kicker {padding-top: 3rem;}
body.home .main > .content .kicker + h1 {padding-top: 1rem; margin-top: 0;}
body.home .main > .content h1 {font-size: 4rem; line-height: 1.1; margin: 0 0 1.5rem; font-weight: bold;}
body.home .main > .content h1 em {color: #2E3192; font-family: inherit; font-style: normal; font-weight: inherit;}
body.home .main > .stats {border: 1px solid rgba(0,0,0,0.1); background: #fafafa; width: 100%; margin-bottom: 3rem;}
body.home .stats ul {display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); grid-gap: 1.5rem; justify-content: center; align-items: center; opacity: 1; margin: 2rem 0;} 
body.home .stats ul li {list-style: none; text-align: center; line-height: 1.5;}
body.home .stats ul li > div:nth-child(1) {font-size: 2.3rem; font-weight: 800;}
body.home .stats ul li > div:nth-child(2) {opacity: 0.5; text-transform: uppercase; letter-spacing: 0.1rem; font-size: 0.75rem;}
body.home h2 {font-size: 2.3rem; font-weight: 700;}
body.home .features ul {display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); grid-gap: 0 2rem; margin: 1rem auto 8.5rem; opacity: 0.5; width: 100%; font-size: 1.05rem;}
body.home .features li {list-style: none;}
body.home .features .innercontent {max-width: 800px;}
/* the close: get started with the three steps side by side, below each other on a phone, their number in front
   of the title, and the sign up button. The spacing is the one of the close of annotate.now, with little space
   below, as the top border of the footer, white once inverted, adds 5rem. */
body.home .steps .kicker {padding-top: 6.25rem;}
body.home .steps .kicker + h2 {padding-top: 1rem;}
body.home .steps .innercontent {margin-bottom: 2rem;}
body.home .steps ol {display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 3rem; margin: 1.5rem 0 3rem; list-style: none; counter-reset: step;}
body.home .steps li {counter-increment: step; line-height: 1.5;}
body.home .steps h3 {padding-top: 0; font-size: 1.25rem;}
body.home .steps h3::before {content: counter(step) ". ";}
body.home .steps li p {opacity: 0.6; font-size: 1.05rem;}
/* the questions below each other with a line between them: a click opens the answer, the plus turns into a minus.
   In a gray band that carries on the one of the film, without a line between them; the spacing is the one of
   annotate.now, measured from the bottom of the film. */
body.home .faq {background: #fafafa; border: 1px solid rgba(0,0,0,0.1);}
body.home .instantpublishing:has(+ .faq) {border-bottom: 0; padding-bottom: 0;}
body.home .instantpublishing + .faq {border-top: 0;}
body.home .faq .innercontent {max-width: 45rem; margin-bottom: 7rem;}
/* no margin below the heading: in this flex column it would add up with the 3rem above the first question,
   where on annotate.now the two collapse into one */
body.home .faq h2 {padding-top: 6.25rem; margin-bottom: 0;}
body.home .faq details {border-bottom: 1px solid rgba(0,0,0,0.1); text-align: left; line-height: 1.5;}
body.home .faq details:first-of-type {margin-top: 3rem; border-top: 1px solid rgba(0,0,0,0.1);}
body.home .faq summary {display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 0.75rem 0; font-size: 1.05rem; list-style: none; cursor: pointer;}
body.home .faq summary::-webkit-details-marker {display: none;}
body.home .faq summary::after {content: "+"; flex: none; font-size: 1.5rem; line-height: 1;}
body.home .faq details[open] summary::after {content: "\2212";}
body.home .faq details[open] summary {padding-bottom: 0.25rem;}
/* while the answer slides closed (js/faq.js) */
body.home .faq details.closing summary::after {content: "+";}
body.home .faq details p {padding: 0 2.5rem 1.25rem 0; opacity: 0.6; font-size: 1.05rem; line-height: 1.6;}
body.home .instantpublishing {border: 1px solid rgba(0,0,0,0.1); background: #fafafa; position: relative; z-index: 2; padding-block: 0 3rem;}
body.home .instantpublishing img {width: 100%; max-width: 800px; display: block; }
body.home .instantpublishing .innercontent {padding-block: 0;}
body.home .instantpublishing .innercontent > a,
body.home .instantpublishing .innercontent > .gifplayer {display: block; margin: 0 auto -5rem; position: relative; bottom: 5rem; overflow: hidden; max-width: 800px;}

.footer {filter: invert(100%); background: #eee; border-top: 5rem solid black; padding: 1.75rem 0 0; font-size: 0.95rem;}
.footer .innercontent {max-width: 80rem; margin: 0 auto; display: flex; gap: 0 4rem; flex-direction: row; flex-wrap: wrap; padding: 1rem 0 2rem;}
.footer .innercontent > div:not(:first-child) {padding-left: 1.75rem;}
.footer .innercontent > div {max-width: 22rem;}
.footer .innercontent > div:first-child p {margin-top: 0.7rem; line-height: 1.5; padding-left: 2.75rem; opacity: 0.5; font-size: 0.9rem;}
.footer .innercontent + .innercontent > div:first-child p {font-size: 0.85rem;}
.footer h3 {margin: 0 0 1.5rem; font-weight: 600;}
.footer ul li {list-style: none; opacity: 0.5;}
.footer ul li a {text-decoration: none;}
.footer > img {filter: invert(100%); right: 7vw; position: absolute; border: 0; aspect-ratio: 1;}
.footer > img:nth-child(1) {margin: -8rem 0 0; width: 11rem;}
.footer > img:nth-child(2) {margin: -15rem 5.25rem 0; width: 6rem;}
.footer > img:nth-child(3) {margin: -19rem 2.75rem 0; width: 3rem;}
.footer > img:nth-child(4) {margin: -20rem 11.75rem 0; width: 2.25rem;}
.footer .innercontent + .innercontent {margin-top: 1rem; padding: 1rem 0 1.5rem;}
.footer .innercontent + .innercontent::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    border-top: 1px solid rgba(0,0,0,0.05);
    margin-top: -0.7rem;
}



.windows {text-align: center; padding: 3rem 0 4rem; white-space: nowrap; width: 0; display: inline-block; line-height: 2; user-select: none; font-family: 'dejavu_sans_monobook', monospace; font-size: 0.85rem;}
.window {width: 20rem; height: 12.5rem; box-shadow: 0px 0px 1rem rgba(0,0,0,0.15); border-radius: 0.5rem; overflow: hidden; display: inline-block; background: white; pointer-events: none; text-align: left; margin-left: -16.85rem;}
.window_chrome {display: flex;}
.window_chrome .macbtn {width: .7rem; height: .7rem; border-radius: 100%; background: #ff5f56;}
.window_chrome .macbtn + .macbtn {background: #ffbd2e;}
.window_chrome .macbtn + .macbtn + .macbtn {background: #27c93f;}
.window_chrome > div {border-bottom: 1px solid rgba(0,0,0,0.1);}
.window_chrome > div:nth-child(1) {width: 4.75rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem;}
.window_chrome > div:nth-child(2) {border-left: 1px solid rgba(0,0,0,0.1); padding: 0 1rem; border-bottom-color: transparent}
.window_chrome > div:nth-child(3) {flex-grow: 1; border-left: 1px solid rgba(0,0,0,0.1);}
.window_content {height: calc(100% - 2rem);}
.window_content > .editor {display: flex; line-height: 1.6; height: 100%;}
.window_content > .editor > div {align-items: stretch; padding: 0.5rem 0.5rem;}
.window_content > .editor > div:nth-child(1) {text-align: right;} 
.window_content > .cms {padding: 0.75rem 2rem; display: flex; flex-direction: column;}

.window.dark {background: #1e1e1e; color: #ccc; box-shadow: none;}
.window.dark .window_chrome > div:nth-child(1),
.window.dark .window_chrome > div:nth-child(3) {background: #2d2d2d;}
.window input, .window textarea {font-size: 0.85rem; margin-bottom: 0.25rem;}
.window textarea {height: 8em;}
.window .buttons {margin-top: 0.75rem;}
.window input[type="submit"] {
    height: 2.25rem;
    line-height: 2.25rem;
    padding-inline: 1.25rem;
}

.window + .window {position: relative; margin-left: -7rem; margin-bottom: -3rem; z-index: 2;}

.hidden {display: none;}

@media screen and (max-width: 40rem) {
    .windows {padding-bottom: 8rem;}
    .window {margin-left: -11.5rem;}
    .window + .window {margin-left: -18rem; margin-bottom: -8rem;}
}
@media screen and (max-width: 25rem) {
    .windows {padding-bottom: 4rem;}
    .windows {transform: scale(0.85); transform-origin: center top;}
}
@media screen and (max-width: 22rem) {
    .windows {transform: scale(0.75); transform-origin: center top;}
}




@media screen and (max-width: 100rem) {
    .footer > img {display: none;}
}

@media screen and (max-width: 60rem) {
    body::after {width: 0.25rem;}
    .h1 .hugocmslogo {padding-left: 1.75rem;}
    .main {flex-direction: column-reverse;}
    .main > .sidebar {padding: 0 1.5rem 4rem 1.75rem; border: 0; margin-left: 0rem;}
    .main > .content, body.home .main > * {padding-left: 1.75rem; padding-right: 1.5rem;}
    .main > .content > .innercontent > .innerinnercontent {margin: 0;}
    .footer .innercontent > div:first-child p {padding-left: 1.75rem;}
    .footer img + .innercontent > div:first-child p {padding-bottom: 2rem;}
    body.home .main > .content p br {display: none;}
}
body::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 3;
    opacity: 0;
    pointer-events: none;
}
@media screen and (max-width: 45rem) {
    body.showmenu::before {opacity: 1; transition: opacity 0.2s ease; pointer-events: all;}
    .header > div button {display: block;}
    .header > div .menuwrap {
        position: absolute;
        top: 4.3rem;
        background: #fff;
        left: 0;
        width: 100%;
        display: grid;
        grid-template-rows: 0fr;
        overflow: hidden;
    }
    body.showmenu .header > div .menuwrap {
        grid-template-rows: 1fr;
        transition: grid-template-rows 0.3s ease;
    }
    .header > div .menuwrap > ul {
        display: flex;
        flex-direction: column;
        gap: 0.25rem 1rem ;
        overflow: hidden;
        padding: 1rem 1rem 2.25rem 1.75rem;
    }
    .footer .innercontent {flex-direction: column;}
    body.home .main > .content h1 {font-size: 3.5rem; margin: 1.5rem 0;}
    body.home .main > .content h1 img {height: 1.75rem;}
    body.home .instantpublishing {display: none;}
    body.home .instantpublishing + .faq {border-top: 1px solid rgba(0,0,0,0.1);}
    body.home .features ul {margin-bottom: 4rem;}
    body.home .steps ol {grid-template-columns: 1fr;}
}

@media screen and (max-width: 35rem) {
    .header > div .button {display: none!important;}
    .header > div ul li:nth-last-child(1),
    .header > div ul li:nth-last-child(2) {display: block;}
    body.showmenu .header > div .button {display: block;}
    body.home .main > .content h1 {font-size: 2.75rem;}
    body.home .main > .content h1 img {height: 1.5rem;}
    
}


/* The screencast on the home page: the first frame, opened in the lightbox */
.gifplayer {
    position: relative;
    display: inline-block;
    cursor: pointer;
    line-height: 0;
    border-radius: 0.5rem;
    transition: border-radius 0.3s ease;
    box-shadow: 0px 0px 1rem rgba(0,0,0,0.15);
}
.gifplayer img {
    display: block;
    max-width: 100%;
    height: auto;
}
body.home .instantpublishing .gifplayer img {
    width: calc(100% + 3px);
    max-width: none;
    margin-left: -3px;
    margin-top: -1px;
    margin-bottom: -10px;
}
.gifplayer::after {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: grayscale(100%) brightness(0.95) contrast(1.1);
    -webkit-backdrop-filter: grayscale(100%) brightness(0.95) contrast(1.1);
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    pointer-events: none;
}
.gifplayer:hover::after {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.gifplayer-play, .videoplayer-play {
    position: absolute;
    bottom: 2rem;
    right: 2.25rem;
    z-index: 1;
    width: 72px;
    height: 72px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.2s ease, background 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.gifplayer-play svg {
    margin-left: 2px;
}
.gifplayer:hover .gifplayer-play {
    background: #fff;
    transform: scale(1.08);
}
/* the same button on a film in a post, a size smaller and inverted. It only
   shows once the film stopped. */
.videoplayer-play {
    top: 50%;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: #111;
    color: #fff;
    opacity: 0;
    pointer-events: none;
}
.videoplayer.stopped .videoplayer-play {
    opacity: 1;
    pointer-events: auto;
}
.videoplayer-play:hover {
    transform: translate(-50%, -50%) scale(1.08);
}