:root {
  --glow-bg-color: #282c34;
  --glow-base-color: #abb2bf;
  --glow-special-color: #d19a66;
  --glow-primary-color: #61aeee;
  --glow-comment-color: #5c6370;
  --glow-secondary-color: #98c379;
  --glow-char-color: #abb2bf;
  --glow-accent-color: #c678dd;
}

::-webkit-scrollbar-track {
  background: var(--md-sys-color-secondary-container);
}

::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-secondary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--md-sys-color-primary);
}

.dark {
  --md-sys-color-primary: rgb(154 204 250);
  --md-sys-color-surface-tint: rgb(154 204 250);
  --md-sys-color-on-primary: rgb(0 51 82);
  --md-sys-color-primary-container: rgb(10 74 114);
  --md-sys-color-on-primary-container: rgb(205 229 255);
  --md-sys-color-secondary: rgb(184 200 218);
  --md-sys-color-on-secondary: rgb(35 50 64);
  --md-sys-color-secondary-container: rgb(57 72 87);
  --md-sys-color-on-secondary-container: rgb(212 228 246);
  --md-sys-color-tertiary: rgb(210 191 231);
  --md-sys-color-on-tertiary: rgb(56 42 74);
  --md-sys-color-tertiary-container: rgb(79 64 97);
  --md-sys-color-on-tertiary-container: rgb(237 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 24);
  --md-sys-color-on-background: rgb(224 226 232);
  --md-sys-color-surface: rgb(16 20 24);
  --md-sys-color-on-surface: rgb(224 226 232);
  --md-sys-color-surface-variant: rgb(66 71 78);
  --md-sys-color-on-surface-variant: rgb(194 199 207);
  --md-sys-color-outline: rgb(140 145 152);
  --md-sys-color-outline-variant: rgb(66 71 78);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(224 226 232);
  --md-sys-color-inverse-on-surface: rgb(45 49 53);
  --md-sys-color-inverse-primary: rgb(45 98 139);
  --md-sys-color-primary-fixed: rgb(205 229 255);
  --md-sys-color-on-primary-fixed: rgb(0 29 50);
  --md-sys-color-primary-fixed-dim: rgb(154 204 250);
  --md-sys-color-on-primary-fixed-variant: rgb(10 74 114);
  --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 218);
  --md-sys-color-on-secondary-fixed-variant: rgb(57 72 87);
  --md-sys-color-tertiary-fixed: rgb(237 220 255);
  --md-sys-color-on-tertiary-fixed: rgb(34 21 51);
  --md-sys-color-tertiary-fixed-dim: rgb(210 191 231);
  --md-sys-color-on-tertiary-fixed-variant: rgb(79 64 97);
  --md-sys-color-surface-dim: rgb(16 20 24);
  --md-sys-color-surface-bright: rgb(54 57 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(39 42 46);
  --md-sys-color-surface-container-highest: rgb(49 53 57);

  img {
    background-color: var(--md-sys-color-inverse-surface);
  }
}

.light {
  --md-sys-color-primary: rgb(45 98 139);
  --md-sys-color-surface-tint: rgb(45 98 139);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(205 229 255);
  --md-sys-color-on-primary-container: rgb(0 29 50);
  --md-sys-color-secondary: rgb(81 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(13 29 42);
  --md-sys-color-tertiary: rgb(103 88 122);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(237 220 255);
  --md-sys-color-on-tertiary-container: rgb(34 21 51);
  --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(65 0 2);
  --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 235);
  --md-sys-color-on-surface-variant: rgb(66 71 78);
  --md-sys-color-outline: rgb(114 120 126);
  --md-sys-color-outline-variant: rgb(194 199 207);
  --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(154 204 250);
  --md-sys-color-primary-fixed: rgb(205 229 255);
  --md-sys-color-on-primary-fixed: rgb(0 29 50);
  --md-sys-color-primary-fixed-dim: rgb(154 204 250);
  --md-sys-color-on-primary-fixed-variant: rgb(10 74 114);
  --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 218);
  --md-sys-color-on-secondary-fixed-variant: rgb(57 72 87);
  --md-sys-color-tertiary-fixed: rgb(237 220 255);
  --md-sys-color-on-tertiary-fixed: rgb(34 21 51);
  --md-sys-color-tertiary-fixed-dim: rgb(210 191 231);
  --md-sys-color-on-tertiary-fixed-variant: rgb(79 64 97);
  --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 238);
  --md-sys-color-surface-container-highest: rgb(224 226 232);

  img {
    background-color: var(--md-sys-color-surface);
  }
}

body {
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
}

/* Navigation links */
nav {
  a {
    color: var(--md-sys-color-on-surface);
  }
}

/* Normal links */
a {
  color: var(--md-sys-color-primary);

  &:hover {
    text-decoration: underline;
  }
}

button {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

hr {
  background-color: var(--md-sys-color-outline-variant);
  height: 2px;
  border: none;
}

code {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

button-theme {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

#for-dark {
  .light & {
    display: none;
  }
}

#for-light {
  .dark & {
    display: none;
  }
}