@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Material+Icons&family=Material+Icons+Round&family=Varela+Round&display=swap');

body {
    --primary: #0062ef;
    --primary-variable: #0062ef;
    --primary-accent: #478ff6;
    --primary10: #0062EF0D;
    --primary20: #0062ef22;
    --primary50: #0062ef80;
    --primary-hover: #4b90f4;
    --primary-gradient-color: #7fa6ff;
    --primary-filter: invert(.5) sepia(1) saturate(60) hue-rotate(206deg);
    --secondary: #ff7d28;
    --secondary50: #ff7d2888;
    --default-filter: invert(0.2);
    --time-color: #dbeaff;
    --bg: #edf4fe;
    --bg-dark: #DAE9FF;
    --bg-dark50: #dae9ff88;
    --bg-dark2: #b0cbff;
    --bg-dark3: #80abff;
    --bg-dark350: #80abff88;
    --bg-dark2-50: #b0cbff88;
    --bg-darker: #d0e3ff;
    --bg-darker50: #d0e3ff50;
    --bg-darker80: #d0e3ff21;
    --card-bg: #f6f9fd;
    --card-bg20: #f5f9ff22;
    --card-bg50: #f5f9ff88;
    --card-bg80: #f5f9ffcc;
    --card-bg-top: #ffffff;
    --card-bg-top50: #ffffff88;
    --card-bg-top80: #ffffffcc;
    --card-bg-warning: #ffd9e5;
    --card-bg-warning50: #ffd9e588;
    --card-border: #e9ebf2;
    --card-border50: #e9ebf288;
    --green: #9eff21;
    --color1: #4dc4ff;
    --color2: #ff7d28;
    --color3: #35f74e;
    --color4: #fcb35d;
    --color1gradient: #51e3fd;
    --color2gradient: #ffbc79;
    --color3gradient: #62f9a4;
    --color1-dark: #bae5fb;
    --color2-dark: #ffedd5;
    --color3-dark: #a9f5b3;
    --color4-dark: #ffedd5;
    --light-filter: 1;
    --warning: #FF195F;
    --warning10: #ff195f0d;
    --warning20: #ff195f3d;
    --warning50: #ff195f80;
    --warning80: #ff195faa;
    --warning-text: #980330;
    --warning-hover: #FF6D99;
    --warning-mute: #ffdae5;
    --card-bg-warning: #ffd9e5;
    --warning-mute50: #ffdae588;
    --warning-text: #ff195f;
    --accept: #6bef01;
    --accept-text: #57b90a;
    --accept-hover: #AEFF6D;
    --accept50: #6bef0180;
    --accept-mute: #c4febe;
    --alert: #ff0068;
    --alert50: #ff006880;
    --worse: #ff0068;
    --bad: #ffc800;
    --good: #42ff5e;
    --better: #43ef31;
    --label-text: #b0cbff;
    --element-bg: #ffffff;
    --input-text: #7ea3e9;
    --default: #ffffff;
    --default-hover: var(--card-border);
    --text-light: white;
    --text-dark: #223045;
    --text-dark80: #223045cc;
    --text-dark50: #22304588;
    --text-dark-mute: #6b7b92;
    --text-dark-accent: #44556f;
    --text-dark-accent2: #428eff;
    --shift-bg: white;
    --shift-bg50: #ffffff88;
    --shift-bg20: rgba(255,255,255,.6);
    --admin-bg: #f1dbff;
    --admin-bg-secondary: #e5bffd;
    --admin-text: #af2ffe;
    --admin-hover: #7a19b9;
    --admin-text20: #af2ffe18;
    --dev-bg: #c2ffc9;
    --dev-bg-secondary: #94f99f;
    --dev-text: #1a7a25;
    --dev-text20: #1a7a2518;
    --shadow-color: 222deg 31% 65%;
    --shadow-glow: rgb(255 255 255 / 45%);
    --tag-bg: #ebf3ff;
    --thumb-color: #c4cedd;
    --thumb-color2: var(--thumb-color);
    --thumb-color50: #c4cedd70;
    --thumb-color-trans: #c4cedd30;
    --thumb-color-active: #7284A0;
    --text-404: var(--primary);
    --autofilled: #ddeaff;
    --skeleton1: hsl(200, 20%, 85%);
    --skeleton2: hsl(200, 20%, 95%);
    --font-header: 'Montserrat', Helvetica, system-ui, sans-serif;
    --font-body: 'Roboto', Helvetica, system-ui, sans-serif;
    --font-mono: 'Roboto Mono', monospace;
    --ease: cubic-bezier(0.49, 0.77, 0.69, 1.07);
    --zoom: 1;
    --scrollbar: 16px;
    --nav-invert-filter: 0.2;
    --shadow-low: 0px 1px 1px hsl(var(--shadow-color) / 0.52), 0px 1px 1px -2px hsl(var(--shadow-color) / 0.38), 0px 2.5px 2.2px -4.1px hsl(var(--shadow-color) / 0.25);
    --shadow-small: 0px 0.7px 1px hsl(var(--shadow-color) / 0.54), 0px 0.5px 3.3px -1.4px hsl(var(--shadow-color) / 0.44), 0px 7.6px 10.2px -4.1px hsl(var(--shadow-color) / 0.23);
    --shadow-medium: 0px 0.7px 1px hsl(var(--shadow-color) / 0.54), 0px 1.5px 1.3px -1.4px hsl(var(--shadow-color) / 0.44), 1px 12.6px 11.2px -4.1px hsl(var(--shadow-color) / 0.23);
    --shadow-large: 0px 1px 1px hsl(var(--shadow-color) / 0.32), 0px 2.4px 2.7px -0.7px hsl(var(--shadow-color) / 0.32), -1px 14.8px 16.7px -2.1px hsl(var(--shadow-color) / 0.32), -1px 21.8px 24.5px -2.5px hsl(var(--shadow-color) / 0.32);
    --shadow-float: 0px 0.7px 0.6px hsl(var(--shadow-color) / 0.54), 0px 1.5px 1.3px -1.4px hsl(var(--shadow-color) / 0.44), 0.1px 12.6px 11.2px -4.1px hsl(var(--shadow-color) / 0.23);
    --invert: invert(1);
    --invert-flip: 0;
    --devbar-height: 0rem;
    --navbar-width: 13.5rem;
    --page-side-margin: min(5%, 8rem);
    margin: 0 !important;
    overflow: hidden;
    background: var(--bg);
    box-shadow: inset 0 0 50vmin -9vmin var(--primary);
    font-family: var(--font-body);
    zoom: var(--zoom);
    -moz-transform: scale(var(--zoom));
    -moz-transform-origin: 0 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    transition: ease .2s background;
}


    body[data-theme='dark'] {
        --primary-hover: #0a3a81;
        --primary-variable: #002a5a;
        --primary-gradient-color: #0c2a6f;
        --time-color: #1d2a3c;
        --bg: #181819;
        --bg-dark: #1f1f23;
        --bg-dark50: #1f1f23cc;
        --bg-dark2: #192336;
        --bg-dark2-50: #19233688;
        --bg-dark3: #263654;
        --bg-darker: #1d2128;
        --bg-dark350: #192336cc;
        --bg-darker50: #1d212850;
        --bg-darker80: #1d212821;
        --card-bg-top: #101010;
        --card-bg-top50: #10101088;
        --card-bg-top80: #101010cc;
        --card-bg: #151515;
        --card-bg20: #1515156e;
        --card-bg50: #151515aa;
        --card-bg80: #151515cc;
        --card-border: #1b1b1b;
        --card-border50: #1b1b1b88;
        --card-bg-warning: #330010;
        --card-bg-warning50: #33001088;
        --color1-dark: #49778f;
        --color2-dark: #8c551f;
        --color3-dark: #4d9155;
        --color1gradient: #51e3fd;
        --color2gradient: #ffbc79;
        --color3gradient: #62f9a4;
        --color1: #bae5fb;
        --color2: #ffbe99;
        --color3: #a9f5b3;
        --light-filter: 0;
        --accept-mute: #0d230a;
        --accept-hover: #439700;
        --warning: #ff195f;
        --warning20: #ff195f38;
        --warning-hover: #8b1035;
        --warning-mute: #2d161d;
        --warning-mute50: #620f2888;
        --warning-text: #ff195f;
        --alert: #ff0068;
        --label-text: #4666a5;
        --element-bg: #101010;
        --input-text: #60729d;
        --default: #151515;
        --default-hover: #3E3E3E;
        --text-light: white;
        --text-dark: #ffffff;
        --text-dark80: #ffffffcc;
        --text-dark50: #ffffff88;
        --text-dark-mute: #e6e6e6;
        --text-dark-accent: #8996ac;
        --text-dark-accent2: #2c52ad;
        --shift-bg: #1c1c1c;
        --shift-bg50: #1c1c1c88;
        --shift-bg20: #1c1c1c84;
        --admin-bg: #21163e;
        --admin-bg-secondary: #372f4a;
        --admin-text: #9366fc;
        --dev-bg: #142216;
        --dev-bg-secondary: #172e19;
        --dev-text: #52d128;
        --shadow-color: 195deg 0% 0%;
        --shadow-glow: rgb(0 0 0 / 30%);
        --tag-bg: #173387;
        --thumb-color: #797c87;
        --thumb-color2: var(--thumb-color);
        --thumb-color50: #797c8730;
        --thumb-color-trans: #797c8750;
        --thumb-color-active: #abaeb7;
        --autofilled: #1a1f23;
        --skeleton1: hsl(200, 10%, 7%);
        --skeleton2: hsl(200, 20%, 4%);
        --default-filter: invert(1) opacity(0.25);
        --nav-invert-filter: 0.75;
        --shadow-low: 0px 1px 1px hsl(var(--shadow-color) / 0.52), 0px 1px 1px -2px hsl(var(--shadow-color) / 0.38), 0px 2.5px 2.2px -4.1px hsl(var(--shadow-color) / 0.25);
        --shadow-small: 0px 0.7px 1px hsl(var(--shadow-color) / 0.54), 0px 0.5px 3.3px -1.4px hsl(var(--shadow-color) / 0.44), 0px 7.6px 10.2px -4.1px hsl(var(--shadow-color) / 0.23);
        --shadow-medium: 0px 0.7px 1px hsl(var(--shadow-color) / 0.54), 0px 1.5px 1.3px -1.4px hsl(var(--shadow-color) / 0.44), 1px 12.6px 11.2px -4.1px hsl(var(--shadow-color) / 0.23);
        --shadow-large: 0px 1px 1px hsl(var(--shadow-color) / 0.32), 0px 2.4px 2.7px -0.7px hsl(var(--shadow-color) / 0.32), -1px 14.8px 16.7px -2.1px hsl(var(--shadow-color) / 0.32), -1px 21.8px 24.5px -2.5px hsl(var(--shadow-color) / 0.32);
        --shadow-float: 0px 0.7px 0.6px hsl(var(--shadow-color) / 0.54), 0px 1.5px 1.3px -1.4px hsl(var(--shadow-color) / 0.44), 0.1px 12.6px 11.2px -4.1px hsl(var(--shadow-color) / 0.23);
        --invert: invert(0);
        --invert-flip: 1;
        box-shadow: inset 0 0 50vmin -9vmin var(--primary50);
    }

html {
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.img-dark {
    display: none;
}

[data-theme='dark'] .img-dark {
    display: unset;
}

.img-light {
    display: unset;
}

[data-theme='dark'] .img-light {
    display: none;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 0.5rem;
    background: transparent !important;
    transition: background ease .2s;
}

    ::-webkit-scrollbar:hover {
        background: var(--thumb-color-trans) !important;
    }

::-webkit-scrollbar-track {
    background: transparent !important;
    transition: background ease .2s;
    cursor: pointer;
}

::-webkit-scrollbar-thumb {
    background: var(--thumb-color) !important;
    cursor: pointer !important;
    border-radius: 0.5rem;
    cursor: pointer !important;
    transition: background ease .2s, border ease .2s;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--thumb-color-active) !important;
    }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-header);
    font-weight: 800;
    color: var(--text-dark);
    transition: background ease .2s, color ease .2s, border-color ease .2s;
}

h1 {
    font-size: 2rem;
    margin: 0.5rem;
} 

main a:not(.default), .tip-card-divider a:not(.default) {
    font-family: var(--font-header);
    font-weight: 700;
    color: var(--primary);
    transition: ease .1s color, ease .1s padding-right;
    position: relative;
    text-decoration: none;
}

    main a:not(.default):hover, .tip-card-divider a:not(.default):hover {
        color: var(--primary-hover) !important;
    }

        main a:not(.default):hover:after, .tip-card-divider a:not(.default):hover:after {
            opacity: 1;
            pointer-events: unset;
        }


p, b, i, u {
    color: var(--text-dark);
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-c {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.bold {
    font-weight: 900 !important;
}

.ghost-bg {
    animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
    0% {
        background-color: var(--skeleton1);
    }

    100% {
        background-color: var(--skeleton2);
    }
}

.material-icons {
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */

    transition: margin .2s ease;
}

.material-icons-round {
    font-family: 'Material Icons Round' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */

    transition: margin .2s ease;
}

.shadow-maincard {
    box-shadow: var(--shadow-large);
}

.shadow-medium {
    box-shadow: var(--shadow-medium);
}

.shadow-small {
    box-shadow: var(--shadow-small);
}

.shadow-low {
    box-shadow: var(--shadow-low);
}

.card {
    background: var(--card-bg);
    border-radius: .8rem;
    padding: 1rem 2rem;
    height: fit-content;
    border: .1rem solid var(--card-border);
    transition: background ease .2s, color ease .2s, border-color ease .2s;
}

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--text-dark) !important;
    -webkit-box-shadow: 0 0 0 30px var(--autofilled) inset !important;
    border-color: var(--primary);
}

.elipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}