@font-face {
    font-family: 'Lato';
      src: url('fonts/Lato-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --background-colour: #fff;
    --primary-colour: #0167a4;
    --primary-colour-hover: #0191de;
    --text-colour: #000;
    --gray-colour: #777;
    --blockquote-border: rgb(229,229,229);
}

.darkonly {
  display:none;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-colour: #111;
        --text-colour: #fff;
        --gray-colour: #888;
    }
    .lightonly {
      display:none;
    }
    .darkonly {
      display:block;
    }
}

html {
    font-family: "Lato", Helvetica, Arial, sans-serif;
}

body {
	margin:0;
	padding:0;
	background-color:var(--background-colour);
	color:var(--text-colour);
}

a {
    text-decoration: none;
    font-weight:bold;
}

a:hover {
    text-decoration: underline;
}

div.container {
	box-sizing: border-box;
    width:100%;
    max-width:800px;
    margin:auto;
    padding:0 15px;
}

header {
    border-bottom:1px solid grey;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    padding:25px 0;
}

h1 {
    margin:0;
    font-size:20px;
}

header h1 span {
    color: var(--gray-colour);
}

header a {
    color: var(--text-colour);
}

header a:hover {
    color: var(--primary-colour-hover);
}

section.body img {
  image-rendering: pixelated;
  float:left;
  margin-right: 1em;
}

section.body::after {
  content: "";
  clear: both;
  display: table;
}

section a {
    color: var(--primary-colour);
}

section a:hover,
header a:hover{
    color: var(--primary-colour-hover);
}

div.rows {
  display:flex;
  flex-direction:row;
  gap: 20px;
  margin-top:50px;
}

div.rows div.row {
  flex:1;
}

div.rows div.row h1 {
  border-bottom: 1px solid var(--gray-colour);
  padding-bottom:8px;
  margin-bottom:16px;
}

h1.notfound {
  margin-top:1em;
}

div.rows div.row section p{
  margin-top:0;
  font-size:14px;
}

div.rows div.row.contact section {
  display:flex;
  flex-direction:row;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0;
}

div.rows div.row.contact section p {
  margin-bottom:0;
  font-size:12px;
  color: var(--gray-colour);
}

@media screen and (max-width: 699px) {
  div.rows {
    display:block;
  }
  div.rows div.row.contact {
    margin-bottom:1em;
  }
}

@media screen and (max-width: 579px) {
  div.rows {
    margin-top:20px;
  }
  section.body img {
    float:none;
    margin-right:0;
    margin-top:1em;
    max-width:100%;
  }
}