:root {
    --background-color-primary: hsl(30, 16%, 20%);
    --foreground-color-primary: #ffffff;

    --background-color-secondary: hsl(30, 16%, 40%);
    --shadow-color: black;

    --background-color-step1: hsl(30, 16%, 70%);
    --background-color-step2: hsl(30, 16%, 80%);
    --background-color-step2-transparent: hsla(30, 16%, 80%, 0%);

    --very-large-corner-radius: 8pt;
    --large-corner-radius: 4pt;
    --small-corner-radius: 2pt;
}

body {
    font-family: 'Inter', sans-serif;
    font-weight: normal;
    margin: 0 0;
    background-color: white;
}

/* Navigation bar */
header nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    transition: 0.3;
}

header nav ul li {
    padding: 0;
    margin: 0 40pt 0 0pt;
    display: inline-block;
}

header nav {
    background-color: var(--background-color-primary);
    color: var(--foreground-color-primary);
    display: block;
    position: fixed;
    padding: 10pt 15%;
    top: 0;
    width: 100%;
    height: 15pt;
    box-shadow: 0px 0px 8px 0px var(--shadow-color);
}

header nav a {
    color: var(--foreground-color-primary);
    text-decoration: none;
}

#hamburgerInput {
    display: none;
}

#hamburgerSwitch {
    position: fixed;
    top: 17pt;
    left: 10pt;
    width: 24pt;
    height: 24pt;
    display: none;
    border: none;
    padding: 0px;
    margin: 0px;
}

#hamburgerIcon,
#hamburgerIcon::before,
#hamburgerIcon::after {
    display: block;
    background-color: #fff;
    position: absolute;
    height: 2pt;
    width: 20pt;
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 2pt;
}

#hamburgerIcon::before {
    content: '';
    margin-top: -8pt;
}

#hamburgerIcon::after {
    content: '';
    margin-top: 8pt;
}

#hamburgerInput:checked+#hamburgerSwitch #hamburgerIcon::before {
    margin-top: 0px;
    transform: rotate(405deg);
}

#hamburgerInput:checked+#hamburgerSwitch #hamburgerIcon {
    background: rgba(255, 255, 255, 0);
}

#hamburgerInput:checked+#hamburgerSwitch #hamburgerIcon::after {
    margin-top: 0px;
    transform: rotate(-405deg);
}

#hamburgerInput:checked~ul {
    position: fixed;
    display: block;
    top: 35pt;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-color-primary);
    transition: 0.3s;
    padding: 0pt 0pt 8pt 0pt;
    box-sizing: border-box;
}

#hamburgerInput:checked~ul li {
    margin: 16pt;
    display: block;
}

@media (max-width: 700px) {
    #hamburgerSwitch {
        display: block;
    }

    header nav ul {
        display: none;
    }
}

/* Page content */
main {
    margin-top: 35pt;
}

main article {
    color: var(--background-color-primary);
    margin: 0pt 15%;
    line-height: 1.5;
}

main article img {
    margin: 16pt auto 16pt auto;
    display: block;
    height: auto;
    box-shadow: 0px 0px 16px 0px var(--background-color-secondary);
    border-radius: var(--large-corner-radius);
}

@media (max-width: 850px) {

    main article img {
        width: 100%;
        max-width: 100%;
    }
}

main article code {
    font-family: 'Inter', sans-serif;
    font-weight: normal;
    background-color: var(--background-color-step2);
    padding: 0 8pt 0 8pt;
    border-radius: var(--large-corner-radius);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: black;
}

main article pre code {
    font-family: 'Courier New', Courier, monospace;
    font-weight: normal;
    display: block;
    word-wrap: normal;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
    max-width: 100%;
    min-width: 100px;
}

.contentCentred {
    text-align: center;
}

.printOnlyBlock {
    display: none;
}

footer {
    color: var(--background-color-primary);
    margin: 48pt 15% 0pt 15%;
    line-height: 1.5;
}

footer .downloadButton {
    float: left;
    clear: both;
    margin-top: 0;
    margin-right: 16pt;
}

footer p.lowPriority {
    margin-top: 24pt;
    clear: both;
    color: var(--background-color-secondary);
    font-size: smaller;
}

footer p.lowPriority a {
    color: var(--background-color-secondary);
}

hr {
    border: none;
    border-top: solid 2px var(--background-color-primary);
    margin: 16pt 0pt 16pt 0pt;
}

p {
    margin: 16pt 0pt 16pt 0pt;
    text-align: justify;
}

li {
    margin-top: 8pt;
}

h1 {
    margin-top: 24pt;
    margin-bottom: 0pt;
    font-size: 24pt;
    color: var(--background-color-primary);
    font-weight: normal;
}

h2 {
    padding-top: 36pt;
    /* Padding instead of margin so heading is not hidden behind nav bar when following deep-links to settings sections */
    margin-top: 0pt;
    color: var(--background-color-primary);
    font-weight: normal;
}

a {
    color: var(--background-color-secondary);
}

/* Steps */
div.stepContainer {
    margin: 20pt -15% 20pt -15%;
    background: linear-gradient(90deg, var(--background-color-step1) 0%, var(--background-color-step1) 50%, var(--background-color-step2) 50%, var(--background-color-step2) 100%);
    border-radius: calc(var(--very-large-corner-radius) * 2);
}

div.step1 {
    clear: both;
    background-color: var(--background-color-step1);
    display: block;
    padding: 16pt 16pt 0pt 16pt;
    border-top-right-radius: var(--very-large-corner-radius);
    border-bottom-right-radius: var(--very-large-corner-radius);
}

div.step1 img {
    float: right;
    margin: 0pt 0pt 16pt 16pt;
    box-shadow: 0px 0px 16px 0px var(--background-color-secondary);
    border-radius: var(--large-corner-radius);
}

div.step1 p {
    margin: 0pt 0pt 16pt 0pt;
}

div.step2 {
    clear: both;
    background-color: var(--background-color-step2);
    display: block;
    padding: 16pt 16pt 0pt 16pt;
    border-top-left-radius: var(--very-large-corner-radius);
    border-bottom-left-radius: var(--very-large-corner-radius);
}

div.step2 p {
    margin: 0pt 0pt 16pt 0pt;
}

div.step2 img {
    float: left;
    margin: 0pt 16pt 16pt 0pt;
    box-shadow: 0px 0px 16px 0px var(--background-color-secondary);
    border-radius: var(--large-corner-radius);
}

div.step2 code {
    background-color: var(--background-color-step1);
}

div.step1:first-child,
div.step2:first-child {
    border-top-left-radius: var(--very-large-corner-radius);
    border-top-right-radius: var(--very-large-corner-radius);
}

div.step1:last-child,
div.step2:last-child {
    border-bottom-left-radius: var(--very-large-corner-radius);
    border-bottom-right-radius: var(--very-large-corner-radius);
}

div.step1::after,
div.step2::after {
    content: "";
    clear: both;
    display: table;
}

@media (max-width: 800px) {

    div.step1 img,
    div.step2 img {
        width: 100%;
        max-width: 100%;
    }
}

/* Table */
table
{
    border-collapse: separate;
    border-spacing: 2pt;
    margin: 16pt 0pt 16pt 0pt;
}

th
{
    background-color: var(--background-color-secondary);
    color: var(--foreground-color-primary);
    padding: 4pt 8pt 4pt 8pt;
    border-radius: var(--small-corner-radius);
}

td
{
    padding: 4pt 8pt 4pt 8pt;
    border-radius: var(--small-corner-radius);
}

tr:nth-child(odd) td
{
    background-color: var(--background-color-step1);
}

tr:nth-child(even) td
{
    background-color: var(--background-color-step2);
}

/* Multi-hero block */
div.multipleHeroContainer {
    margin: 20pt -15% 20pt -15%
}

div.hero1 {
    clear: both;
    display: block;
    padding: 16pt 16pt 0pt 16pt;
    text-align: right;
    background: linear-gradient(270deg, var(--background-color-step2), var(--background-color-step2-transparent));
    border-radius: var(--very-large-corner-radius);
}

div.hero1 img {
    float: right;
    margin: 0pt 0pt 16pt 16pt;
    box-shadow: 0px 0px 16px 0px var(--background-color-secondary);
    border-radius: var(--large-corner-radius);
}

div.hero1 p {
    margin: 0pt 0pt 16pt 0pt;
    text-align: right;
}

div.hero2 {
    clear: both;
    display: block;
    padding: 16pt 16pt 0pt 16pt;
    text-align: left;
    background: linear-gradient(90deg, var(--background-color-step2), var(--background-color-step2-transparent));
    border-radius: var(--very-large-corner-radius);
}

div.hero2 p {
    margin: 0pt 0pt 16pt 0pt;
    text-align: left;
}

div.hero2 img {
    float: left;
    margin: 0pt 16pt 16pt 0pt;
    box-shadow: 0px 0px 16px 0px var(--background-color-secondary);
    border-radius: var(--large-corner-radius);
}

div.hero2 code {
    background-color: var(--background-color-step1);
}

div.hero1::after,
div.hero2::after {
    content: "";
    clear: both;
    display: table;
}

@media (max-width: 800px) {

    div.hero1 img,
    div.hero2 img {
        width: 100%;
        max-width: 100%;
    }
}

/* Skip to content */
a.skipToContent {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

a.skipToContent:focus {
    display: block;
    position: static;
    width: auto;
    height: auto;
}

/* Breadcrumb */
ul.breadcrumbTrail {
    list-style: none;
    margin: 0 15%;
    padding: 16pt 0pt;
}

ul.breadcrumbTrail li {
    display: inline;
    margin: 0;
    padding: 0;
}

ul.breadcrumbTrail li+li:before {
    content: ">";
    margin: 0;
    padding: 4pt;
}

/* Cookie consent */
.consentWrapper {
    display: none;
    background-color: var(--background-color-secondary);
    color: var(--foreground-color-primary);
    position: fixed;
    padding: 20pt 15%;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0px 0px 8px 0px var(--shadow-color);
}

.consentWrapper.show {
    display: block;
}

.consentWrapper button {
    margin: 0pt 0pt 16pt 0pt;
    background-color: var(--background-color-secondary);
    color: var(--foreground-color-primary);
    border: 1px solid var(--background-color-primary);
    border-radius: var(--large-corner-radius);
    padding: 10pt;
    font-family: 'Inter', sans-serif;
    font-weight: normal;
    font-size: larger;
}

.consentWrapper button#consentAccept {
    background-color: var(--background-color-primary);
    color: var(--foreground-color-primary);
    border: 1px solid var(--background-color-primary);
}

body:has(.consentWrapper.show) {
    margin-bottom: 180pt;
}

/* Print mode */
@media print {
    :root {
        --print-margin: 2%;
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    main {
        margin-top: 0pt;
    }

    main article {
        margin: 0pt var(--print-margin);
    }

    div.stepContainer,
    div.multipleHeroContainer {
        margin: 20pt 0% 20pt 0%;
    }

    div.step1 img,
    div.step2 img,
    div.hero1 img,
    div.hero2 img {
        width: 50%;
        max-width: 50%;
    }

    main article img {
        width: 100%;
        max-width: 100%;
    }

    ul.breadcrumbTrail {
        margin: 0pt var(--print-margin);
    }

    footer {
        margin: 48pt var(--print-margin) 0pt var(--print-margin);
    }

    .notPrintable {
        display: none;
    }

    .printOnlyBlock {
        display: block;
    }

    .consentWrapper.show {
        display: none;
    }
}