@import url('https://fonts.googleapis.com/css2?family=Caudex:wght@400;700&display=swap');


/* =========================
   THEME VARIABLES
========================= */


body {

    --background: #111;
    --text: #eeeeee;
    --container: rgba(20,20,20,0.75);
    --container-border: rgba(255,255,255,0.15);
    --accent: #ffcc66;
    --code-bg: rgba(0,0,0,0.45);
    --button-bg: rgba(255,255,255,0.12);

}




body[data-theme="light"] {

    --background: #eeeeee;
    --text: #222;
    --container: rgba(255,255,255,0.75);
    --container-border: rgba(0,0,0,0.15);
    --accent: #444;
    --code-bg: rgba(0,0,0,0.08);
    --button-bg: rgba(0,0,0,0.1);

}




body[data-theme="amoled"] {

    --background: #000;
    --text: #fff;
    --container: rgba(10,10,10,0.8);
    --container-border: rgba(255,255,255,0.08);
    --accent: #00ffff;
    --code-bg: #050505;
    --button-bg: rgba(255,255,255,0.08);

}




body[data-theme="gruvbox"] {

    --background: #282828;
    --text: #ebdbb2;
    --container: rgba(60,56,54,0.8);
    --container-border: #665c54;
    --accent: #fabd2f;
    --code-bg: #1d2021;
    --button-bg: #504945;

}




body[data-theme="dracula"] {

    --background: #282a36;
    --text: #f8f8f2;
    --container: rgba(68,71,90,0.8);
    --container-border: #6272a4;
    --accent: #ff79c6;
    --code-bg: #21222c;
    --button-bg: #44475a;

}

body[data-theme="dracula"] {

    --background: #282a36;
    --text: #f8f8f2;
    --container: rgba(68,71,90,0.8);
    --container-border: #6272a4;
    --accent: #ff79c6;
    --code-bg: #21222c;
    --button-bg: #44475a;

}


body[data-theme="bloodmoon"] {

    --background: #120608;

    --text: #f7e9e9;

    --container: rgba(38, 12, 18, 0.82);

    --container-border: #7a2c38;

    --accent: #d9485f;

    --code-bg: #1b0b0d;

    --button-bg: rgba(120, 30, 45, 0.25);

}


body[data-theme="laserwave"] {

    --background: #1b1025;
    --text: #f4f4f4;
    --container: rgba(52,32,74,0.8);
    --container-border: #b381ff;
    --accent: #ff71ce;
    --code-bg: #140d1d;
    --button-bg: #34204a;

}

body[data-theme="darkorange"] {

    --background: #120b05;

    --text: #f5e6d3;

    --container: rgba(45, 25, 10, 0.82);

    --container-border: #8a4b16;

    --accent: #ff8c1a;

    --code-bg: #1c1008;

    --button-bg: rgba(180, 90, 20, 0.25);

}



body[data-theme="tokyonight"] {

    --background: #1a1b26;
    --text: #c0caf5;
    --container: rgba(36,40,59,0.85);
    --container-border: #414868;
    --accent: #7aa2f7;
    --code-bg: #16161e;
    --button-bg: #24283b;

}




/* =========================
   GLOBAL
========================= */


* {

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    margin:0;

    font-family:
    'Caudex',
    serif;

    color:var(--text);

    background:
    var(--background);

}




.background {

    position:fixed;

    inset:0;

    background-image:
    url("background.png");

    background-size:
    400px 225px;

    background-repeat:
    repeat;

    opacity:
    0.25;

    z-index:-1;

}

/* =========================
   HEADER / TOP CONTAINER
========================= */


.site-header {

    width:90%;

    max-width:1100px;

    margin:
    30px auto;

    padding:25px;

    text-align:center;

    background:
    var(--container);

    border:
    1px solid var(--container-border);

    border-radius:18px;

    backdrop-filter:
    blur(8px);

}




.site-header h1 {

    margin-top:0;

    color:
    var(--accent);

}





/* =========================
   CONTROLS
========================= */


.controls {

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    gap:12px;

}





.controls button,
.theme-menu button {

    cursor:pointer;

    padding:

    10px 16px;

    border-radius:

    12px;

    border:

    1px solid var(--container-border);

    background:

    var(--button-bg);

    color:

    var(--text);

    font-family:inherit;

    font-size:16px;

    transition:

    0.2s;

}





.controls button:hover,
.theme-menu button:hover {

    transform:
    scale(1.05);

    border-color:
    var(--accent);

}





.theme-menu {

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:8px;

    width:100%;

    margin-top:15px;

}





.views,
.music,
.routine {

    padding:

    8px 12px;

    background:

    rgba(255,255,255,0.08);

    border-radius:

    10px;

}





.routine a {

    color:
    var(--accent);

    text-decoration:none;

}





/* =========================
   MAIN CONTENT
========================= */


.content-container {

    width:90%;

    max-width:1300px;

    margin:
    0 auto 50px auto;

}




section {

    margin-bottom:

    45px;

}




#guide {

    background:

    rgba(20,20,20,0.50);

    padding:

    30px;

    border-radius:

    20px;

    border:

    1px solid var(--container-border);

    backdrop-filter:

    blur(6px);

}





/* =========================
   MIRROR LINKS
========================= */


.mirror-links {

    text-align:center;

    font-size:

    1.2rem;

    margin-bottom:

    20px;

}




.mirror-links a {

    color:

    var(--accent);

    text-decoration:none;

}





.mirror-links a:hover {

    text-decoration:underline;

}





/* =========================
   OS BUTTONS
========================= */


.os-buttons {

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:

    12px;

    margin:

    25px 0;

}





.os-buttons a {

    padding:

    12px 18px;

    border-radius:

    12px;

    background:

    var(--button-bg);

    color:

    var(--text);

    text-decoration:none;

    border:

    1px solid var(--container-border);

}





.os-buttons a:hover {

    border-color:

    var(--accent);

}

/* =========================
   TEXT
========================= */


h2,
h3,
h4,
h5 {

    color:
    var(--accent);

}



p {

    line-height:
    1.9;

    font-size:
    1.4rem;

}



a {

    color:

    var(--accent);

}





blockquote {

    background:
    rgba(0,0,0,0.25);

    border-left:
    4px solid var(--accent);

    padding:
    25px;

    border-radius:
    12px;

    font-size:
    1.3rem;

    line-height:
    1.8;

}




hr {

    border:

    0;

    border-top:

    1px solid var(--container-border);

    margin:

    35px 0;

}





img {

    max-width:

    100%;

    display:

    block;

    margin:

    25px auto;

    border-radius:

    12px;

}





/* =========================
   REAL COPY BLOCKS
========================= */


.code-box {

    position:

    relative;

    background:

    var(--code-bg);

    border:

    1px solid var(--container-border);

    border-radius:

    12px;

    margin:

    20px 0;

    overflow:

    hidden;

}





.code-box pre {

    margin:

    0;

    padding:

    20px;

    overflow-x:

    auto;

}





.code-box code {

    font-family:

    monospace;

    color:

    var(--text);

}





.copy-button {

    position:

    absolute;

    top:

    8px;

    right:

    8px;


    padding:

    6px 12px;


    border-radius:

    8px;


    border:

    1px solid var(--container-border);


    background:

    var(--button-bg);


    color:

    var(--text);


    cursor:pointer;


    z-index:2;

}





.copy-button:hover {

    background:

    var(--accent);

    color:

    #000;

}





/* =========================
   NORMAL PRE BLOCKS
   (not copy-paste)
========================= */


pre:not(.code-box pre) {

    background:

    var(--code-bg);

    padding:

    15px;

    border-radius:

    10px;

    overflow-x:

    auto;

}





/* =========================
   BACK TO TOP
========================= */


.top-button {

    display:

    block;

    width:

    fit-content;

    margin:

    40px auto;


    padding:

    18px 35px;


    font-size:

    1.4rem;


    font-weight:

    bold;


    border-radius:

    15px;


    background:

    var(--button-bg);


    border:

    2px solid var(--accent);


    color:

    var(--accent);


    text-decoration:

    none;


    transition:

    0.2s;

}





.top-button:hover {

    background:

    var(--accent);

    color:

    #000;

    transform:

    scale(1.08);

}

/* =========================
   FOOTER
========================= */


footer {

    width:

    90%;

    max-width:

    1000px;

    margin:

    0 auto 30px auto;

    text-align:

    center;

    padding:

    20px;


    background:

    var(--container);


    border:

    1px solid var(--container-border);


    border-radius:

    15px;


    backdrop-filter:

    blur(8px);

}





/* =========================
   FOCUS MODE
========================= */


body.focus-mode .content-container section:not(#guide) {

    display:

    none;

}





body.focus-mode #guide {

    max-width:

    700px;

    margin:

    auto;

}





body.focus-mode .site-header {

    opacity:

    0.25;

}





.focus-active {

    background:

    var(--accent) !important;

    color:

    #000 !important;

}





/* =========================
   THEME MENU ANIMATION
========================= */


.theme-menu {

    animation:

    fadeIn .3s ease;

}





@keyframes fadeIn {

    from {

        opacity:0;

        transform:translateY(-10px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }

}





/* =========================
   MOBILE
========================= */


@media(max-width:700px) {


    .site-header,
    #guide,
    .content-container {

        width:

        95%;

    }




    .site-header {

        padding:

        18px;

    }




    .site-header h1 {

        font-size:

        1.5rem;

    }




    .controls {

        flex-direction:

        column;

    }




    .os-buttons {

        flex-direction:

        column;

    }




    .os-buttons a {

        text-align:

        center;

    }




    .mirror-links {

        font-size:

        1rem;

        line-height:

        2;

    }




    .top-button {

        font-size:

        1.2rem;

        padding:

        15px 25px;

    }


}


body::before {

    content: "";

    position: fixed;

    inset: 0;

    background-image:
    url("assets/background.gif");

    background-size:
    400px 225px;

    background-position:
    center;

    background-repeat:
    repeat;

    opacity:
    0.18;

    z-index:
    -2;

    pointer-events:
    none;

}


.os-title {

    font-size:
    2.4rem;

    text-align:
    center;

    margin-top:
    40px;

    margin-bottom:
    25px;

    font-weight:
    700;

    letter-spacing:
    1px;

}

.section-title {

    font-size:
    2.5rem;

    text-align:
    center;

    margin-top:
    55px;

    margin-bottom:
    35px;

    font-weight:
    700;

    letter-spacing:
    1px;

}

.section-title {

    font-size:
    2.5rem;

    text-align:
    center;

    margin:
    55px 0 35px;

    font-weight:
    700;

    color:
    var(--accent);

}

body[data-theme="bloodmoon"] {

    --background: #120608;

    --text: #f7e9e9;

    --container: rgba(38, 12, 18, 0.82);

    --container-border: #7a2c38;

    --accent: #d9485f;

    --code-bg: #1b0b0d;

    --button-bg: rgba(120, 30, 45, 0.25);

}

body {

    cursor:
    url("assets/cursor.png"),
    auto;

}

/* =========================
   THEMED SCROLLBAR
========================= */


html {

    scrollbar-color:
    var(--accent)
    var(--background);

    scrollbar-width:
    auto;

}



::-webkit-scrollbar {

    width:
    16px;

    height:
    16px;

}



::-webkit-scrollbar-track {

    background:
    var(--background);

}



::-webkit-scrollbar-thumb {

    background:
    var(--accent);

    border-radius:
    12px;

    border:
    3px solid var(--background);

}



::-webkit-scrollbar-thumb:hover {

    background:
    var(--text);

}

/* =========================
   FREELIFE STREAK
========================= */


.freelife-streak {

    max-width:
    500px;

    margin:
    40px auto;

    padding:
    35px;

    text-align:
    center;

    background:
    var(--container);

    border:
    1px solid var(--container-border);

    border-radius:
    25px;

    backdrop-filter:
    blur(12px);

    box-shadow:
    0 0 30px rgba(0,0,0,.25);

}



.streak-header {

    font-size:
    2.4rem;

    font-weight:
    900;

    color:
    var(--accent);

    text-shadow:
    0 0 15px var(--accent);

    margin-bottom:
    20px;

}



.streak-day {

    font-size:
    1.8rem;

    font-weight:
    700;

    color:
    var(--text);

}



.streak-day span {

    display:
    block;

    font-size:
    5rem;

    line-height:
    1;

    margin:
    15px 0;

    color:
    var(--accent);

    font-weight:
    1000;

    text-shadow:
    0 0 25px var(--accent);

}



.streak-subtitle {

    color:
    var(--text);

    opacity:
    .8;

    font-size:
    1.1rem;

}



.streak-settings {

    display:
    flex;

    justify-content:
    center;

    gap:
    12px;

    margin-top:
    25px;

}



.streak-settings input {

    width:
    130px;

    padding:
    14px;

    border-radius:
    12px;

    border:
    1px solid var(--container-border);

    background:
    var(--code-bg);

    color:
    var(--text);

    text-align:
    center;

    font-size:
    18px;

}



.streak-settings button {

    padding:
    14px 25px;

    border-radius:
    12px;

    border:
    1px solid var(--accent);

    background:
    var(--button-bg);

    color:
    var(--accent);

    font-weight:
    800;

    cursor:
    pointer;

}



.streak-settings button:hover {

    background:
    var(--accent);

    color:
    var(--background);

}



.streak-status {

    margin-top:
    20px;

    opacity:
    .75;

}



/* =========================
   MOBILE
========================= */


@media(max-width:600px){


    .freelife-streak {

        width:
        calc(100% - 30px);

        padding:
        25px 15px;

    }


    .streak-header {

        font-size:
        1.8rem;

    }


    .streak-day span {

        font-size:
        4rem;

    }


    .streak-settings {

        flex-direction:
        column;

        align-items:
        center;

    }


    .streak-settings input,
    .streak-settings button {

        width:
        90%;

        max-width:
        300px;

        height:
        50px;

    }

}