/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.light {
  --md-sys-color-primary: rgb(103 85 142);
  --md-sys-color-surface-tint: rgb(103 85 142);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(234 221 255);
  --md-sys-color-on-primary-container: rgb(78 61 117);
  --md-sys-color-secondary: rgb(98 91 112);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(233 222 248);
  --md-sys-color-on-secondary-container: rgb(74 67 88);
  --md-sys-color-tertiary: rgb(0 107 95);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(158 242 227);
  --md-sys-color-on-tertiary-container: rgb(0 80 71);
  --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(254 247 255);
  --md-sys-color-on-background: rgb(29 27 32);
  --md-sys-color-surface: rgb(254 247 255);
  --md-sys-color-on-surface: rgb(29 27 32);
  --md-sys-color-surface-variant: rgb(231 224 235);
  --md-sys-color-on-surface-variant: rgb(73 69 78);
  --md-sys-color-outline: rgb(122 117 127);
  --md-sys-color-outline-variant: rgb(203 196 207);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(50 47 53);
  --md-sys-color-inverse-on-surface: rgb(245 239 247);
  --md-sys-color-inverse-primary: rgb(209 188 253);
  --md-sys-color-primary-fixed: rgb(234 221 255);
  --md-sys-color-on-primary-fixed: rgb(34 15 70);
  --md-sys-color-primary-fixed-dim: rgb(209 188 253);
  --md-sys-color-on-primary-fixed-variant: rgb(78 61 117);
  --md-sys-color-secondary-fixed: rgb(233 222 248);
  --md-sys-color-on-secondary-fixed: rgb(30 25 43);
  --md-sys-color-secondary-fixed-dim: rgb(204 194 219);
  --md-sys-color-on-secondary-fixed-variant: rgb(74 67 88);
  --md-sys-color-tertiary-fixed: rgb(158 242 227);
  --md-sys-color-on-tertiary-fixed: rgb(0 32 28);
  --md-sys-color-tertiary-fixed-dim: rgb(130 213 199);
  --md-sys-color-on-tertiary-fixed-variant: rgb(0 80 71);
  --md-sys-color-surface-dim: rgb(222 216 224);
  --md-sys-color-surface-bright: rgb(254 247 255);
  --md-sys-color-surface-container-lowest: rgb(255 255 255);
  --md-sys-color-surface-container-low: rgb(248 241 250);
  --md-sys-color-surface-container: rgb(242 236 244);
  --md-sys-color-surface-container-high: rgb(236 230 238);
  --md-sys-color-surface-container-highest: rgb(231 224 232);
}

.light-medium-contrast {
  --md-sys-color-primary: rgb(61 44 99);
  --md-sys-color-surface-tint: rgb(103 85 142);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(118 99 158);
  --md-sys-color-on-primary-container: rgb(255 255 255);
  --md-sys-color-secondary: rgb(57 51 71);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(113 105 127);
  --md-sys-color-on-secondary-container: rgb(255 255 255);
  --md-sys-color-tertiary: rgb(0 62 55);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(30 122 110);
  --md-sys-color-on-tertiary-container: rgb(255 255 255);
  --md-sys-color-error: rgb(116 0 6);
  --md-sys-color-on-error: rgb(255 255 255);
  --md-sys-color-error-container: rgb(207 44 39);
  --md-sys-color-on-error-container: rgb(255 255 255);
  --md-sys-color-background: rgb(254 247 255);
  --md-sys-color-on-background: rgb(29 27 32);
  --md-sys-color-surface: rgb(254 247 255);
  --md-sys-color-on-surface: rgb(18 16 22);
  --md-sys-color-surface-variant: rgb(231 224 235);
  --md-sys-color-on-surface-variant: rgb(56 53 61);
  --md-sys-color-outline: rgb(85 81 90);
  --md-sys-color-outline-variant: rgb(112 107 117);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(50 47 53);
  --md-sys-color-inverse-on-surface: rgb(245 239 247);
  --md-sys-color-inverse-primary: rgb(209 188 253);
  --md-sys-color-primary-fixed: rgb(118 99 158);
  --md-sys-color-on-primary-fixed: rgb(255 255 255);
  --md-sys-color-primary-fixed-dim: rgb(93 75 132);
  --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
  --md-sys-color-secondary-fixed: rgb(113 105 127);
  --md-sys-color-on-secondary-fixed: rgb(255 255 255);
  --md-sys-color-secondary-fixed-dim: rgb(89 81 102);
  --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
  --md-sys-color-tertiary-fixed: rgb(30 122 110);
  --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
  --md-sys-color-tertiary-fixed-dim: rgb(0 96 85);
  --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
  --md-sys-color-surface-dim: rgb(202 197 204);
  --md-sys-color-surface-bright: rgb(254 247 255);
  --md-sys-color-surface-container-lowest: rgb(255 255 255);
  --md-sys-color-surface-container-low: rgb(248 241 250);
  --md-sys-color-surface-container: rgb(236 230 238);
  --md-sys-color-surface-container-high: rgb(225 219 227);
  --md-sys-color-surface-container-highest: rgb(213 208 216);
}

body {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  display: flex;
  justify-content: center;
}

h1, h2, .pre-header {
  font-family: "Charm", cursive;
  font-weight: 400;
  font-style: normal;
}

:root {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

#main-container {
  margin: 48px 16px 0px 16px;
  max-width: 990px;
}

h1 {
  color: var(--md-sys-color-primary);
  font-size: 72px;
  text-align: center;
  padding: 12px;
}

h2 {
  font-size: 24px;
  padding: 12px;
}

p {
  margin-top: 8px;
  margin-bottom: 8px;
}

a {
  color: var(--md-sys-color-primary);
}

#card-row {
  display: flex;
  flex-wrap: wrap;
}

.card {
  border: 1px solid var(--md-sys-color-primary);
  border-radius: 12px;
  margin: 24px;
  padding: 24px;

  flex: 1 0 300px;

  text-decoration: none;
  color: var(--md-sys-color-on-surface);


  transition:
    background-color 0.5s ease-in-out;
    color 0.5s ease-in-out;
}

.card:hover {
  color: var(--md-sys-color-on-primary-container);
  background-color: var(--md-sys-color-primary-container);
}

.card-img {
  font-size: 96px;
}

nav {
  margin-bottom: 16px;
}

nav ul {
  display: flex;
  flex-direction: row;
  /* or a media query? */
  flex-wrap: wrap;
  gap: 16px;
}

nav li a {
  font-size: 20px;
  text-decoration: none;
  font-weight: 700;
}

nav li[aria-current=page] a {
  color: var(--md-sys-color-on-surface);
}

.center-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}