:root {
    font-size: 18px;
    --table-border-size: 2px;
    --tab-border-size: 2px;
    --bg: #161517;
    --mainbg: #1f1e21;
    --navhoverbg: #2d2a31;
    --contentbg: #1b1a1c;
    --sbg: #272529;
    --hoverbg: #403c45;
    --colw: #afa0ab;
    --colww: #dddddd;
    --colr: #b6313f;
    --colo: #e67e23;
    --coly: #c4a908;
    --coll: #bad34d;
    --colg: #26b36c;
    --colb: #4791b1;
    --colp: #b96ad9;
    --colm: #c13479;
    --colgr: #585157;
    --colgrw: #736771;
    --colhr: #393637;
    --textboxbg: #151416;
    --textboxbgb: #332e2f;
    --txt: var(--colb);
    --codebg: #303038;
    --codebgdark: #292930;
    --codeblockbg: #25242c;
    --callout: var(--textboxbg);
    --calloutb: var(--textboxbgb);
    --icallout: #14273b;
    --icalloutb: #2391bb;
    --scallout: #192f22;
    --scalloutb: #14b56b;
    --wcallout: #2b261e;
    --wcalloutb: #cf8d16;
    --dcallout: #2f1919;
    --dcalloutb: #853232;
    --optionbg: #424250;
    --scrollbar: #323139;
    --mono: jetbrainsmono, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    --nav-height: 4rem;
}

* {
    box-sizing: border-box;
}

@font-face {
    font-family: montserrat;
    src: url(font/Montserrat-Medium.ttf);
}

@font-face {
    font-family: sarasauitc;
    src: url(font/SarasaUiTC-Regular.ttf);
}

@font-face {
    font-family: sarasauisc;
    src: url(font/SarasaUiSC-Regular.ttf);
}

@font-face {
    font-family: jetbrainsmono;
    src: url(font/JetBrainsMono-Regular.ttf);
}

html {
    background-color: var(--bg);
    scroll-behavior: smooth;
}

div, body, header, main, section, footer {
    display: flex;
    flex-direction: column;
}

body {
    font-family: montserrat, sans-serif;
    color: var(--colw);
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

.txtr {
    color: var(--colr);
}

.txto {
    color: var(--colo);
}

.txty {
    color: var(--coly);
}

.txtg {
    color: var(--colg);
}

.txtb {
    color: var(--colb);
}

.txtp {
    color: var(--colp);
}

.txtm {
    color: var(--colm);
}

.txtgr, time {
    color: var(--colgr);
}

.txtgrw {
    color: var(--colgrw);
}

::-webkit-scrollbar {
    width: 17px;
    height: 12px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px var(--scrollbar);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
}

nav {
    width: 100%;
    background-color: var(--mainbg);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: fixed;
    left: 0;
    top: 0;
    border-bottom: 3px solid var(--bg);
    z-index: 1;
}

nav > div {
    display: flex;
    flex-direction: row;
    /* gap: 0.5rem; */
}

nav > div:nth-child(1) {
    overflow-x: auto;
    overflow-y: hidden;
}

nav > div > a {
    height: var(--nav-height);
    display: flex;
    align-items: center;
    padding: 0 0.5em;
    text-wrap: nowrap;
    /*transition: background-color 0.2s, color 0.2s;*/
}

nav > div > a:hover, nav > div > a.current {
    background-color: var(--navhoverbg);
    color: var(--colww);
}

nav > div > a.logo {
    gap: 0.5rem;
}

nav > div > a.logo > img {
    height: 1.5rem;
    border-radius: 50%;
}

nav > div > a.navbutton {
    width: 4rem;
    padding: 0;
    justify-content: center;
}

nav > div > a.navbutton > img {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

nav > div > a.navpreview {
    background-color: var(--colr);
    color: white;
    border-radius: 0.5rem;
    height: calc(100% - 18px);
    margin: 9px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

nav > div > a.navpreview > span.hide {
    font-size: 0.7em;
}

div#nav-offset {
    height: calc(var(--nav-height) + 1rem);
}

main {
    display: grid;
    margin-inline: 1rem;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        ". c .";
    grid-gap: 1rem;
}

div.main {
    min-width: 0;
}

div.main-content {
    grid-area: c;
    margin-bottom: 1rem;
    min-height: calc(100vh - 6rem);
}

div.main-nav {
    grid-area: n;
}

div.main-details {
    grid-area: d;
}

div.main-nav, div.main-details {
    font-size: 0.8rem;
    padding: 0;
}

aside.sticky {
    position: sticky;
    top: calc(var(--nav-height) + 1rem);
    height: calc(100vh - var(--nav-height) - 2rem);
    overflow-y: scroll;
    overflow-x: hidden;
}

.roundblock {
    padding: 1.5rem 2rem;
    background-color: var(--mainbg);
    border-radius: 1rem;
}

aside.sticky::-webkit-scrollbar {
    display: none
}

div.main-nav h1, div.main-details h1 {
    font-size: 1.5em;
    margin-bottom: 1rem;
}

main.infopanel {
    grid-template-areas: "n c d";
}

@media screen and (max-width: 1400px) {
    main.infopanel {
        display: flex;
        margin-inline: 1rem;
        grid-gap: 1rem;
    }

    aside.sticky {
        min-height: 0;
        height: fit-content;
    }

    div.main-content {
        margin: 0.5rem 0 0 0;
        min-height: fit-content;
    }

    div.main-nav {
        order: 2;
        margin-bottom: 1rem;
    }
}

@media screen and (max-width: 800px) {
    main {
        grid-template-columns: 1fr;
        grid-gap: 0;
        font-size: 0.9rem;
    }
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

h1 {
    font-size: 1.75em;
}

h2 {
    font-size: 1.25em;
}

a {
    color: var(--txt);
    text-decoration: none;
    cursor: pointer;
    word-break: break-word;
}

a:visited {
    color: var(--txt);
}

a.undocumented {
    color: var(--colm);
}

li.deprecated {
    text-decoration: line-through;
}

a.generic {
    color: var(--colg);
}

span.yes {
    color: var(--colg);
}

span.no {
    color: var(--colr);
}

table {
    border-collapse: collapse;
    text-align: left;
}

table.stretch {
    width: 100%;
}

@media screen and (max-width: 800px) {
    table.stretch tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;
    }
}

td, th {
    border: var(--table-border-size) solid var(--bg);
    padding: 0.45rem;
}

tr:nth-child(even) {
    background-color: #00000024;
}

tr:hover {
    background-color: var(--navhoverbg);
}

th {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    text-align: left;
    background-color: var(--navhoverbg);
    color: var(--colww);
}

hr {
    width: 100%;
    height: 1px;
    background-color: var(--colhr);
    border: none;
    margin: 1rem 0;
}

pre, code.method-in-heading {
    background-color: var(--codeblockbg);
    display: block;
    white-space: pre;
    font-size: 0.9em;
    overflow-x: auto;
    width: 100%;
    padding: 0.5rem;
    border-radius: 0.5rem;
}

code:not([class*=language-]) {
    background-color: var(--codebg);
    padding: 0 0.2rem;
    width: fit-content;
    border-radius: 0.3em;
    font-family: var(--mono);
    white-space: nowrap;
}

code.codeblock {
    background-color: var(--codeblockbg);
    padding: 0;
}

mark, mark code {
    color: black;
    background-color: var(--coly);
    padding: 0 0.2em;
    border-radius: 0.25em;
}

mark code {
    background-color: #523f6359;
}

mark.txtr {
    color: black;
    background-color: var(--colr);
}

img {
    max-width: 100%;
}

@media screen and (max-width: 800px) {
    code {
        text-wrap: pretty;
        word-break: break-word;
    }
}

.padded-section {
    background-color: var(--contentbg);
    border-radius: 0.56rem;
    margin: 0.45rem 0;
    padding: 0.6rem 0.8rem;
    gap: 0.5rem;
}

.selected-link {
    font-weight: bold;
}

ins.ad {
    margin-bottom: 1rem;
}

ins.ad:not([data-ad-status="filled"]) {
    background-color: var(--bg);
}

input[type=text], input[type=number], select, textarea {
    width: 100%;
    padding: 0.45rem 0.56rem;
    margin: 4px 0;
    display: block;
    border: 1px solid var(--textboxbgb);
    background-color: var(--textboxbg);
    color: inherit;
    border-radius: 4px;
    box-sizing: border-box;
}

textarea:focus, input[type=text]:focus {
    outline: none;
    border: 1px solid var(--colb);
}

input[type=submit] {
    padding: 8px 10px;
    margin: 4px 0;
    display: inline-block;
    border: 1px solid var(--textboxbgb);
    background-color: var(--textboxbg);
    color: inherit;
    border-radius: 4px;
    box-sizing: border-box;
    /*transition: background-color 0.2s, color 0.2s;*/
    cursor: pointer;
}

input[type=submit]:hover {
    border: 1px solid var(--colhr);
    background-color: var(--colb);
    color: white;
}

option {
    background-color: var(--optionbg);
    color: white;
    font-size: 1.2rem;
}

section#mc_versions {
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1rem;
}

section#mc_versions > a {
    padding: 0.5rem;
    background-color: var(--bg);
    border-radius: 4px;
    /*transition: background-color 0.2s ease, color 0.2s ease;*/
}

.forge::after {
    content: '';
    background-image: url('/img/forge.png');
    background-size: 1.3em;
    background-repeat: no-repeat;
    width: 1.3em;
    height: 1.3em;
    display: inline-block;
    margin-left: 0.25em;
    vertical-align: middle;
}

.fabric::after {
    content: '';
    background-image: url('/img/fabric.png');
    background-size: 1.1em;
    background-repeat: no-repeat;
    width: 1.1em;
    height: 1.1em;
    display: inline-block;
    margin-left: 0.25em;
    vertical-align: middle;
}

section#mc_versions > a:hover, section#mc_versions > a.current {
    background-color: var(--navhoverbg);
    color: white;
}

span[onclick] {
    cursor: pointer;
}

.downloads > p {
    display: flex;
    justify-content: space-between;
}

.downloads > p > img {
    height: 1rem;
}

.downloads > hr {
    margin: 0.25rem 0;
    border: 1px solid var(--bg);
}

.hspreadblock {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

div.callout {
    background: var(--callout);
    border: 1px solid var(--calloutb);
}

div.callout > svg.icon {
    min-width: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    align-self: center;
    color: var(--colgr);
}

div.callout.callout-q > svg.icon {
    align-self: baseline;
}

div.callout.callout-i {
    background: var(--icallout);
    border: 1px solid var(--icalloutb);
}

div.callout.callout-i > svg.icon {
    color: var(--icalloutb);
}

div.callout.callout-s {
    background: var(--scallout);
    border: 1px solid var(--scalloutb);
}

div.callout.callout-s > svg.icon {
    color: var(--scalloutb);
}

div.callout.callout-w {
    background: var(--wcallout);
    border: 1px solid var(--wcalloutb);
}

div.callout.callout-w > svg.icon {
    color: var(--wcalloutb);
}

div.callout.callout-d {
    background: var(--dcallout);
    border: 1px solid var(--dcalloutb);
}

div.callout.callout-d > svg.icon {
    color: var(--dcalloutb);
}

.media {
    margin-top: 1rem;
    width: fit-content;
    max-height: 20rem;
    max-width: 100%;
    border-radius: 0.5rem;
}

.emoji {
    height: 1.3em;
    border-radius: 0;
    vertical-align: sub;
}

.flag {
    width: 1.3em;
    height: 1.3em;
    border-radius: 0;
    vertical-align: sub;
}

.avt {
    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;
    vertical-align: text-bottom;
}

.iflex {
    display: inline-flex;
    gap: 0.3rem;
}

.spread {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

small {
    font-size: 0.9em;
}

.heading {
    width: fit-content;
    display: flex;
    white-space: pre;
}

.heading:has(code) {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.heading-link {
    visibility: hidden;
    width: 1em;
    margin-left: -1em;
    color: var(--colgr) !important;
    position: absolute;
    align-self: center;
}

.heading-anchor {
    display: flex;
    width: 0;
    height: 4.7rem;
    margin-top: -4.7rem;
    visibility: hidden;
}

.heading:hover > .heading-link {
    visibility: visible;
}

svg.discord-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--colw);
    /*color: #5865f2;*/
}

.cliptext {
    text-overflow: ellipsis;
    text-wrap: nowrap;
    overflow-x: clip;
}

.button-row {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
}

.button-row > a {
    background-color: var(--bg);
    padding: 0.3em 0.5em;
    border-radius: 0.3em;
}

.button-row > a:hover, .button-row > a.current {
    background-color: var(--navhoverbg);
}

ul, ol {
    margin-top: 0;
    margin-bottom: 0;
}