@font-face {
    font-family: 'ebgaramond';
    src: url('fonts/ebgaramond-variablefont_wght.woff2') format('woff2');
    font-style: normal;
    font-display: fallback;
	}
@font-face {
    font-family: 'ebgaramond-italic';
    src: url('fonts/ebgaramond-italic-variablefont_wght.woff2') format('woff2');
    font-style: italic;
    font-display: fallback;
	}

* {
    margin: 0;
    padding: 0;
	}
html {
    background-color: white;
    color: black;
	}
body {
    background-color: rgb(255,255,255);
    color: rgb(33,33,33);
    font-family: 'ebgaramond', serif;
    font-size:20px;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
	}
@media screen and (prefers-color-scheme: dark) {
    html {
        background-color: black;
        color: color;
    }
    body {
        background-color: rgb(33,33,33);
        color: rgb(204,204,204);
    }
    }
cite,em,i,blockquote,q {
    font-family: 'ebgaramond-italic', serif;
	}
strong, b {
	font-family: 'ebgaramond-italic', serif;
	font-weight: bold;
	font-style: italic;
	letter-spacing: 0.05em;
	}
h1,h2,h3 {
    font-weight: normal;
    font-family: 'ebgaramond-italic', serif;
    font-style: italic;
    line-height: 1;
    margin: 0;
    padding: 0;
    text-decoration: none;
	}
h1 {
    font-size: 2em;
	}
h2 {
    font-size: 1.5em;
    padding: 0 0 1em 0;
	}
h3 {
	font-size: 1.2em;
	padding: 0;
	}
p, ul, ol, li {
    margin: 0;
    padding: 0 0 1em 0;
	}
a:link {
    color: rgb(204,0,0);
	}
a:visited {
    color: rgb(153,0,0);
	}
a:hover,
a:focus {
    color: rgb(255,0,0);
}
a:active {
    color: rgb(102,0,0);
	}
@media screen and (prefers-color-scheme: dark) {
    a:link {
        color: rgb(205,92,92);
    }
    a:visited {
        color: rgb(205,75,75);
    }
    a:hover,
    a:focus {
        color: rgb(255,102,102);
    }
    a:active {
        color: rgb(136,51,51);
    }
    }
mark {
    background-color: transparent;
    color: inherit;
	}

.logo-l, .logo-r {
    display: block;
    font-weight: normal;
    font-family: 'ebgaramond-italic', serif;
    font-style: italic;
    font-weight: 500;
    line-height: 1;
    text-transform: lowercase;
    font-size: 9vw;
    color: rgb(51,51,51);
    text-decoration: none;
    margin: 0;
	}
a.logo-l, a.logo-r {
    color: rgb(51,51,51);
	}

@media screen and (prefers-color-scheme: dark) {
    .logo-l, .logo-r,
    a.logo-l, a.logo-r {
        color: rgb(153,153,153);
    }
    }
.logo-l, {
	padding: 0;
	}
.logo-r {
	padding: 0;
	text-align: right;
	}
header {
	box-sizing: border-box;
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.5rem;
    }
nav,
main,
footer > div {
    box-sizing: border-box;
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
    padding: 1.5rem;
	}
header a {
	text-decoration: none;
	}
nav {
    font-variant: small-caps;
    font-size: 1.3em;
    letter-spacing: 0.1em;
	}
nav > * {
    display: block;
	}
@media screen and (min-width: 30rem) {
    nav {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
	}
nav a {
    text-decoration: none;
	}
main {
    flex: 1;
    font-size: 1em;
    padding-bottom: 2em;
	}
main > p:first-of-type {
    font-size: 1.2em;
    line-height: 1.35;
	}
footer {
    text-align: center;
    background-color: rgb(153,153,153);
    color: rgb(255,255,255);
	}
footer p {
	font-variant: small-caps;
    font-size: 1em;
    letter-spacing: 0.1em;
	padding: 1em 0;
	}
footer a {
	text-decoration: none;
	}