:root,
:host {
    color-scheme: light dark;

    --md-sys-color-background: light-dark(#f9f9fb, #121415);
    --md-sys-color-on-background: light-dark(#e2e2e5, #1a1c1e);
    --md-sys-color-surface: light-dark(#f9f9fb, #121415);
    --md-sys-color-surface-dim: light-dark(#dadadc, #121415);
    --md-sys-color-surface-bright: light-dark(#f9f9fb, #38393b);
    --md-sys-color-surface-container-lowest: light-dark(#ffffff, #0c0e10);
    --md-sys-color-surface-container-low: light-dark(#f3f3f6, #1a1c1e);
    --md-sys-color-surface-container: light-dark(#eeeef0, #1e2022);
    --md-sys-color-surface-container-high: light-dark(#e8e8ea, #282a2c);
    --md-sys-color-surface-container-highest: light-dark(#e2e2e5, #333537);
    --md-sys-color-on-surface: light-dark(#1a1c1e, #e2e2e5);
    --md-sys-color-surface-variant: light-dark(#dee3ea, #42474d);
    --md-sys-color-on-surface-variant: light-dark(#42474d, #c2c7ce);
    --md-sys-color-inverse-surface: light-dark(#2f3133, #e2e2e5);
    --md-sys-color-inverse-on-surface: light-dark(#f1f0f3, #2f3133);
    --md-sys-color-outline: light-dark(#72787e, #8c9197);
    --md-sys-color-outline-variant: light-dark(#c2c7ce, #42474d);
    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;
    --md-sys-color-surface-tint: light-dark(#3a627f, #a3cbeb);
    --md-sys-color-primary: light-dark(#0e374f, #a3cbeb);
    --md-sys-color-on-primary: light-dark(#ffffff, #00344e);
    --md-sys-color-primary-container: light-dark(#17435d, #002a40);
    --md-sys-color-on-primary-container: light-dark(#b0d8f9, #90b8d7);
    --md-sys-color-inverse-primary: light-dark(#a3cbeb, #3a627f);
    --md-sys-color-secondary: light-dark(#52606c, #b9c8d6);
    --md-sys-color-on-secondary: light-dark(#ffffff, #24323d);
    --md-sys-color-secondary-container: light-dark(#d9e8f7, #303e4a);
    --md-sys-color-on-secondary-container: light-dark(#3e4c57, #c3d2e0);
    --md-sys-color-tertiary: light-dark(#2c1338, #debae9);
    --md-sys-color-on-tertiary: light-dark(#ffffff, #40264b);
    --md-sys-color-tertiary-container: light-dark(#4f345a, #371d42);
    --md-sys-color-on-tertiary-container: light-dark(#ebc6f5, #caa8d5);
    --md-sys-color-error: light-dark(#ba1a1a, #ffb4ab);
    --md-sys-color-on-error: light-dark(#ffffff, #690005);
    --md-sys-color-error-container: light-dark(#ffdad6, #93000a);
    --md-sys-color-on-error-container: light-dark(#410002, #ffdad6);
    --md-sys-box-shadow-dark: -6px 5px 6px rgba(3, 7, 18, 0.04), -24px 18px 24px rgba(3, 7, 18, 0.08);
    --md-sys-box-shadow-light: -6px 5px 6px rgba(255, 255, 255, 0.04), -24px 18px 24px rgba(255, 255, 255, 0.08);
    --md-sys-box-shadow: light-dark(var(--md-sys-box-shadow-light), var(--md-sys-box-shadow-dark));
}

html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype'),
        url('../fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/Material\ Symbols.woff) format('woff');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}