:root {

    --page-width: 1024px;
    --page-background: #fff;
    --header-height: 40px;
    
    --text-emphasized: #000;
    --text-primary: #000;
    --text-secondary: #333;
    --text-tertiary: #888;
    --text-link: #26a;
    --text-caption: #404040;
    --text-numeric: #be3232;
    --background-numeric: rgba(255,181,181,0.05);
    
    --blue-foreground: #166c8a;
    --blue-background: #eafaff;
    --red-foreground: #c90000;
    --red-background: #ffe7de;
    --orange-foreground: #c86700;
    --orange-background: #fff4de;
    --yellow-foreground: #352E00;
    --yellow-background: #FFF9A4;
    --purple-foreground: #9700a1;
    --purple-background: #f2d9f4;

    --thin-size: 1px;
    --letter-spacing: normal;

    --lighten: 120%;
    --darken: 80%;
    
    --white: white;
    --gray-90: rgb(229,229,229);
    --gray-80: rgb(204,204,204);
    --gray-70: rgb(178,178,178);
    --gray-60: rgb(153,153,153);
    --gray-50: rgb(128,128,128);
    --gray-40: rgb(102,102,102);
    --gray-30: rgb(76,76,76);
    --gray-20: rgb(51,51,51);
    --gray-10: rgb(25,25,25);
    --black: black;
    
    --blockquote-background: rgb(245,245,245);
    --separator: rgb(128,128,128);
    --marker: #e6e6e6;
    --border: rgb(243,243,243);
    --hover: rgb(232,232,232);
    --active: rgb(212,212,212);

    --font-size: 12pt;
    --font-size-monospace: 11pt;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-semibold: 500;
    --font-weight-bold: 600;
    --font-weight-default: 400;
    
}

@media only screen and (prefers-color-scheme: dark) {
    
    :root {
        
        --page-background: #1e1e1e;
        
        --text-emphasized: #fff;
        --text-primary: #bbb;
        --text-secondary: #888;
        --text-tertiary: #686868;
        --text-link: #6cf;
        --text-caption: #fcd202;
        --text-numeric: #4de8ac;
        --background-numeric: rgba(78, 232, 172, 0.05);

        --blue-foreground: #7fddfa;
        --blue-background: #072846;
        --red-foreground: #ffe7de;
        --red-background: #c90000;
        --orange-foreground: #e38400;
        --orange-background: #301c00;
        --yellow-foreground: #dfd010;
        --yellow-background: rgba(223, 208, 16, 0.07);
        --purple-foreground: #c474cb;
        --purple-background: #360d39;
    
        --lighten: 80%;
        --darken: 105%;
    
        --white: black;
        --gray-10: rgb(229,229,229);
        --gray-20: rgb(204,204,204);
        --gray-30: rgb(178,178,178);
        --gray-40: rgb(153,153,153);
        --gray-50: rgb(128,128,128);
        --gray-60: rgb(102,102,102);
        --gray-70: rgb(76,76,76);
        --gray-80: rgb(51,51,51);
        --gray-90: rgb(25,25,25);
        --black: white;
        
        --blockquote-background: rgb(51,51,51);
        --separator: rgb(128,128,128);
        --marker: #4c4c4c;
        --border: rgb(48,48,48);
        --hover: rgb(58,58,58);
        --active: rgb(68,68,68);

    }
        
}

@media only screen and (min-resolution: 120dpi),
       only screen and (-webkit-min-device-pixel-ratio: 1.3) {
    
    :root {
        
        --thin-size: 0.5px;

    }
    
}

@media only screen and (min-resolution: 120dpi) and (min-width:599px),
       only screen and (-webkit-min-device-pixel-ratio: 1.3) and (min-width:599px) {
    
    :root {
        
        --font-weight-default: 350;
        --letter-spacing: 0.1px;

    }
    
}


@media only screen and (max-width:599px) {
    
    :root {
        --font-size: 13pt;
        --font-size-monospace: 12pt;
    }
    
}

* {
    box-sizing: border-box;
    vertical-align: baseline;
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: var(--font-size);
    font-weight: var(--font-weight-default);
    color: var(--text-primary);
    background-color: var(--page-background);
    line-height: 145%;
    letter-spacing: var(--letter-spacing);
    -webkit-text-size-adjust: none;
}

code {
    font-family: ui-monospace, monospace;
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-monospace);
    overflow-x: scroll;
}

a {
    font-weight: var(--font-weight-regular);
    text-decoration: none;
}

h1 {
    font-size: 220%;
}

h2 {
    font-size: 150%;
}

h3 {
    font-size: 120%;
}

h4 {
    font-size: 100%;
}

h1, h2, h3, h4, h5, h6 {
    line-height: initial;
}

h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6,
h2 + h3, h2 + h4, h2 + h5, h2 + h6,
h3 + h4, h3 + h5, h3 + h6,
h4 + h5, h4 + h6 {
    color: var(--purple-foreground);
}

:is(h1),
:is(h1) * {
    color: var(--text-emphasized);
    font-weight: var(--font-weight-semibold);
}

@media only screen and (max-width:599px) {
    h1,
    h1 * {
        font-size:180%;
        font-weight: var(--font-weight-bold);
    }
}

b,
strong,
:is(h2, h3, h4, h5, h6),
:is(h2, h3, h4, h5, h6) * {
    color: var(--text-emphasized);
    font-weight: var(--font-weight-bold);
}

em {
    font-weight: var(--font-weight-regular);
}

.numeric {
    color: var(--text-numeric);
    background-color: var(--background-numeric);
    font-weight: var(--font-weight-regular);
    padding: 0.1rem 3px 0.15rem 3px;
    border-radius: 2px;
}

.highlight {
    font-weight: var(--font-weight-regular);
    color: var(--yellow-foreground);
    background-color: var(--yellow-background);
    padding: 0.1rem 3px 0.15rem 3px;
    margin: 0 -3px 0 -3px;
    border-radius: 2px;
}

.unbreakable {
    white-space: nowrap;
}

.orange {
    color: var(--orange-foreground);
}

a:link, a:link :is(b, strong),
a:visited, a:visited :is(b, strong) {
    color: var(--text-link);
}

a:active {
    filter: brightness(var(--darken));
}

a.link::before {
    content: '→';
    margin-right: 4px;
}

h1 {
    margin: 40px 0 16px 0;
}

h2 {
    margin: 32px 0 12px 0;
}

body > h2:first-of-type,
article > h2:first-of-type,
section > h2:first-of-type {
    margin-top: 20px;
    margin-bottom: 12px;
}

@media only screen and (max-width:599px) {
 
    body > h1:first-of-type,
    article > h1:first-of-type,
    section > h1:first-of-type,
    body > h2:first-of-type,
    article > h2:first-of-type,
    section > h2:first-of-type {
        margin-top: 16px;
    }
 
}

h3 {
    margin: 40px 0 8px 0;
}

h3:nth-child(1), h3:nth-child(2) {
    margin: 16px 0 8px 0;
}

p, div.paragraph {
    margin-top: 8px;
    margin-bottom: 8px;
}

h4, h5, h6 {
    margin: 2px 0 4px 0;
}

h1 + h1,
h1 + h2,
h1 + h3, h2 + h3,
h1 + h4, h2 + h4,
h1 + h5, h2 + h5,
h1 + h6, h2 + h6 {
    margin-top: -8px;
}

h3 + h3, h4 + h3, h5 + h3, h6 + h3,
h3 + h4, h4 + h4, h5 + h5, h6 + h6,
h3 + h5, h4 + h5, h5 + h5, h6 + h5,
h3 + h6, h4 + h6, h5 + h6, h6 + h6 {
    margin-top: -2px;
}

img {
    -webkit-user-drag: none;
    user-drag: none;
}

img.template {
    filter: invert(10%);
}

img.rounded {
    border-radius: 18.75%;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}

@media only screen and (prefers-color-scheme: dark) {
    
    img.template {
        filter: invert(100%) brightness(60%);
    }

}

header {
    background-color: var(--gray-90);
    position: sticky;
    z-index: 1;
    top: 0;
    width: 100%;
    height: var(--header-height);
    border-bottom: var(--thin-size) solid var(--gray-80);
}

header > nav {
    max-width: var(--page-width);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    height: 100%;
}

header > nav > div.spacer {
    flex-grow: 1;
}

@media (hover: hover) and (pointer: fine) {
    header > nav > :not(.spacer):hover {
        background-color: var(--gray-80);
    }
}

header > nav > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}

header > nav > a,
header > nav > a > span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

header > nav > a > img {
    display: block;
    margin-right: 4px;
    width: 32px;
    height: 32px;
}

header > nav > a,
header > nav > a:link,
header > nav > a:visited,
header > nav > a:active {
    padding: 0 12px;
    color: var(--text-emphasized);
}

header > nav > a:active {
    background-color: var(--gray-70);
}

header > nav > a:not(:first-child) {
    border-left: var(--thin-size) solid var(--gray-80);
}

header > nav > a#exit {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 32'><polyline points='4 14 8 10 12 14' style='fill:none;stroke:rgb(0,0,0);stroke-linecap:round;stroke-width:1.5px'/><polyline points='8 10 8 22' style='fill:none;stroke:rgb(0,0,0);stroke-linecap:round;stroke-width:1.5px'/></svg>");
    background-position: center center;
    background-repeat: no-repeat;
    width: var(--header-height);
}

@media only screen and (prefers-color-scheme: dark) {
        
    header > nav > a#exit {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 32'><polyline points='4 14 8 10 12 14' style='fill:none;stroke:white;stroke-linecap:round;stroke-width:1.5px'/><polyline points='8 10 8 22' style='fill:none;stroke:white;stroke-linecap:round;stroke-width:1.5px'/></svg>");
    }
    
}

header > nav > a#back {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 32'><polyline points='9 12 5 17 9 22' style='fill:none;stroke:black;stroke-linecap:round;stroke-width:1.5px'/></svg>");
    background-position: center center;
    background-repeat: no-repeat;
    width: var(--header-height);
}

@media only screen and (prefers-color-scheme: dark) {

    header > nav > a#back {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 32'><polyline points='9 12 5 17 9 22' style='fill:none;stroke:white;stroke-linecap:round;stroke-width:1.5px'/></svg>");
    }
    
}

header > nav > a.current {
    font-weight: var(--font-weight-bold);
}

@media only screen and (max-width:599px) {

    header > nav > a:not(.current) > img {
        margin-right: 0;
    }
    
    header > nav > a:not(.current) > span {
        display: none;
    }
    
}

footer {
    font-size: 9pt;
    text-align: center;
    color: var(--text-secondary);
    margin-top: 128px;
    padding: 12px 0;
    border-top: var(--thin-size) solid var(--separator);
}

body > :not(header) {
    max-width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

:is(h1, h2, h3, h4, h5, h6) > a,
:is(h1, h2, h3, h4, h5, h6) > a:link,
:is(h1, h2, h3, h4, h5, h6) > a:visited {
    color: var(--text-emphasized);
}

details > summary {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    list-style: none;
}

details[open] > :last-child {
    margin-bottom: 10px;
}

details.group > summary:focus {
    outline-style: none;
}

details.group {
    padding: 10px;
    border-radius: 6px;
    border-width: 8px;
    border-style: solid;
    border-color: rgba(0,0,0,0.0);
    margin-top: 16px;
    margin-left: -16px;
    margin-right: -16px;
}

details.group:not([open]) + .group {
    margin-top: 0;
}

details.group[open] {
    border-color: var(--border);
}

@media (hover: hover) and (pointer: fine) {
    details > summary:hover {
        border-radius: 4px;
        background-color: var(--hover);
    }
}

details > summary:active {
    background-color: var(--active);
}

details.group > summary > div > :first-child {
    background-position: left 18px;
    background-size: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 20px;
}

details.group:not([open]) > summary > div > div:first-child {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6'><polyline points='1 0 5 3 1 6' style='fill:rgb(0,0,0);stroke:none;'/></svg>");
}

details.group[open] > summary > div > div:first-child {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6'><polyline points='0 2 3 6 6 2' style='fill:rgb(0,0,0);stroke:none;'/></svg>");
}

details.group > summary > div > div:first-child > h2 {
    margin:0;
}

details.group > summary::-webkit-details-marker,
details.group > summary::marker {
    display: none;
}

@media only screen and (prefers-color-scheme: dark) {
    
    details.group:not([open]) > summary > div > div:first-child {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6'><polyline points='1 0 5 3 1 6' style='fill:white;stroke:none;'/></svg>");
    }
    
    details.group[open] > summary > div > div:first-child {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6'><polyline points='0 2 3 6 6 2' style='fill:white;stroke:none;'/></svg>");
    }
    
}

@media only screen and (max-width:599px) {
    
    details.group[open] > summary > div > :first-child,
    details.group:not([open]) > summary > div > :first-child {
        background-position: left center;
    }
    
}

section {
    margin-top: 12px;
    margin-bottom: 16px;
}

section + section {
    margin-top: 32px;
}

body > h1,
body > h2,
article > :is(h1, h2),
section > :is(h1, h2),
section > h3:first-child,
article > h3:first-child {
    padding-bottom: 12px;
    border-bottom: var(--thin-size) solid var(--separator);
}

section > :is(h4,h5,h6):first-child,
article > :is(h4,h5,h6):first-child {
    padding-bottom: 4px;
    border-bottom: var(--thin-size) solid var(--separator);
}

section.category {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 16px auto;
}

section.category > div.anchor ~ :is(h1, h2, h3, h4, h5, h6) {
    width: 100%;
}

section.category > a.plugin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 16px 12px 0;
}

section.category > a.plugin > div.title {
    margin-top: 4px;
    text-align: center;
    font-size: 11pt;
    font-weight: var(--font-weight-bold);
}

section.category > a.plugin > .thumbnail {
    width: 224px;
    height: auto;
    border-radius: 4px;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.25));
    background-color: rgba(128,128,128,0.25);
}

@media only screen and (max-width:519px) {
    section.category > a.plugin > .thumbnail {
        width: 160px;
    }
}

@media only screen and (max-width:379px) {
    section.category > a.plugin > .thumbnail {
        width: 100%;
    }
}

@media only screen and (min-width:600px) {

    .indented {
        display: flex;
    }
    
    .indented > div:first-child {
        flex-shrink: 0;
        flex-grow: 0;
        width: 220px;
        margin-right: 12px;
    }

}

.indented > :nth-child(2):empty {
    display: none;
}

.indented > :not(:first-child) {
    flex-grow: 1;
}

div.parameter > div > :first-child,
div.parameter > div > div:first-child > :first-child,
div.parameter > div > div:first-child > div:first-child > :first-child{
    margin-top: 0;
}

div.parameter > div > :last-child,
div.parameter > div > :last-child > :last-child {
    margin-bottom: 0;
}

div.parameter.group > div:nth-child(2) {
    margin-top: 14px;
}

@media only screen and (max-width:599px) {
    
    div.parameter:not(.group) > div:first-child {
        padding-left: 12px;
        border-left: 8px solid var(--marker);
        margin-bottom: 4px;
    }
    
    div.parameter:not(.group) > div:nth-child(2) {
        padding-left: 20px;
    }

}

@media only screen and (min-width:600px) {

    div.parameter:not(.group) > div:first-child {
        text-align: right;
    }
    
    div.parameter:not(.group) > div:first-child > * {
        padding-right: 12px;
        border-right: 8px solid var(--marker);
    }

}

summary + div.parameter {
    margin-top: 12px;
}

div.parameter + div.parameter:not(.group) {
    margin-top: 12px;
}

div.parameter + div.parameter.group {
    margin-top: 20px;
}

section > div.parameter.group {
    margin-top: 16px;
}

section > div.parameter.group,
section > details > div.parameter.group,
section > details > summary > div.parameter.group:first-child {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: var(--thin-size) solid var(--separator);
}

div.parameter.group > div:first-child > * {
    margin-top: 8px;
    padding-right: 20px;
}

div.parameter.group > div:first-child img {
    width: 24px;
    height: 18px;
    margin-right: 8px;
    display: inline-block;
    position: relative;
    bottom: -2px;
}

div.color.chip {
    border-radius: 2px;
    margin-bottom: -1px;
    border: 1.5px solid var(--text-emphasized);
    width: 12px;
    height: 12px;
    display: inline-block;
}

div.point.canvas {
    position: relative;
    width: 160px;
    height: 90px;
    margin: 8px auto;
    background: var(--gray-80);
    border: 1px solid var(--text-secondary);
    border-radius: 2px;
}

div.rectangle.indicator {
    background: yellow;
    position: absolute;
    border-radius: 1px;
    border: 1px solid black;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}

div.point.indicator {
    width: 8px;
    height: 8px;
    margin-top: -4px;
    margin-left: -4px;
    background: yellow;
    position: absolute;
    border-radius: 4px;
    border: 1px solid black;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}

div.point.area {
    background: var(--gray-50);
    position: absolute;
    border-radius: 100%;
}

div.point.image {
    position: absolute;
}

div.point.image > img {
    width: 100%;
    height: 100%;
}

div.point.image ~ div.point.indicator {
    width: 6px;
    height: 6px;
    margin-top: -3px;
    margin-left: -3px;
    border-radius: 3px;
}

div.point.divider {
    position: relative;
    background: yellow;
    border: 1px solid black;
    border-radius: 2px;
}

div.point.divider.vertical {
    width: 4px;
    margin-left: -2px;
    height: 100%;
}

div.point.divider.horizontal {
    height: 4px;
    margin-top: -2px;
    width: 100%;
}

div.point.divider.thick ~ div.point.indicator {
    display: none;
}

div.point.canvas + div.caption {
    text-align: center;
    margin-top: -4px;
    font-size: 90%;
}

div.point.canvas + div.caption > a {
    font-weight: var(--font-weight-bold);
}

ul.parameter.popup.menu > li > img {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    border-radius: 2px;
}

ol, ul {
    list-style-position: outside;
    margin-top: 12px;
    margin-bottom: 12px;
    padding-left: 20px;
}

ol > li,
ul > li {
    margin-bottom: 8px;
}

ol > li::marker {
    color: var(--marker);
}

ul > li::marker {
    color: var(--marker);
}

span.button {
    display: inline-block;
    color: var(--black);
    font-size: 90%;
    font-weight: var(--font-weight-bold);
    border: 1px solid var(--gray-30);
    padding: 0em 0.8em 0.1em 0.8em;
    margin: 2px;
    border-radius: 4px;
}

span.menu {
    display: inline-block;
    color: #fff;
    background-color: #095ab5;
    font-size: 90%;
    font-weight: var(--font-weight-regular);
    padding: 0.1em 0.8em 0em 0.8em;
    margin: 2px;
    border-radius: 4px;
}

blockquote {
    line-height: 145%;
    font-weight: var(--font-weight-regular);
    color: var(--gray-20);
    background-color: var(--blockquote-background);
    padding: 16px 20px;
    margin: 16px 4px;
    border-radius: 15px;
}

blockquote > :first-child {
    margin-top: 0;
}

code {
    color: var(--blue-foreground);
    background: var(--blue-background);
    font-family: ui-monospace, monospace;
    font-weight: var(--font-weight-regular);
}

pre code {
    white-space: break-spaces;
    display: block;
    padding: 12px 20px;
    border-radius: 15px;
    margin: 12px 0;
}

div.screenshot {
    text-align: center;
    margin-top: 24px;
    margin-bottom: 24px;
    font-size: 85%;
}

div.screenshot > div.caption {
    display: inline-block;
    min-width: 50%;
    margin-bottom: 8px;
    color: var(--text-caption);
}

div.screenshot > div.caption * {
    color: var(--text-caption);
}

div.screenshot > div.image {
    display: inline-block;
}

div.screenshot > div > img {
    width: 100%;
    border-radius: 8px;
}

div.screenshot > div > img + * {
    margin-left: 8px;
}

div.anchor {
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
}

div.anchor:target + :is(h1, h2, h3, h4, h5, h6) {
    border-radius: 4px;
    animation: pulsate 0.1s ease-in 0s 6 alternate;
}

@keyframes pulsate {
    from {
        color: inherit;
        background-color: inherit;
    }
    to {
        color: var(--yellow-foreground);
        background-color: var(--yellow-background);
    }
}

div#navigation-menu {
    position: relative;
    height: 100%;
}

div#navigation-menu > input[type=checkbox] {
    display: none;
}

div#navigation-menu > input[type=checkbox] ~ label {
    height: 100%;
    align-items: center;
    display: flex;
    -webkit-user-select: none;
    user-select: none;
    font-weight: var(--font-weight-bold);
    color: var(--black);
    padding: 0 12px;
}

div#navigation-menu > input[type=checkbox] ~ label > span:not(.hamburger) {
    margin-right: 12px;
}

div#navigation-menu > input[type=checkbox] ~ label > span.hamburger {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: center center;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 20 17' xmlns='http://www.w3.org/2000/svg'><g fill='black'><rect height='3' rx='1' width='20'/><rect height='3' rx='1' width='20' y='7'/><rect height='3' rx='1' width='20' y='14'/></g></svg>");
}

div#navigation-menu > input[type=checkbox]:checked ~ label {
    background: var(--gray-70);
}

div#navigation-menu > input[type=checkbox]:checked ~ label > span.hamburger {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.09 21.09'><g fill='black'><rect x='-2' y='10.5' width='28' height='3' rx='1' transform='translate(10.54 -6.43) rotate(45)'/><rect x='-2' y='10.5' width='28' height='3' rx='1' transform='translate(-6.43 10.54) rotate(-45)'/></g></svg>");
}


@media only screen and (prefers-color-scheme: dark) {

    div#navigation-menu > input[type=checkbox] ~ label > span.hamburger {
        background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 20 17' xmlns='http://www.w3.org/2000/svg'><g fill='white'><rect height='3' rx='1' width='20'/><rect height='3' rx='1' width='20' y='7'/><rect height='3' rx='1' width='20' y='14'/></g></svg>");
    }
    
    div#navigation-menu > input[type=checkbox]:checked ~ label > span.hamburger {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.09 21.09'><g fill='white'><rect x='-2' y='10.5' width='28' height='3' rx='1' transform='translate(10.54 -6.43) rotate(45)'/><rect x='-2' y='10.5' width='28' height='3' rx='1' transform='translate(-6.43 10.54) rotate(-45)'/></g></svg>");
    }
    
}

@media only screen and (max-width:599px) {
            
    div#navigation-menu > input[type=checkbox] ~ label > span:not(.hamburger) {
        display: none;
    }
        
}

div#navigation-menu-content {
    display: none;
    position: absolute;
    top: var(--header-height);
    right: 0;
    max-height: 100vh;
    padding-bottom: var(--header-height);
    overflow-x: hidden;
    overflow-y: scroll;
}

div#navigation-menu-items {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 12px;
    border: var(--thin-size) solid var(--gray-80);
    border-top: none;
    background-color: var(--gray-90);
    box-shadow: 0 1px 1px rgba(0,0,0,0.25);
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

div#navigation-menu > input[type=checkbox]:checked ~ div#navigation-menu-content {
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    div#navigation-menu > input[type=checkbox]:hover ~ div#navigation-menu-content,
    div#navigation-menu > input[type=checkbox] ~ div#navigation-menu-content:hover {
        display: block;
    }
}

div#navigation-menu-items a.menu-item {
    font-weight: var(--font-weight-bold);
    color: var(--text-emphasized);
    padding: 4px 12px;
    border-radius: 4px;
    white-space: nowrap;
}

@media only screen and (max-width:599px) {
    div#navigation-menu-content {
        width: 100vw;
    }
    div#navigation-menu-items {
        align-items: flex-end;
    }
}

@media (hover: hover) and (pointer: fine) {
    div#navigation-menu-items a.menu-item:hover {
        background: var(--gray-80);
    }
}