@charset "utf-8";
: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);
  }
}


#theme-button {
  display:none;
}

#theme-button-label {
  float:right;
  margin:8px;
  cursor: pointer;
}

#social-links {
  padding: 8px;
}

.theme-wrapper {
  /*background-image:var(--bg-img);*/
  background-color:var(--color-surface);
  color: var(--color-on-surface);
/*   background-repeat:no-repeat; */
/*   background-size:cover; */
/*   image-rendering:crisp-edges; */
  height: 100%;
  padding: 8px;
}

.card {
  padding: 16px;
  border-radius: 16px;
  display: table;
  margin: auto;
  max-width: 32em;
  h2, h3 {
    margin-top: 8px;
    margin-bottom: 8px;
    text-align: start;
  }
  p {
    text-align:start;
  }
}
.primary {
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
}
.secondary {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

.social-link {
  margin-left: 8px;
  text-decoration: none;
}

.row {
  display: flex;
  align-items: baseline;
}

.date {
    margin-left: auto;
    font-style: italic;
}

html{
  background-color:var(--color-surface);
  height: 100%;
}

body {
  color: var(--color-on-surface);
  text-align: center;
  height: 100%;
  margin: 0px;
}

h1 {
  color: var(--color-primary);
  padding: 16px;
  border-radius: 8px;
  margin-top: 0px;
  margin-bottom: 4px;
}

a {
  color: var(--color-primary)
}
h2 {
  color: var(--color-secondary);
  margin-left: 16px;
  margin-bottom: 12px;
}

nav {
    background-color: var(--color-primary-container);
    padding: 12px;
    border-radius: 32px;
    display: table; /* To keep the background wrapped around text */
	margin:auto;
	ul {
	   padding: 0px;
	   margin: 0px
	} /* Because chromium is annoying and doesnt do automatic spacing between nav items */
	a {
      color: var(--color-on-primary-container);
      padding: 16px;
      text-decoration: none;
	}
	svg {
      color: var(--color-on-primary-container);
    }
}
svg {
  color: var(--color-on-surface);
  height: 24px;
  vertical-align: bottom;
  padding-right: 2px
}

footer {
  font-size: small;
  left: 1;
  bottom: 0;
  position: fixed;
  a {
    color: var(--color-outline);
  }
}