@import url(../fonts/prompt/prompt.css);

:root {
    /* Themes Colors */
    --background-color-light-theme-1: #ffffff;
    /* --background-color-light-theme-1: #FEF6E4; */
    --background-color-dark-theme-1: #151515;
    
    --background-color-light-theme-2: #f1f1f1;
    /* --background-color-light-theme-2: #FEF6E4; */
    --background-color-dark-theme-2: #0e0e0e;

    --text-color-light-theme: #1b1b1b;
    --text-color-dark-theme: #f1f1f1;

    --text-color-faded-light-theme: #808080;
    --text-color-faded-dark-theme: #898989;

    --highlight-color-light-theme: #008B8B;
    --highlight-color-dark-theme: #65BED4;

    --redirection-color-light-theme: #E79A00;
    --redirection-color-dark-theme: #F2BF4A;
    
    --highlight-color-transparent-light-theme: #65bed44f;
    --highlight-color-transparent-dark-theme: #008B8B4f;
    
    --hover-background-color-light-theme: #c1c1c1;
    --hover-background-color-dark-theme: #2b2b2b;
    
    --border-color-light-theme: #adadad;
    --border-color-dark-theme: #2d2d2d;

    --external-link-icon-light: url(../medias/icons/external-link-icon-light.svg);
    --external-link-icon-dark: url(../medias/icons/external-link-icon-dark.svg);

    --code-color-light-theme: #e700d8;
    --code-color-dark-theme: #f0b0ec;

    
    /* Variables */
    --background-color-1: light-dark(var(--background-color-light-theme-1), var(--background-color-dark-theme-1));
    --background-color-2: light-dark(var(--background-color-light-theme-2), var(--background-color-dark-theme-2));
    --body-text-color: light-dark(var(--text-color-light-theme), var(--text-color-dark-theme));
    --body-text-color-faded: light-dark(var(--text-color-faded-light-theme), var(--text-color-faded-dark-theme));
    --highlight-color: light-dark(var(--highlight-color-light-theme), var(--highlight-color-dark-theme));
    --highlight-color-transparent: light-dark(var(--highlight-color-transparent-light-theme), var(--highlight-color-transparent-dark-theme));
    --redirection-color: light-dark(var(--redirection-color-light-theme), var(--redirection-color-dark-theme));
    --code-color: light-dark(var(--code-color-light-theme), var(--code-color-dark-theme));
    --hover-background-color: light-dark(var(--hover-background-color-light-theme), var(--hover-background-color-dark-theme));
    --border-color: light-dark(var(--border-color-light-theme), var(--border-color-dark-theme));
    --documentation-link-icon: url(../medias/godot-docs-icon.ico);
    --code-color: light-dark(var(--code-color-light-theme), var(--code-color-dark-theme));
    --header-size: 80px;
}

::-webkit-scrollbar {
    display: none;
}

body {
    font-family: prompt;
    font-weight: 300;
    background-color: var(--background-color-2);
    color: var(--body-text-color);
    display: flex;
    flex-direction: column;

    padding: 0;
    margin: 0;
}


body.light {
    color-scheme: light;
    --external-link-icon: var(--external-link-icon-light);
}

body.dark {
    color-scheme: dark;
    --external-link-icon: var(--external-link-icon-dark);
}

wc-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.content {
    display: flex;
    flex-direction: row;
    max-width: 100vw;
    justify-content: center;
}

.article {
    flex: 1;
    max-width: 850px;
    padding: 30px 30px;
    min-width: 0;
}

right-panel, left-panel {
    position: sticky;
    top: 50px;
    height: fit-content;
}

right-panel {
    right: 0;
}

left-panel {
    left: 0;
    width: max-content;
}

bottom-hierarchy {
    display: none;
}


@media only screen and (max-width: 1350px) {
    right-panel {
        display: none;
    }

    bottom-hierarchy {
        display: contents;
    }
}

@media screen and (max-width: 1000px) {
    left-panel {
        display: none;
    }

    .article {
        padding: 0px;
        padding-bottom: 30px;
    }

    .content {
        justify-content: center;
    }
}