/* eb-garamond-latin */
@font-face {
	font-family: EB Garamond;
	font-style: normal;
	font-weight: 400;
	font-stretch: 100%;
	src: local("EB Garamond Regular"), local("EBGaramond-Regular"), url(/fonts/eb-garamond/eb-garamond-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
}
/* eb-garamond-latin-ext */
@font-face {
	font-family: EB Garamond;
	font-style: normal;
	font-weight: 400;
	font-stretch: 100%;
	src: local("EB Garamond Regular"), local("EBGaramond-Regular"), url(/fonts/eb-garamond/eb-garamond-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
}

:root {
    --background-color: var(--black);
    --background-color-w-opacity: var(--black); /* do I care about opacity. nahh */
    --nav-bg-color: var(--black);
    --h1-color: var(--orange);
    --h2-color: var(--green);
    --h3-color: var(--blue);
    --p-color: var(--white);
    --end-of-table-color: var(--p-color);

    --black: #232323;
    --red: #FF5454;
    --green: #00CC7A;
    --yellow: #FFd700;
    --orange: #FF7431;
    --blue: #00BFFF;
    --cyan: #00BFFF;
    --white: #BFBFBF;
    --bright-black: #767C77;
    --bright-red: #FF1A75;
    --bright-green: #1affa3;
    --bright-yellow: #ffff00;
    --bright-orange: #ffaa54;
    --bright-blue: #28c9ff;
    --bright-cyan: #33ffff;
    --bright-white: #f9f9f9;
    --baby-blue: #9adcff;
    --lemon-yellow: #fff2b3;
    --aurora: #b2f3ac;
    --oxley: #659b75;
    --violet: #af74ee;
}

* {
    font-family: "EB Garamond", "CodeNewRoman Nerd Font Mono", "Consolas";
/*    font-size: 1.05em; */
}

body {
    font-family: "EB Garamond";
    font-size: 1.1em;
    text-align: left;
    background-color: var(--background-color);
    color: var(--p-color);
    max-width: 800px;
    margin: auto;
    padding: 10px 10px;
}

h1 {
    color: var(--h1-color);
    font-size: 1.35em;
/*    text-align: center; */
}

h2 {
    color: var(--h2-color);
    font-size: 1.05em;
}

h3 {
    color: var(--h3-color);
    font-size: 0.9em;
}

/* for consistent sizes */ 
p, ol, ul, span {
    font-size: 0.9em;
}

a {
    color: var(--p-color);
    /* text-decoration: none; */
}

a:hover, a:active, a:focus {
    color: var(--violet);
}

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

ol, ul, li {
    color: var(--p-color);
    border-spacing: 0.09em 0.04em;
    border-radius: 0.20em; 
    border-collapse: collapse;
    padding: none;
    margin: 2px 0;
}

table {
    color: var(--p-color);
    text-align: left;
    border-spacing: 0.19em 10px;
    border-radius: 2.5em;
    border-collapse: collapse;
    margin: 25px 0;
    box-shadow: 0 0 20px var(--background-color-w-opacity);
    min-width: 400px;
    white-space: nowrap;
}

td {
    padding: 0px 10px;
}

tr {
}

tr:last-of-type {
    border-bottom: 2px solid var(--end-of-table-colour);
}


input, textarea {
    border: 2px solid var(--p-color);
    border-radius: 4px;
    background-color: var(--background-color);
    color: var(--p-color);
}

nav ul {
    background-color: var(--nav-bg-color);
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

    position: fixed;
    top: 0;
    bottom: 5;
    width: 100%;
    height: 4%;
/*    border-radius: 1em; */
    max-width: 800px; /* to match body */
}

nav a {
    padding-right: 3px;
    padding-left: 3px;
}

nav ul li {
/*    border: 1px solid #bbb; */
    float: left;
    display: block;
    width: inline;
    text-align: center;
    margin: 5px;
}

nav ul li a {
    text-decoration: none;
}

nav ul li a:hover {
    color: var(--h2-color);
}

footer {
    border-top: 1px solid #e8e8e8; padding: 30px 0;
}

header {
    border-bottom: 1px solid #e8e8e8; padding: 5px 5px;
}

.green {
    color: var(--green);
}

.yellow {
    color: var(--yellow);
}