@import url("https://fonts.googleapis.com/css2?family=Inter");

/* root variables, never change across themes */
:root {
    --theme-success-h: 139;
    --theme-success-s: 47%;
    --theme-success-l: 44%;
    --theme-danger-h: 359;
    --theme-danger-s: 83%;
    --theme-danger-l: 59%;

    --theme-button-primary: #ffd700;
    --theme-button-secondary: #ad8b00;
    --theme-button-text-primary: #171717;
    --theme-button-text-secondary: #474747;

    --theme-success: #57F287;
    --theme-danger: #ED4245;

    --theme-font-family-primary: "Inter", sans-serif;

    --theme-transition-slow: 0.3s ease;
    --theme-transition-md: 0.2s ease;
    --theme-transition-imd: 0.15s ease;
    --theme-transition-fast: 0.1s ease;
    --theme-transition-xfast: 0.075s ease;
}

/* body variables when theme is light mode */
body.lightmode {
    /* [actually good looking light mode variables] */
    /* 
        --theme-text-primary: #171717;
        --theme-text-primary-active: #000;
        --theme-text-secondary: #474747;
        --theme-text-link: #0099ff;

        --theme-background-footer: #C6B7A8;
        --theme-background-primary: #DFD0C1;
        --theme-background-primary-active: #BCAEA1;

        --theme-background-secondary: #c9bbae;
        --theme-background-tertiary: #AC9D8E;
        --theme-background-quaternary: #938475;
        --theme-background-quinary: #796A5B;
        */
    /* [end actually good looking light mode variables] */

    animation: blinking linear 0.9s infinite;
}

@keyframes blinking {
    0% {
        --theme-text-primary: #ff0000;
        --theme-text-primary-active: rgb(223, 119, 119);
        --theme-text-secondary: #ff0000;
        --theme-text-link: #66ff00;

        --theme-background-footer: #fffb00;
        --theme-background-primary: #ffffff;
        --theme-background-primary-active: #ff00aa;

        --theme-background-secondary: #00ff37;
        --theme-background-tertiary: #ff8000;
        --theme-background-quaternary: #00ff55;
        --theme-background-quinary: #ff00bf;
    }

    10% {
        --theme-text-primary: pink;
        --theme-text-primary-active: blue;
        --theme-text-secondary: purple;
        --theme-text-link: orange;

        --theme-background-footer: lime;
        --theme-background-primary: #00eeff;
        --theme-background-primary-active: blue;

        --theme-background-secondary: red;
        --theme-background-tertiary: yellow;
        --theme-background-quaternary: lime;
        --theme-background-quinary: orange;
    }

    20% {
        --theme-text-primary: blue;
        --theme-text-primary-active: purple;
        --theme-text-secondary: #00eeff;
        --theme-text-link: #00eeff;

        --theme-background-footer: pink;
        --theme-background-primary: lime;
        --theme-background-primary-active: #ff00aa;

        --theme-background-secondary: orange;
        --theme-background-tertiary: red;
        --theme-background-quaternary: yellow;
        --theme-background-quinary: lime;
    }

    30% {
        --theme-text-primary: #5fff3e;
        --theme-text-primary-active: rgb(255, 0, 0);
        --theme-text-secondary: #00ffff;
        --theme-text-link: #fffb00;

        --theme-background-footer: #ffffff;
        --theme-background-primary: #ffffff;
        --theme-background-primary-active: #ff00aa;

        --theme-background-secondary: #00ff37;
        --theme-background-tertiary: #ff8000;
        --theme-background-quaternary: #00ff55;
        --theme-background-quinary: #ff00bf;
    }

    40% {
        --theme-text-primary: pink;
        --theme-text-primary-active: blue;
        --theme-text-secondary: purple;
        --theme-text-link: orange;

        --theme-background-footer: lime;
        --theme-background-primary: #ffffff;
        --theme-background-primary-active: blue;

        --theme-background-secondary: rgb(255, 255, 255);
        --theme-background-tertiary: yellow;
        --theme-background-quaternary: lime;
        --theme-background-quinary: orange;
    }

    50% {
        --theme-text-primary: rgb(255, 251, 0);
        --theme-text-primary-active: purple;
        --theme-text-secondary: #00eeff;
        --theme-text-link: #00eeff;

        --theme-background-footer: rgb(115, 255, 0);
        --theme-background-primary: rgb(255, 255, 255);
        --theme-background-primary-active: #ff00aa;

        --theme-background-secondary: orange;
        --theme-background-tertiary: red;
        --theme-background-quaternary: yellow;
        --theme-background-quinary: lime;
    }

    60% {
        --theme-text-primary: #ff0000;
        --theme-text-primary-active: rgb(223, 119, 119);
        --theme-text-secondary: #ff0000;
        --theme-text-link: #66ff00;

        --theme-background-footer: #fffb00;
        --theme-background-primary: #ffffff;
        --theme-background-primary-active: #ff00aa;

        --theme-background-secondary: #00ff37;
        --theme-background-tertiary: #ff8000;
        --theme-background-quaternary: #00ff55;
        --theme-background-quinary: #ff00bf;
    }

    70% {
        --theme-text-primary: pink;
        --theme-text-primary-active: blue;
        --theme-text-secondary: purple;
        --theme-text-link: orange;

        --theme-background-footer: lime;
        --theme-background-primary: #00eeff;
        --theme-background-primary-active: blue;

        --theme-background-secondary: red;
        --theme-background-tertiary: yellow;
        --theme-background-quaternary: lime;
        --theme-background-quinary: orange;
    }

    80% {
        --theme-text-primary: blue;
        --theme-text-primary-active: purple;
        --theme-text-secondary: #00eeff;
        --theme-text-link: #00eeff;

        --theme-background-footer: pink;
        --theme-background-primary: lime;
        --theme-background-primary-active: #ff00aa;

        --theme-background-secondary: orange;
        --theme-background-tertiary: red;
        --theme-background-quaternary: yellow;
        --theme-background-quinary: lime;
    }

    90% {
        --theme-text-primary: pink;
        --theme-text-primary-active: blue;
        --theme-text-secondary: purple;
        --theme-text-link: orange;

        --theme-background-footer: lime;
        --theme-background-primary: #00eeff;
        --theme-background-primary-active: blue;

        --theme-background-secondary: red;
        --theme-background-tertiary: yellow;
        --theme-background-quaternary: lime;
        --theme-background-quinary: orange;
    }

    100% {
        --theme-text-primary: blue;
        --theme-text-primary-active: purple;
        --theme-text-secondary: #00eeff;
        --theme-text-link: #00eeff;

        --theme-background-footer: pink;
        --theme-background-primary: lime;
        --theme-background-primary-active: #ff00aa;

        --theme-background-secondary: orange;
        --theme-background-tertiary: red;
        --theme-background-quaternary: yellow;
        --theme-background-quinary: lime;
    }
}

/* body variables when theme is dark mode, or somehow no theme was set into LocalStorage */
body.darkmode,
body:not(.darkmode):not(.lightmode) {
    --theme-text-primary: #cccccc;
    --theme-text-primary-active: #777;
    --theme-text-secondary: #a7a7a7;
    --theme-text-link: #0099ff;

    --theme-background-footer: #414141;
    --theme-background-primary: #313131;
    --theme-background-primary-active: #3a3a3a;

    --theme-background-secondary: #4A4A4A;
    --theme-background-tertiary: #646464;
    --theme-background-quaternary: #7D7D7D;
    --theme-background-quinary: #969696;
}

/* set the body properties once page has finished loading */
body:not(.loaded) {
    transition: 0;
}

body {
    text-align: center;
    transition: var(--theme-transition-md);
    font-family: var(--theme-font-family-primary) !important;
    color: var(--theme-text-primary) !important;
    background-color: var(--theme-background-primary) !important;
    margin: 0;
}

/* scrollbar styles */
body::-webkit-scrollbar {
    width: 10px;
}

/* Track */
body::-webkit-scrollbar-track {
    background: var(--theme-background-secondary);
    border-radius: 10px;
}

/* Handle */
body::-webkit-scrollbar-thumb {
    background: var(--theme-background-tertiary);
    border-radius: 10px;
}

/* Handle on hover */
body::-webkit-scrollbar-thumb:hover {
    background: var(--theme-background-quaternary);
}

/* global selectors */
body *::selection {
    background-color: #00aadd;
}

* {
    outline: none !important;
}

h1 {
    padding: 25px 0 0 0 !important;
    margin-bottom: 0;
    font-size: 36px;
}

.subheading {
    font-size: 14px;
    color: var(--theme-text-secondary);
}

a {
    text-decoration: none;
    color: var(--theme-text-link);
}

code {
    background-color: black;
    border-radius: 5px;
    padding: 5px 7px;
}

.footer {
    font-size: 12px;
    width: 100%;
    position: absolute;
    bottom: 0;
}
.footer-container {
    width: 75%;
    margin: 0 auto;
    padding: 30px 0;
    border-top: 1px solid var(--theme-background-secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 50px;
}
.footer .brand {
    user-select: none;
    cursor: default;
    margin-right: 40px;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
}
.footer .brand i {
    font-size: 24px;
}
.footer a:hover {
    text-decoration: underline;
}