/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
HTML content. To learn how to do something, just try searching Google for questions like
"how to change link color." */

:root {
    /* Catppuccin Mocha (Dark Theme) (Default) */
    --rosewater: #f5e0dc;
    --flamingo: #f2cdcd;
    --pink: #f5c2e7;
    --mauve: #cba6f7;
    --red: #f38ba8;
    --maroon: #eba0ac;
    --peach: #fab387;
    --yellow: #f9e2af;
    --green: #a6e3a1;
    --teal: #94e2d5;
    --sky: #89dceb;
    --sapphire: #74c7ec;
    --blue: #89b4fa;
    --lavender: #b4befe;
    --text: #cdd6f4;
    --subtext1: #bac2de;
    --subtext0: #a6adc8;
    --overlay2: #9399b2;
    --overlay1: #7f849c;
    --overlay0: #6c7086;
    --surface2: #585b70;
    --surface1: #45475a;
    --surface0: #313244;
    --base: #1e1e2e;
    --mantle: #181825;
    --crust: #11111b;
}

:root:has(#theme-toggle:checked) {
    /* Catppuccin Latte (Light Theme) */
    --rosewater: #dc8a78;
    --flamingo: #dd7878;
    --pink: #ea76cb;
    --mauve: #8839ef;
    --red: #d20f39;
    --maroon: #e64553;
    --peach: #fe640b;
    --yellow: #df8e1d;
    --green: #40a02b;
    --teal: #179299;
    --sky: #04a5e5;
    --sapphire: #209fb5;
    --blue: #1e66f5;
    --lavender: #7287fd;
    --text: #4c4f69;
    --subtext1: #5c5f77;
    --subtext0: #6c6f85;
    --overlay2: #7c7f93;
    --overlay1: #8c8fa1;
    --overlay0: #9ca0b0;
    --surface2: #acb0be;
    --surface1: #bcc0cc;
    --surface0: #ccd0da;
    --base: #eff1f5;
    --mantle: #e6e9ef;
    --crust: #dce0e8;
}

/* basically global */
body {
    --bg: var(--surface0);
    --bg2: var(--mantle);
    background: var(--bg2);
    color: var(--text);
    margin-top: 0;
}

/* few more global styles */
/* url */
a { 
    color: var(--blue);
}
/* list */
ul {
    list-style-position: inside;
    padding-left: 0;
}

/* content other than marquee */
/* basically hbox container */
.content {
    display: flex;
    gap: 4px;
    scrollbar-width: none;
    height: 100%;
}

/* center box */
.main {
    background: var(--bg);
    padding: 20px;
    padding-top: 0px;
    height: calc(100vh - 68px); 
    overflow-y: auto;
    width: 100%;
    border: 4px solid var(--bg2);
    margin: 4px;
    box-shadow: 
        0 0 0 4px var(--bg),
        0 0 0 4px var(--bg2);
}


.sidebar-left {
    flex-shrink: 0;
    /* position: sticky; */
    /* top: 24px; */
    height: calc(100vh - 40px); /* Fill the screen height */
    overflow-y: auto; /* Internal scroll ONLY if the menu is huge */
    background: var(--bg2);
    width: fit-content; /* Fixed width for stability */
    border: 4px solid var(--bg);
}
.nav-bar {
    padding: 20px;
    padding-top: 0px;
}


.sidebar-right {
    padding: 0px;
    background: var(--bg2);
    height: 100%;

    border: 4px solid var(--bg);

    /* position: sticky; */
    top: 24px;
    background: var(--bg2);
    width: fit-content;
    border: 4px solid var(--bg);
}

.theme-button {
    display: inline-block;
    color: var(--blue);
    cursor: pointer;
    user-select: none;
    padding: 10px;
    width: 93%;

    border-bottom: 4px solid var(--bg);
}

.etc {
    padding: 20px;
}