:root, .light-theme {
    --md-sys-color-primary: rgb(42 99 138);
    --md-sys-color-surface-tint: rgb(42 99 138);
    --md-sys-color-on-primary: rgb(255 255 255);
    --md-sys-color-primary-container: rgb(203 230 255);
    --md-sys-color-on-primary-container: rgb(2 75 113);
    --md-sys-color-secondary: rgb(80 96 111);
    --md-sys-color-on-secondary: rgb(255 255 255);
    --md-sys-color-secondary-container: rgb(212 228 246);
    --md-sys-color-on-secondary-container: rgb(57 72 86);
    --md-sys-color-tertiary: rgb(102 88 123);
    --md-sys-color-on-tertiary: rgb(255 255 255);
    --md-sys-color-tertiary-container: rgb(236 220 255);
    --md-sys-color-on-tertiary-container: rgb(78 65 98);
    --md-sys-color-error: rgb(186 26 26);
    --md-sys-color-on-error: rgb(255 255 255);
    --md-sys-color-error-container: rgb(255 218 214);
    --md-sys-color-on-error-container: rgb(147 0 10);
    --md-sys-color-background: rgb(247 249 255);
    --md-sys-color-on-background: rgb(24 28 32);
    --md-sys-color-surface: rgb(247 249 255);
    --md-sys-color-on-surface: rgb(24 28 32);
    --md-sys-color-surface-variant: rgb(222 227 234);
    --md-sys-color-on-surface-variant: rgb(66 71 77);
    --md-sys-color-outline: rgb(114 120 126);
    --md-sys-color-outline-variant: rgb(193 199 206);
    --md-sys-color-shadow: rgb(0 0 0);
    --md-sys-color-scrim: rgb(0 0 0);
    --md-sys-color-inverse-surface: rgb(45 49 53);
    --md-sys-color-inverse-on-surface: rgb(238 241 246);
    --md-sys-color-inverse-primary: rgb(151 204 249);
    --md-sys-color-primary-fixed: rgb(203 230 255);
    --md-sys-color-on-primary-fixed: rgb(0 30 48);
    --md-sys-color-primary-fixed-dim: rgb(151 204 249);
    --md-sys-color-on-primary-fixed-variant: rgb(2 75 113);
    --md-sys-color-secondary-fixed: rgb(212 228 246);
    --md-sys-color-on-secondary-fixed: rgb(13 29 42);
    --md-sys-color-secondary-fixed-dim: rgb(184 200 217);
    --md-sys-color-on-secondary-fixed-variant: rgb(57 72 86);
    --md-sys-color-tertiary-fixed: rgb(236 220 255);
    --md-sys-color-on-tertiary-fixed: rgb(33 22 52);
    --md-sys-color-tertiary-fixed-dim: rgb(208 191 231);
    --md-sys-color-on-tertiary-fixed-variant: rgb(78 65 98);
    --md-sys-color-surface-dim: rgb(215 218 223);
    --md-sys-color-surface-bright: rgb(247 249 255);
    --md-sys-color-surface-container-lowest: rgb(255 255 255);
    --md-sys-color-surface-container-low: rgb(241 244 249);
    --md-sys-color-surface-container: rgb(235 238 243);
    --md-sys-color-surface-container-high: rgb(230 232 237);
    --md-sys-color-surface-container-highest: rgb(224 227 232);
}
.dark-theme {
    --md-sys-color-primary: rgb(151 204 249);
    --md-sys-color-surface-tint: rgb(151 204 249);
    --md-sys-color-on-primary: rgb(0 51 80);
    --md-sys-color-primary-container: rgb(2 75 113);
    --md-sys-color-on-primary-container: rgb(203 230 255);
    --md-sys-color-secondary: rgb(184 200 217);
    --md-sys-color-on-secondary: rgb(34 50 63);
    --md-sys-color-secondary-container: rgb(57 72 86);
    --md-sys-color-on-secondary-container: rgb(212 228 246);
    --md-sys-color-tertiary: rgb(208 191 231);
    --md-sys-color-on-tertiary: rgb(55 43 74);
    --md-sys-color-tertiary-container: rgb(78 65 98);
    --md-sys-color-on-tertiary-container: rgb(236 220 255);
    --md-sys-color-error: rgb(255 180 171);
    --md-sys-color-on-error: rgb(105 0 5);
    --md-sys-color-error-container: rgb(147 0 10);
    --md-sys-color-on-error-container: rgb(255 218 214);
    --md-sys-color-background: rgb(16 20 23);
    --md-sys-color-on-background: rgb(224 227 232);
    --md-sys-color-surface: rgb(16 20 23);
    --md-sys-color-on-surface: rgb(224 227 232);
    --md-sys-color-surface-variant: rgb(66 71 77);
    --md-sys-color-on-surface-variant: rgb(193 199 206);
    --md-sys-color-outline: rgb(140 145 152);
    --md-sys-color-outline-variant: rgb(66 71 77);
    --md-sys-color-shadow: rgb(0 0 0);
    --md-sys-color-scrim: rgb(0 0 0);
    --md-sys-color-inverse-surface: rgb(224 227 232);
    --md-sys-color-inverse-on-surface: rgb(45 49 53);
    --md-sys-color-inverse-primary: rgb(42 99 138);
    --md-sys-color-primary-fixed: rgb(203 230 255);
    --md-sys-color-on-primary-fixed: rgb(0 30 48);
    --md-sys-color-primary-fixed-dim: rgb(151 204 249);
    --md-sys-color-on-primary-fixed-variant: rgb(2 75 113);
    --md-sys-color-secondary-fixed: rgb(212 228 246);
    --md-sys-color-on-secondary-fixed: rgb(13 29 42);
    --md-sys-color-secondary-fixed-dim: rgb(184 200 217);
    --md-sys-color-on-secondary-fixed-variant: rgb(57 72 86);
    --md-sys-color-tertiary-fixed: rgb(236 220 255);
    --md-sys-color-on-tertiary-fixed: rgb(33 22 52);
    --md-sys-color-tertiary-fixed-dim: rgb(208 191 231);
    --md-sys-color-on-tertiary-fixed-variant: rgb(78 65 98);
    --md-sys-color-surface-dim: rgb(16 20 23);
    --md-sys-color-surface-bright: rgb(54 58 62);
    --md-sys-color-surface-container-lowest: rgb(11 15 18);
    --md-sys-color-surface-container-low: rgb(24 28 32);
    --md-sys-color-surface-container: rgb(28 32 36);
    --md-sys-color-surface-container-high: rgb(38 42 46);
    --md-sys-color-surface-container-highest: rgb(49 53 57);
}

:root {
    --md-sys-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-2: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);

    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 9999px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    line-height: 1.5;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}