:root {
    --black: #000807ff;
    --imperial-red: #fb4b4eff;
    --claret: #7c0b2bff;
    --engineering-orange: #d10000ff;
    --ghost-white: #fbf9ffff;

    --bg: var(--ghost-white);
    --text: var(--black);
    --link: var(--engineering-orange);
    --link-visited: var(--claret);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: var(--black);
        --text: var(--ghost-white);
        --link: var(--imperial-red);
        --link-visited: var(--engineering-orange);
    }
}

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

@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

body {
	font-family: "Open Sans", sans-serif;
	margin: 2em auto;
    max-width: 800px;
	line-height: 1.6;
    font-size: 18px;
    background-color: var(--bg);
	color: var(--text);
	padding: 1em;
}

h1,h2,h3{
    line-height:1.2
}

header > ul.menu {
    list-style-type: none;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
}

header > ul.menu > li::after {
    content: "|";
    margin-left: 8px;
}

header > ul.menu > li:last-child::after {
    content: "";
    margin-left: 0;
}

a {
   color: var(--link);
   font-weight: 600;
}

a:visited {
   color: var(--link-visited);
}

img {
    max-width: 100%;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #ffd6dd50;
}

div.hero {
    display: flex;
    flex-direction: row;
}

div.hero-text{
    margin-top: auto;
    margin-bottom: auto;
}

div.hero > img {
    border-radius: 14px;
    width: 256px;
}


@media (max-width: 800px) {
    body {
        line-height: 1.4;
    }
    div.hero {
        flex-direction: column;
    }

    div.hero > img {
        flex-direction: column;
        width: 100%;
    }
}