/* ----------------------------------------------------------- */
/* --------------------------- ROOT -------------------------- */
/* ----------------------------------------------------------- */
:root {
    /* Font Families */
    --roboto-font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --roboto-condensed-font: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --roboto-semi-condensed-font: "Roboto Semi-Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --source-code-pro-font: "Source Code Pro", "Consolas", "Monaco", "Courier New", monospace;

    /* Button Styles */
    --button-color: #FFFFFF;
    --button-bg-color: #009ce8;
    --button-border: 0px;
    --button-border-radius: 14px;
    --button-hover-color: #FFFFFF;
    --button-hover-bg-color: #0090de;
    --button-hover-border: 0px;

    /* Line Heights */
    --line-height-xs: 1;
    --line-height-s: 1.2;
    --line-height-m: 1.3;
    --line-height-l: 1.5;
    --line-height-xl: 1.7;

    /* Post Content */
    --post-content-p-margin: 16px;
}


/* ----------------------------------------------------------- */
/* --------------- Box Sizing and Transitions ---------------- */
/* ----------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: inherit;
    transition: all 0.16s;
}

/* ----------------------------------------------------------- */
/* ------------------------- LIGHT --------------------------- */
/* ----------------------------------------------------------- */
html, html[theme="light"] {
    box-sizing: border-box;
    scrollbar-gutter: stable;

    --bg-color: #ffffff;
    --text-color: #0C1014;
    --text-color-secondary: #6A717A;

    /* Cards and Post */
    --divider-color: #DBDFE4;
    --code-bg-color: #2E3440;
    --code-inline-color: #EB5757;
    --code-inline-bg-color: #F4F4F5;

    /* Links */
    --link-color: #009ce8;
    --link-hover-color-my: #009ce8;
    --visited-link-color: #009ce8;
    --link-active-color: #0076ba;

    /* Navigation Button */
    --button-nav-color: #0C1014;
    --button-nav-bg-color: transparent;
    --button-nav-hover-color: #0C1014;
    --button-nav-hover-bg-color: #F3F3F3;

    /* Select */
    --input-border: solid 1px #DBDFE4;
    --input-border-focus: solid 1px #0C1014;
}


/* ----------------------------------------------------------- */
/* -------------------------- DARK --------------------------- */
/* ----------------------------------------------------------- */
html[theme="dark"] {
    scrollbar-gutter: stable;

    --bg-color: #0C1014;
    --text-color: #F5F5F5;
    --text-color-secondary: #A7A7A7;

    /* Cards and Post */
    --divider-color: #2B3036;
    --code-bg-color: #141b23;
    --code-inline-color: #EB5757;
    --code-inline-bg-color: #1f2936;

    /* Links */
    --link-color: #009ce8;
    --link-hover-color-my: #009ce8;
    --visited-link-color: #009ce8;
    --link-active-color: #0076ba;

    /* Navigation Button */
    --button-nav-color: #F5F5F5;
    --button-nav-bg-color: transparent;
    --button-nav-hover-color: #F5F5F5;
    --button-nav-hover-bg-color: #25282C;

    /* Select */
    --input-border: solid 1px #2B3036;
    --input-border-focus: solid 1px #F8F9F9;
}

/* ----------------------------------------------------------- */
/* --------------------------- BODY -------------------------- */
/* ----------------------------------------------------------- */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: var(--roboto-font);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.01rem;   /* Adds extra space between letters */
    line-height: var(--line-height-m);
    color: var(--text-color);
    background-color: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


/* ----------------------------------------------------------- */
/* ------------------------ RESPONSIVE ----------------------- */
/* ----------------------------------------------------------- */
@media (max-width: 1024px) {
}


@media (max-width: 570px) {
}