/* Lexend font */
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Lexend:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap");

html {
    color: white;
    background-color: #131216;
    font-family: "Lexend", "Noto Color Emoji", sans-serif;
    font-weight: 300;
}

body {
    margin: 0 auto;
    max-width: 45em;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
    hyphens: auto;
}

@media screen and (max-width: 600px) {
    body {
        padding-left: 25px;
        padding-right: 25px;
        padding-top: 25px;
    }
}

@media print {
    html {
        background-color: white;
    }
    body {
        background-color: transparent;
        color: black;
        font-size: 12pt;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    h2,
    h3,
    h4 {
        page-break-after: avoid;
    }
}

.Homepage {
    h1 {
        font-size: xxx-large;
        font-weight: 900;
        display: inline-block;
        border-radius: 5px;
        text-shadow: 0px 4px 1px hsla(240, 29%, 62%, 0.5);
        margin-bottom: 0.25em;
        margin-top: 1em;
    }

    h1::after {
        display: none;
    }

    h1::before {
        content: "";
        display: inline-block;
        height: 1.5em;
        width: 1.5em;
        transform: translateY(0.35em) rotate(5deg);
        background-image: url("/images/godot_icon_rhosgfx.svg");
        background-size: contain;
        margin-right: 0.5em;
    }

    ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25em;

        list-style-type: none;
        padding-left: 0;

        li {
            font-size: smaller;
            display: inline-block;
            color: #ffffff;
            font-weight: 400;
            background-color: #394050;
            padding: 0.5em 1em;
            border-radius: 5px;

            span {
                margin-right: 0.75em;
            }
        }
    }
}

.Navigation {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em;
    flex: 1 2;
}

.Group {
    background-color: rgba(37, 35, 41, 0.3);
    padding: 1.5em;
    border-radius: 5px;
    flex-grow: 1;

    h2 {
        margin-top: 0;
    }

    li:last-of-type {
        margin-bottom: 0;
    }

    &.Long {
        flex-basis: 100%;
    }
}

p {
    margin: 1em 0;
}

strong {
    font-weight: 600;
    background-color: #8b77be1f;
}

p code,
ul code {
    background-color: rgba(129, 129, 129, 0.35);
}
a {
    color: #3c7dff;
    text-decoration: none;
    transition: background-color 0.2s ease;
    border-radius: 5px;
}

a:hover {
    background-color: #3d7aff25;
}

a:visited {
    color: #4c6daf;
}

img {
    max-width: 100%;
}
svg {
    height: auto;
    max-width: 100%;
}

figure {
    /* background-color: rgba(0, 0, 0, 0.2); */
    border-radius: 10px;
    margin: 0.5em;

    img {
        border-radius: 5px;
    }

    figcaption {
        margin-top: 0.5em;
        margin-bottom: 2em;
        font-variant: small-caps;
        text-align: center;
        font-weight: 400;
    }

    figcaption::before {
        content: "Fig.";
        font-weight: 400;
        font-style: italic;
        margin-right: 1ch;
    }
}

h1::after {
    content: "";
    display: block;
    background-color: rgba(255, 255, 255, 0.473);
    height: 1px;
    margin-top: 0.5em;
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 1.4em;
}
h5,
h6 {
    font-size: 1em;
    font-style: italic;
}
h6 {
    font-weight: normal;
}
ol,
ul {
    padding-left: 1.7em;
    margin-top: 1em;
}
li {
    margin-bottom: 0.5em;
}
li:last-of-type {
    margin-bottom: 2em;
}

.Big {
    font-size: larger;
    font-weight: bolder;
}

li > ol,
li > ul {
    margin-top: 0;
}
blockquote {
    margin: 0em 0 1em 0em;
    padding-left: 1em;
    border-left: 4px solid #e6e6e6;
    color: #bbbbbbb0;
}
code {
    font-family: "JetBrains Mono", monospace;
    font-size: 85%;
    margin: 0;
    hyphens: manual;
}
pre {
    margin: 1em 0;
    overflow: auto;
}

pre.sourceCode {
    border-radius: 5px;
    padding: 1.5em;
}

pre code {
    padding: 0;
    overflow: visible;
    overflow-wrap: normal;
}

.sourceCode {
    overflow: visible;
}
hr {
    border: none;
    border-top: 1px solid #1a1a1a;
    height: 1px;
    margin: 1em 0;
}
table {
    margin: 1em 0;
    border-collapse: collapse;
    width: 100%;
    overflow-x: auto;
    display: block;
    font-variant-numeric: lining-nums tabular-nums;
}
table caption {
    margin-bottom: 0.75em;
}
tbody {
    margin-top: 0.5em;
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
}
th {
    border-top: 1px solid #1a1a1a;
    padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
    padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
    margin-bottom: 4em;
    text-align: center;
}
#TOC li {
    list-style: none;
}
#TOC ul {
    padding-left: 1.3em;
}
#TOC > ul {
    padding-left: 0;
}
#TOC a:not(:hover) {
    text-decoration: none;
}
code {
    white-space: pre-wrap;
    border-radius: 3px;
    padding: 0.1em 0.5ch;
}

span.smallcaps {
    font-variant: small-caps;
}
div.columns {
    display: flex;
    gap: min(4vw, 1.5em);
}
div.column {
    flex: auto;
    overflow-x: auto;
}
div.hanging-indent {
    margin-left: 1.5em;
    text-indent: -1.5em;
}
/* The extra [class] is a hack that increases specificity enough to
       override a similar rule in reveal.js */
ul.task-list[class] {
    list-style: none;
}
ul.task-list li input[type="checkbox"] {
    font-size: inherit;
    width: 0.8em;
    margin: 0 0.8em 0.2em -1.6em;
    vertical-align: middle;
}
.display.math {
    display: block;
    text-align: center;
    margin: 0.5rem auto;
}
/* CSS for syntax highlighting */
html {
    -webkit-text-size-adjust: 100%;
}
pre > code.sourceCode {
    white-space: pre;
    position: relative;
}
pre > code.sourceCode > span {
    display: inline-block;
    line-height: 1.25;
}
pre > code.sourceCode > span:empty {
    height: 1.2em;
}
.sourceCode {
    overflow: visible;
}
code.sourceCode > span {
    color: inherit;
    text-decoration: inherit;
}
div.sourceCode {
    margin: 1em 0;
    border-radius: 5px;
}
pre.sourceCode {
    margin: 0;
}
@media screen {
    div.sourceCode {
        overflow: auto;
    }
}
@media print {
    pre > code.sourceCode {
        white-space: pre-wrap;
    }
    pre > code.sourceCode > span {
        text-indent: -5em;
        padding-left: 5em;
    }
}
pre.numberSource code {
    counter-reset: source-line 0;
}
pre.numberSource code > span {
    position: relative;
    left: -4em;
    counter-increment: source-line;
}
pre.numberSource code > span > a:first-child::before {
    content: counter(source-line);
    position: relative;
    left: -1em;
    text-align: right;
    vertical-align: baseline;
    border: none;
    display: inline-block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0 4px;
    width: 4em;
    color: #aaaaaa;
}
pre.numberSource {
    margin-left: 3em;
    border-left: 1px solid #aaaaaa;
    padding-left: 4px;
}

.Note,
.Warning,
.Example,
.Important {
    position: relative;
    margin: 1em 0;
    padding: 1em 1em;
    padding-top: 3em;
    border-radius: 5px;

    &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        padding: 0.5em 1em;
        width: 100%;
        font-weight: 500;
        box-sizing: border-box;
        border-radius: 5px 5px 0px 0px;
    }

    img {
        border-radius: 5px;
    }
}

.Important {
    background-color: #372c53;
    &::before {
        content: "📌 Important";
        background-color: #4e3b7a;
    }
}

.Note {
    background-color: #303133;
    &::before {
        content: "📝 Note";
        background-color: #4b5158;
    }
}

.Warning {
    background-color: #46300e;
    &::before {
        content: "⚠️ Attention";
        background-color: #ca6919;
    }
}

.Example {
    background-color: #386957;
    &::before {
        content: "🔥 Exemple";
        background-color: #37965b;
    }
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;

    * {
        flex: 1 1 25%;
    }

    p {
        margin: 0;
    }

    img {
        border-radius: 5px;
    }
}

.video-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;

    video {
        flex: 1 1 30%;
        width: 50%;
        flex-grow: 1;
        display: block;
        border-radius: 5px;
        background-color: #303133;
        animation: 1s ease-in-out infinite alternate pulse;
    }

    video::after {
        height: 100%;
        width: 100%;
    }
}

@keyframes pulse {
    from {
        background-color: #ffffff0e;
    }

    to {
        background-color: #ffffff28;
    }
}