:root {
  --bg-img:url(background-light.png);
  --color-primary: rgb(119 53 151);
  --color-surface-tint: rgb(131 65 163);
  --color-on-primary: rgb(255 255 255);
  --color-primary-container: rgb(146 79 178);
  --color-on-primary-container: rgb(252 232 255);
  --color-secondary: rgb(112 84 124);
  --color-on-secondary: rgb(255 255 255);
  --color-secondary-container: rgb(242 206 253);
  --color-on-secondary-container: rgb(113 85 125);
  --color-tertiary: rgb(148 44 85);
  --color-on-tertiary: rgb(255 255 255);
  --color-tertiary-container: rgb(179 69 109);
  --color-on-tertiary-container: rgb(255 233 237);
  --color-error: rgb(186 26 26);
  --color-on-error: rgb(255 255 255);
  --color-error-container: rgb(255 218 214);
  --color-on-error-container: rgb(147 0 10);
  --color-background: rgb(255 247 252);
  --color-on-background: rgb(31 26 32);
  --color-surface: rgb(233 179 255);
  --color-on-surface: rgb(31 26 32);
  --color-surface-variant: rgb(237 222 238);
  --color-on-surface-variant: rgb(77 67 80);
  --color-outline: rgb(127 115 129);
  --color-outline-variant: rgb(208 194 209);
  --color-shadow: rgb(0 0 0);
  --color-scrim: rgb(0 0 0);
  --color-inverse-surface: rgb(52 46 53);
  --color-inverse-on-surface: rgb(249 237 247);
  --color-inverse-primary: rgb(233 179 255);
  --color-primary-fixed: rgb(247 216 255);
  --color-on-primary-fixed: rgb(49 0 72);
  --color-primary-fixed-dim: rgb(233 179 255);
  --color-on-primary-fixed-variant: rgb(105 39 137);
  --color-secondary-fixed: rgb(247 216 255);
  --color-on-secondary-fixed: rgb(41 17 53);
  --color-secondary-fixed-dim: rgb(221 187 233);
  --color-on-secondary-fixed-variant: rgb(87 61 99);
  --color-tertiary-fixed: rgb(255 217 226);
  --color-on-tertiary-fixed: rgb(63 0 28);
  --color-tertiary-fixed-dim: rgb(255 177 199);
  --color-on-tertiary-fixed-variant: rgb(131 31 72);
  --color-surface-dim: rgb(225 215 224);
  --color-surface-bright: rgb(255 247 252);
  --color-surface-container-lowest: rgb(255 255 255);
  --color-surface-container-low: rgb(251 240 250);
  --color-surface-container: rgb(246 235 244);
  --color-surface-container-high: rgb(240 229 238);
  --color-surface-container-highest: rgb(234 223 233);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-img:url(background-dark.png);
    --color-primary: rgb(233 179 255);
    --color-surface-tint: rgb(233 179 255);
    --color-on-primary: rgb(80 5 113);
    --color-primary-container: rgb(146 79 178);
    --color-on-primary-container: rgb(252 232 255);
    --color-secondary: rgb(221 187 233);
    --color-on-secondary: rgb(64 38 75);
    --color-secondary-container: rgb(90 63 101);
    --color-on-secondary-container: rgb(207 173 218);
    --color-tertiary: rgb(255 177 199);
    --color-on-tertiary: rgb(100 1 49);
    --color-tertiary-container: rgb(179 69 109);
    --color-on-tertiary-container: rgb(255 233 237);
    --color-error: rgb(255 180 171);
    --color-on-error: rgb(105 0 5);
    --color-error-container: rgb(147 0 10);
    --color-on-error-container: rgb(255 218 214);
    --color-background: rgb(23 18 24);
    --color-on-background: rgb(234 223 233);
    --color-surface: rgb(41 17 53);
    --color-on-surface: rgb(234 223 233);
    --color-surface-variant: rgb(77 67 80);
    --color-on-surface-variant: rgb(208 194 209);
    --color-outline: rgb(153 141 155);
    --color-outline-variant: rgb(77 67 80);
    --color-shadow: rgb(0 0 0);
    --color-scrim: rgb(0 0 0);
    --color-inverse-surface: rgb(234 223 233);
    --color-inverse-on-surface: rgb(52 46 53);
    --color-inverse-primary: rgb(131 65 163);
    --color-primary-fixed: rgb(247 216 255);
    --color-on-primary-fixed: rgb(49 0 72);
    --color-primary-fixed-dim: rgb(233 179 255);
    --color-on-primary-fixed-variant: rgb(105 39 137);
    --color-secondary-fixed: rgb(247 216 255);
    --color-on-secondary-fixed: rgb(41 17 53);
    --color-secondary-fixed-dim: rgb(221 187 233);
    --color-on-secondary-fixed-variant: rgb(87 61 99);
    --color-tertiary-fixed: rgb(255 217 226);
    --color-on-tertiary-fixed: rgb(63 0 28);
    --color-tertiary-fixed-dim: rgb(255 177 199);
    --color-on-tertiary-fixed-variant: rgb(131 31 72);
    --color-surface-dim: rgb(23 18 24);
    --color-surface-bright: rgb(61 55 62);
    --color-surface-container-lowest: rgb(17 13 19);
    --color-surface-container-low: rgb(31 26 32);
    --color-surface-container: rgb(35 30 36);
    --color-surface-container-high: rgb(46 40 47);
    --color-surface-container-highest: rgb(57 51 58);
  }
}

/* when dark mode selected: */
#theme-button:checked ~ .theme-wrapper {
  --bg-img:url(background-light.png);
    --color-primary: rgb(233 179 255);
    --color-surface-tint: rgb(233 179 255);
    --color-on-primary: rgb(80 5 113);
    --color-primary-container: rgb(146 79 178);
    --color-on-primary-container: rgb(252 232 255);
    --color-secondary: rgb(221 187 233);
    --color-on-secondary: rgb(64 38 75);
    --color-secondary-container: rgb(90 63 101);
    --color-on-secondary-container: rgb(207 173 218);
    --color-tertiary: rgb(255 177 199);
    --color-on-tertiary: rgb(100 1 49);
    --color-tertiary-container: rgb(179 69 109);
    --color-on-tertiary-container: rgb(255 233 237);
    --color-error: rgb(255 180 171);
    --color-on-error: rgb(105 0 5);
    --color-error-container: rgb(147 0 10);
    --color-on-error-container: rgb(255 218 214);
    --color-background: rgb(23 18 24);
    --color-on-background: rgb(234 223 233);
    --color-surface: rgb(41 17 53);
    --color-on-surface: rgb(234 223 233);
    --color-surface-variant: rgb(77 67 80);
    --color-on-surface-variant: rgb(208 194 209);
    --color-outline: rgb(153 141 155);
    --color-outline-variant: rgb(77 67 80);
    --color-shadow: rgb(0 0 0);
    --color-scrim: rgb(0 0 0);
    --color-inverse-surface: rgb(234 223 233);
    --color-inverse-on-surface: rgb(52 46 53);
    --color-inverse-primary: rgb(131 65 163);
    --color-primary-fixed: rgb(247 216 255);
    --color-on-primary-fixed: rgb(49 0 72);
    --color-primary-fixed-dim: rgb(233 179 255);
    --color-on-primary-fixed-variant: rgb(105 39 137);
    --color-secondary-fixed: rgb(247 216 255);
    --color-on-secondary-fixed: rgb(41 17 53);
    --color-secondary-fixed-dim: rgb(221 187 233);
    --color-on-secondary-fixed-variant: rgb(87 61 99);
    --color-tertiary-fixed: rgb(255 217 226);
    --color-on-tertiary-fixed: rgb(63 0 28);
    --color-tertiary-fixed-dim: rgb(255 177 199);
    --color-on-tertiary-fixed-variant: rgb(131 31 72);
    --color-surface-dim: rgb(23 18 24);
    --color-surface-bright: rgb(61 55 62);
    --color-surface-container-lowest: rgb(17 13 19);
    --color-surface-container-low: rgb(31 26 32);
    --color-surface-container: rgb(35 30 36);
    --color-surface-container-high: rgb(46 40 47);
    --color-surface-container-highest: rgb(57 51 58);
}

@media (prefers-color-scheme: dark) {
  #theme-button:checked ~ .theme-wrapper {
    --bg-img:url(background-light.png);
    --color-primary: rgb(119 53 151);
    --color-surface-tint: rgb(131 65 163);
    --color-on-primary: rgb(255 255 255);
    --color-primary-container: rgb(146 79 178);
    --color-on-primary-container: rgb(252 232 255);
    --color-secondary: rgb(112 84 124);
    --color-on-secondary: rgb(255 255 255);
    --color-secondary-container: rgb(242 206 253);
    --color-on-secondary-container: rgb(113 85 125);
    --color-tertiary: rgb(148 44 85);
    --color-on-tertiary: rgb(255 255 255);
    --color-tertiary-container: rgb(179 69 109);
    --color-on-tertiary-container: rgb(255 233 237);
    --color-error: rgb(186 26 26);
    --color-on-error: rgb(255 255 255);
    --color-error-container: rgb(255 218 214);
    --color-on-error-container: rgb(147 0 10);
    --color-background: rgb(255 247 252);
    --color-on-background: rgb(31 26 32);
    --color-surface: rgb(233 179 255);
    --color-on-surface: rgb(31 26 32);
    --color-surface-variant: rgb(237 222 238);
    --color-on-surface-variant: rgb(77 67 80);
    --color-outline: rgb(127 115 129);
    --color-outline-variant: rgb(208 194 209);
    --color-shadow: rgb(0 0 0);
    --color-scrim: rgb(0 0 0);
    --color-inverse-surface: rgb(52 46 53);
    --color-inverse-on-surface: rgb(249 237 247);
    --color-inverse-primary: rgb(233 179 255);
    --color-primary-fixed: rgb(247 216 255);
    --color-on-primary-fixed: rgb(49 0 72);
    --color-primary-fixed-dim: rgb(233 179 255);
    --color-on-primary-fixed-variant: rgb(105 39 137);
    --color-secondary-fixed: rgb(247 216 255);
    --color-on-secondary-fixed: rgb(41 17 53);
    --color-secondary-fixed-dim: rgb(221 187 233);
    --color-on-secondary-fixed-variant: rgb(87 61 99);
    --color-tertiary-fixed: rgb(255 217 226);
    --color-on-tertiary-fixed: rgb(63 0 28);
    --color-tertiary-fixed-dim: rgb(255 177 199);
    --color-on-tertiary-fixed-variant: rgb(131 31 72);
    --color-surface-dim: rgb(225 215 224);
    --color-surface-bright: rgb(255 247 252);
    --color-surface-container-lowest: rgb(255 255 255);
    --color-surface-container-low: rgb(251 240 250);
    --color-surface-container: rgb(246 235 244);
    --color-surface-container-high: rgb(240 229 238);
    --color-surface-container-highest: rgb(234 223 233);
  }
}

body {
  background-color: var(--color-surface);
}

a:hover {
  color: var(--color-tertiary);
}
a {
  color: var(--color-primary);
  text-decoration-color: rgba(0, 0, 0, 0);
}

footer {
  background-color: rgba(0, 0, 0, 0) !important;
  a {
    color: var(--color-primary);
  }
}

.container {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container) !important;
}

.wrap {
  box-shadow: none;
  border: none;
  border-radius: 16px;
}

.button:hover {
  background: #333;
  color: #fff;
}

.button {
  background: var(--color-primary);
  color: var(--color-on-primary);
}