:root {
  --padding: 0.5em;
  --page-padding: calc(var(--padding) * 4);
  --page-width: 60rem;
  --photo-height: 10rem;
  /* colours in descending order of brightness */
  --bg: #ffffff;
  --page-bg: #f1f1f1;
  --shade-content: #efefef;
  --shade-alt-row: #ededed;
  --shade-header: #ebebeb;
}

* {
  /* box-sizing: border-box; */
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(0,653,469)'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23ffffff'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='589' height='490.8' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.02'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
}

body>main {
  /* A paper page aesthetic */
  margin: max(0rem, min(6rem, calc(90vw - var(--page-width))));
  padding: var(--page-padding);
  max-width: calc(var(--page-width) + var(--page-padding));
  background-color: var(--page-bg);
  box-shadow: 0rem 0rem 3rem rgba(102, 102, 102, 0.4);
  /* grid */
  display: grid;
  grid-template-columns: 0.3fr 1fr;
  column-gap: calc(var(--padding) * 2);
  grid-template-areas: "header header" "left right" "footer footer"
}

body>main>header {
  grid-area: header;
  padding-bottom: calc(var(--padding) * 4);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
}

body>main>.left {
  grid-area: left;
}

body>main>.right {
  grid-area: right;
}

body>main>footer {
  grid-area: footer;
}

hr {
  height: 0px;
  background: transparent;
  width: 100%;
  border: none;
  border-top: solid 1px #aaa;
  border-bottom: solid 1px #666;
}

/* An article is a single embedded block that has an icon a title and content */

article {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--padding);
  padding-bottom: calc(var(--padding) * 4);
}

article>header {
  text-align: end;
}

article>main {
  grid-column: 1 / 3;
}

/* article>main {
  grid-column: 2 / 3;
} */

/* article {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--padding);
  grid-template-rows: auto auto;
  padding-bottom: calc(var(--padding) * 4);
}

article>img {
  grid-row: 1 / 3;
} */

/* article>header>hr {
  margin-bottom: var(--padding);
} */

#header-photo {
  border: 2px solid black;
  border-radius: 100%;
  height: var(--photo-height);
}

a {
  color: inherit;
  text-decoration: inherit;
}

a:hover {
  color: blue;
  text-decoration: underline;
}

ul {
  list-style-position: inside;
}

li {
  margin-bottom: calc(var(--padding) / 2);
}

li:nth-child(even) {
  background-color: var(--shade-alt-row);
}

.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--padding) * 2);
}

/* Layouting for a box of content inside an article */

.content-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--shade-header);
}

.content-content {
  border-top: dotted 1px #aaa;
}

.content-buffer {
  padding-top: var(--padding);
  padding-bottom: var(--padding);
}

.greyed-out {
  color: #999999;
}

@media only screen and (max-width: 799px) {
  /* For small screens */
  body>main {
    grid-template-areas: "header header" "right right" "footer footer" "left left"
  }
  article>main {
    grid-column: 1 / 3;
  }
}

@media print {
  body>main {
    /* No longer Page aesthetic, full screen, no shadow */
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.025);
  }
  .no-print, .no-print * {
    display: none !important;
  }
}