@charset  "UTF-8";

:root {
    --black: #0f0f14;
    --gray1: #1a1b26;
    --gray2: #414868;
    --gray3: #a9b1d6;
    --gray4: #c0caf5;
    --gray5: #d5d6db;
    --white: #fbfbff;

    --darkblue: #0f4b6e;
    --darkcyan: #34548a;
    --darkerblue: #343b58;
    --darkgreen: #485e30;
    --darkpurple: #5a4a78;
    --darkred: #8c4351;
    --darkyellow: #8f5e15;

    --lightblue: #7aa2f7;
    --lightcyan: #7dcfff;
    --lightgreen: #9ece6a;
    --lightpurple: #bb9af7;
    --lightred: #f7768e;
    --lightyellow: #e0af68;
}

body.lighttheme {
    --bgcolor: var(--white);
    --bgcoloralt: var(--gray5);
    --fgcolor: var(--gray1);
    --fgcoloralt: var(--black);
    --linkcolor: var(--darkblue);
    --linkcoloralt: var(--darkpurple);
    --primary: var(--darkblue);
    --sectionborder: var(--darkyellow);
    --ui-activeoutline: var(--darkpurple);
    --ui-fgcolor: var(--gray5);
    --ui-bgcolor: var(--darkblue);
    --ui-fgcoloralt: var(--white);
    --ui-bgcoloralt: var(--darkerblue);
    --contacticoncolor: var(--darkcyan);
}

body.darktheme {
    --bgcolor: var(--black);
    --bgcoloralt: var(--gray1);
    --fgcolor: var(--gray5);
    --fgcoloralt: var(--white);
    --linkcolor: var(--lightblue);
    --linkcoloralt: var(--lightpurple);
    --primary: var(--lightblue);
    --sectionborder: var(--gray2);
    --ui-activeoutline: var(--lightpurple);
    --ui-fgcolor: var(--gray5);
    --ui-bgcolor: var(--darkblue);
    --ui-fgcoloralt: var(--white);
    --ui-bgcoloralt: var(--darkerblue);
    --contacticoncolor: var(--lightcyan);
}