html {
  font-family: system-ui, sans-serif;
}

:root {
  --black: #333333;
  --white: #FCFCFC;
  --primary: #558C03;
  --secondary: #AA0707;
  --tertiary: #F29F05;
  --width: 84ch;
  --icon-margin: 0.25rem;
}

body {
  height: 100vh;

  margin: 0;
  padding: 0;
  color: var(--black);
  background-color: var(--white);

  display: grid;
  grid-template-columns: 56.25% auto;
  align-items: start;
}

body > picture {
  height: 100vh;
  width: 43.75%;
  position: fixed;
  right: 0;
  top: 0;

  display: flex;
  align-items: center;

  img {
    width: 100%;
    height:100%;
    object-position: center;
    object-fit: cover;
  }
}

main {
  grid-area: 1 / 1 / 2 / 2;

  padding: 0 2rem 0 2rem;
  max-width: var(--width);
  justify-self: center;

  p {
      line-height: 1.5;
      hyphens: auto;
  }
    
}

article {
  padding-bottom: 4rem;
}

a {
  text-decoration: none;
  display: inline-block;
}
  
main > article {
  margin-bottom: 4rem;
}

main > header {
  margin-bottom: 1rem;
}

header > a {
  color: var(--primary);
  font-size: 4rem;
  font-weight: bold;
  text-transform: uppercase;
}

main > header > p {
  font-weight: bold;
  font-style: italic;
  margin: 0;
}

h1 {
  font-size: xx-large;
  padding: 0;
  margin: 0;
}

h1 + p {
  margin-top: 0;
}

h2 {
  color: var(--secondary);
  text-transform: uppercase;
  font-size: medium;
  padding: 0;
  margin: 0;
}

aside {
  margin: 0 3rem 0 2rem;
  padding: 1rem 0 1rem 0;
  border-top: 3px solid var(--tertiary);
  border-bottom: 3px dotted var(--tertiary);

  header {
    display: flex;
  }

  header > h4 {
    padding: 0;
    margin: 0 0 0 var(--icon-margin);
  }
}

table {
  padding: 0 0 1rem 2rem;

  td {
    padding: 0 0 0 1rem;
  }

  td:nth-child(3) {
    font-weight: bold;
  }
}

/* Workaround to conceal Python-Markdown requirement to have headers for tables */
h2 + table {
  margin-top: -1rem;
}

@media only screen and (max-width: 800px) {
  body {
    display: block;
  }

  picture {
    display: none !important;
  }
}