/* https://github.com/elad2412/the-new-css-reset v1.11.1 */
/* custom styles for: pre, code */

*:where(:not(html, iframe, canvas, img, svg, video, audio, pre, code):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

a, button {
  cursor: revert;
}

ol, ul, menu, summary {
  list-style: none;
}

img {
  max-inline-size: 100%;
  max-block-size: 100%;
}

table {
  border-collapse: collapse;
}

input, textarea {
    -webkit-user-select: auto;
}

textarea {
    white-space: revert;
}

meter {
    -webkit-appearance: revert;
    appearance: revert;
}

:where(pre) {
  all: revert;
  box-sizing: border-box;
}

::placeholder {
  color: unset;
}

::marker {
    content: initial;
    font-weight: bold;
}

:where([hidden]) {
  display: none;
}

:where([contenteditable]:not([contenteditable="false"])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}

:where([draggable="true"]) {
  -webkit-user-drag: element;
}

:where(dialog:modal) {
  all: revert;
  box-sizing: border-box;
}

pre, code {
  margin: 0;
}

::-webkit-details-marker {
  display: none;
}
:root {
    --padding: 12px;
    --padding_d2: 6px;
    --padding_x2: 24px;
    --border-radius: 4px;

    /* Primary */
    /* --soft-dark: #181820; */
    --soft-dark-transparent: #181820e5;
    /* --dark: rgb(19, 19, 26); */
    --dark-transparent: rgba(19, 19, 26, 0.93);
    --dark-hover: rgba(57, 57, 76, 0.25);       /* --vscode-list-inactiveSelectionBackground; */
    --darker: rgb(11, 11, 15);
    --darker-transparent: rgb(11, 11, 15, 0.93);
    --white: #c8c8d5;                           /* --vscode-list-activeSelectionForeground; --vscode-list-inactiveSelectionForeground */
    --white-small-fade: #a4a4b6;                /*--vscode-list-focusForeground */
    --white-fade: rgba(171, 171, 191, 0.8);     /* --vscode-breadcrumb-foreground */

    /* Body */
    --body-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    /* Home Main */
    --home-title-1: var(--white);
    --home-title-2: #866ee7;
    --home-description: var(--white-small-fade);
    --home-button-text: var(--white);

    /* Highlight */
    --highlight-bg: #f5d41f;
    --highlight-text: #130606;
    --highlight-hover-bg: #f3db53;
    --highlight-hover-text: #0c0b0b;

    /* Site Logo */
    --logo-font: "Arial", serif;
    --logo-border: rgba(225, 225, 225, .1);

    /* Left Sidebar */
    --left-sidebar-bg: var(--dark-transparent);
    --left-sidebar-border: var(--darker);
    --left-sidebar-border-details: var(--white);
    --left-sidebar-text: var(--white-small-fade);
    --left-sidebar-text-title-close: var(--white-small-fade);
    --left-sidebar-text-title-open: var(--white);
    --left-sidebar-bg-hover: var(--dark-hover); 
    --left-sidebar-text-hover: var(--white);

    /* Right Sidebar */
    --right-sidebar-bg: var(--soft-dark-transparent);
    --right-sidebar-border: var(--darker);
    --right-sidebar-border-details: var(--white);
    --right-sidebar-text-top: var(--white);
    --right-sidebar-h2: var(--white-small-fade);
    --right-sidebar-h3: var(--white-fade);
    --right-sidebar-hover-bg: var(--dark-hover); 
    --right-sidebar-hover-h2: var(--white);
    --right-sidebar-hover-h3: var(--white-small-fade);

    /* Central */
    --central-bg: var(--soft-dark-transparent);

    /* Central Header Buttons */
    --header-button-bg: var(--dark-transparent);
    --header-button-border: var(--darker);
    --header-button-text: var(--white);
    --header-button-hover-bg: var(--dark-hover);
    --header-button-hover-text: var(--white);

    /* Central Footer */
    --footer-bg-hover: var(--dark-hover);
    --footer-text: var(--white);

    /* Previous Next */
    --prev-next-bg: var(--dark-transparent);
    --prev-next-border: var(--darker);
    --prev-next-text: var(--white);
    --prev-next-hover-bg: var(--dark-hover);

    /* _Note */
    --note-headers: var(--white);
    --note-title: var(--white);
    --note-text: var(--white);

    /* _Note Subtitle */
    --note-subtitle: rgba(171, 171, 191, 0.8);

    /* Checkbox */
    --checkbox-border: #555;

    /* Table */
    --table-border: var(--white);
    --table-scrollbar: #f1f1f1;

    /* Hyperlink */
    --hyperlink: #7ad0ec;
    --hyperlink-hover: #6cbcd6;

    /* Line Emphasis */
    --line-emphasis: rgba(0, 128, 0, 0.258);

    /* Strike-through */
    --strikethrough: red;
    --table-strikethrough: #8c8c8c;


    /* Code */
    --code-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Code Inline */
    --code-inline-bg: #22262e;
    --code-inline-text: #bad3ac;

    /* Code Block */
    --code-bg: #22262e;
    --code-text: var(--white);
    --code-comment: #9893a5;
    --code-tag: #b4637a;
    --code-variable: #d7827e;
    --code-builtin: #ea9d34;
    --code-selector: #56949f;
    --code-title: #56949f;
    --code-keyword: #907aa9;
    --code-string: #286983;
    --code-function-names: #d7827e;
    --code-punctuation: #575279;

    /* Block Quote */
    --blockquote-info-backgound: #954ce3;
    --blockquote-info-foreground: rgba(0, 0, 0, .08);
    --blockquote-info-color: #ffffff;
    --blockquote-info-anchor: #d2aefc;
    --blockquote-info-anchor-text-shadow: .4px 0 .8px black;
}
/* ROOT */
    html {
        scroll-behavior: smooth;
        scroll-padding: 2em;
    }

    /* Chrome, Safari, Edge: Scrollbar */
    html::-webkit-scrollbar {
        height: 12px;
    }
    html::-webkit-scrollbar-track {
        background: var(--table-scrollbar);
        border-radius: 6px;
    }
    html::-webkit-scrollbar-thumb {
        background: var(--highlight-bg);
        border-radius: 6px;
    }
    html::-webkit-scrollbar-thumb:hover {
        background: var(--checkbox-border);
    }

    body {
        display: flex;
        flex-direction: column;
        min-height: 100svh;

        font-family: var(--body-font);

        background-image: url("/assets/bg.png");
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        background-size: cover;
    }




/* MAIN */
    main {
        background: var(--central-bg);

        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    main > section {
        display: flex;
    }

    main > section {
        display: flex;
        flex-direction: column;
    }


    /* TITLE */

    main > section > header {
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 25px 36px 60px;
    }

    /* Title */
    main > section > header > h1 {
        color: transparent;
        background: linear-gradient(45deg, #866ee7, #ea60da, #ed8f57, #fbd41d, #2cca91);

        filter: drop-shadow(8px 8px 12px rgba(0, 0, 0, 0.8));
        background-clip: text;
        -webkit-background-clip: text;

        font-family: var(--logo-font);
        font-size: 6em;
        font-weight: 800;
        letter-spacing: 3px;

        /* text-transform: uppercase; */
        padding-bottom: calc(var(--padding)*1.2);
    }


    /* Secondary title */
    main > section > header > h1 > span {
        color: var(--home-title-2);
    }

    /* Description */
    main > section > header > p {
        color: var(--home-description);
        font-size: 1.6em
    }

    /* WIP message */
    #wip-msg {
        padding-top: 20px;
    }


    /* MAIN BUTTONS */

    main > section > div {
        color: var(--home-button-text);

        display: flex;
        justify-content: center;
        gap: 60px;
    }

    main > section > div > .btn {
        background: var(--highlight-bg);
        color: var(--highlight-text);

        border-radius: 4px;
        font-size: 1.5em;
        padding: .4em 1em;
    }

    main > section > div > .btn:hover {
        background: var(--highlight-hover-bg);
        color: var(--highlight-hover-text);
    }


/* HEADER */
    body > header {
        background: var(--left-sidebar-bg);
        border-bottom: 1px solid var(--left-sidebar-border);
    }

    body > header > a {
        display: inline-block;
        padding: var(--padding);
    }


/* BUTTON CHANGE THEME */
/*     #button-color-theme {
        display: flex;

        position: absolute;
        top: 20px;
        right: 60px;

        font-size: 1.175em;
        font-weight: 800;

        padding: var(--padding_d2);
        
        color: var(--header-button-text);
        background: var(--header-button-bg);
        border: 1px solid var(--header-button-border);

        border-radius: var(--border-radius);
        gap: var(--padding_d2);
        cursor: pointer;
        user-select: none;
    }

    #button-color-theme:hover, #button-color-theme:focus {
        background: var(--header-button-hover-bg);
        color: var(--header-button-hover-text);
    } */


/* CENTRAL FOOTER */
    #central-footer {
        background: var(--central-bg);
        color: var(--footer-text);

        display: flex;
        justify-content: center;

        padding: 25px 12px 25px 12px;

        gap: var(--padding_d2);
    }

    #central-footer > a {
        background: var(--highlight-bg);
        color: var(--highlight-text);

        border-radius: var(--border-radius);
        cursor: pointer;
        padding: 0 var(--padding_d2);
    }


/* Mobile */
@media (orientation: portrait) {    
    main > section {
        font-size: smaller;
    }

    #central-footer {
        font-size: x-small;
    }
}