:root {
    /* Set sans-serif & mono fonts */
    --font-accent: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    --font-text: system-ui, sans-serif;
    --font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    --font-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  
  /* Nord palette */
  --aurora-1: #bf616a;
  --aurora-2: #d08770;
  --aurora-3: #ebcb8b;
  --aurora-4: #a3be8c;
  --aurora-5: #b48ead;
  --frost-1: #8fbcbb; 
  --frost-2: #88c0d0; 
  --frost-3: #81a1c1; 
  --frost-4: #5e81ac; 
  --snow-1: #d8dee9;
  --snow-2: #e5e9f0;
  --snow-3: #eceff4;
  --nord-1: #2e3440;
  --nord-2: #3b4252;
  --nord-3: #434c5e;
  --nord-4: #4c566a;
  
  
  /* Default theme */
  color-scheme: light;
  --bg: #fff;
  --bg-contrast: var(--nord-1);
  --bg-light: var(--snow-2);
  --text: var(--nord-3);
  --text-contrast: var(--snow-2);
  --accent: var(--frost-2);
  --text-accent: var(--nord-1);
}


body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "header header"
    "main main"
    "footer footer";
  font-size: 6.6pt;
}

header {
  grid-area: header;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(3, auto);
} 

header h1 {
  white-space: wrap;
}

header h2 {
  margin: 0em .5em;
}

header ul {
  grid-column: 2 / 3;
  grid-row: 1 / 4;
  flex-direction: column;
  padding: 1em;
}

header p {
  padding: 2em 1em 1em 1em;
  margin-bottom: 0;
}

main {
  grid-area: main;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto;
  padding: 0;
  clear: both;
}

main h2 {
  white-space: wrap;
}

main article {
  grid-column: 1 / 2;
  padding: 10px 20px;
}

main article h2#work ~ ul:has( ~ h2#tech) li {
  border: 1px solid var(--bg-contrast);
}

main aside {
  margin-top: 10px;
  background-color: var(--bg-contrast);
  color: var(--text-contrast);
  grid-column: 2 / 3;
  padding: 10px 20px 30px;
}

main aside ul {
  list-style: inside;
  padding-left: 0;
}

footer {
  grid-area: footer;
  margin-top: 5px;
  margin-bottom: 0;
  padding-bottom: 0;
  padding-top: 5px;
}

/*** ornaments ***/
header p {
  position: relative;
  border-radius: 0 5px 0 0;
}
header p:after {
  content: "";
  display: block;
  position: absolute;
  width: 100px;
  height: 10px;
  background: linear-gradient(-90deg, var(--bg-contrast), var(--bg-contrast) 10%, var(--frost-4) 10%, var(--frost-4) 20%, var(--frost-3) 20%, var(--frost-3) 30%, var(--aurora-5) 30%, var(--aurora-5) 40%, var(--aurora-1) 40%, var(--aurora-1) 50%, var(--aurora-2) 50%, var(--aurora-2) 60%, var(--aurora-3) 60%, var(--aurora-3) 70%, var(--aurora-4) 70%, var(--aurora-4) 80%, var(--frost-1) 80%, var(--frost-1) 90%, var(--frost-2) 90%, var(--frost-2));
  top: -5px;
  right: -5px;
  border: 5px solid var(--bg);
  border-radius: 0px 100px 0 100px;
}

main aside {
  position: relative;
}

main aside {
  position: relative;
  border-radius:  0 0 0 5px;
}

main aside:after {
  content: "";
  display: block;
  position: absolute;
  width: 100px;
  height: 10px;
  background: linear-gradient(-90deg, var(--bg-contrast), var(--bg-contrast) 10%, var(--frost-4) 10%, var(--frost-4) 20%, var(--frost-3) 20%, var(--frost-3) 30%, var(--aurora-5) 30%, var(--aurora-5) 40%, var(--aurora-1) 40%, var(--aurora-1) 50%, var(--aurora-2) 50%, var(--aurora-2) 60%, var(--aurora-3) 60%, var(--aurora-3) 70%, var(--aurora-4) 70%, var(--aurora-4) 80%, var(--frost-1) 80%, var(--frost-1) 90%, var(--frost-2) 90%, var(--frost-2));
  bottom: -5px;
  left: -5px;
  border: 5px solid var(--bg);
  border-radius: 0 200px 0 200px;
}