/* -------------------------------------------------------------------------- */
/* Body */
/* -------------------------------------------------------------------------- */
body {
    font-family: monospace, monospace;
    /* font-size: 16px; */
    background: linear-gradient(0deg, var(--bg4), var(--bg_h)) fixed ;
    color: var(--fg);
    height: 100vh;
    max-width: 65rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* -------------------------------------------------------------------------- */
/* Header */
/* -------------------------------------------------------------------------- */
header {
    padding: 1rem;
    background: var(--bg);
    border: 1px solid var(--bg3);
}

header h1 {
    font-size: 2.2rem;
    color: var(--yellow);
    margin: 0;
    padding: 0;
}

/* -------------------------------------------------------------------------- */
/* Navigation */
/* -------------------------------------------------------------------------- */
nav {
    padding-left: 1rem;
    padding-right: 1rem;
    background: var(--bg);
    border: 1px solid var(--bg3);
}
nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    display: flex;
}
nav ul li {
    display: inline-block;
}
nav a {
    display: block;
    padding: 0.25rem 1rem;
}
nav ul ul {
    display: none;
    position: absolute;
    background: var(--bg);
    border: 1px solid var(--bg3);
}
nav ul li:hover > ul {
    display: inherit;
}
nav ul ul li{
    display: list-item;
    position: relative;

}

nav li a.active {
    background-color: var(--bg1);
}

/* -------------------------------------------------------------------------- */
/* Main content */
/* -------------------------------------------------------------------------- */
main {
    flex: auto;
    padding: 1rem;
    background: var(--bg);
    border: 1px solid var(--bg3);
    overflow: auto;
}

/* -------------------------------------------------------------------------- */
/* Footer */
/* -------------------------------------------------------------------------- */
footer {
    padding: 0.25rem 1rem;
    background: var(--bg);
    border: 1px solid var(--bg3);
    text-align: right;
}

/* -------------------------------------------------------------------------- */
/* General styling */
/* -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    color: var(--yellow-dim);
}

h1:first-of-type, h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6 {
    margin-top: 0.5rem;
}

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

h2 {
    color: var(--green-dim);
}

p {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

code {
    background-color: var(--bg1);
    color: var(--fg1);
}

pre {
    background-color: var(--bg1);
    color: var(--fg1);
    padding: 0.5rem;
    border: 0;
    overflow-x: auto;
}

blockquote {
    border-left: 0.25rem solid var(--orange);
    background-color: var(--bg1);
    margin: 0.5rem;
}
blockquote > p {
    padding: 0.5rem;
}

mark {
    background-color: var(--aqua-dim);
}

hr {
    border: none;
    border-top: 1px solid var(--orange-dim);
    width: 100%;
}

a, a:active, a:visited {
    color: var(--red);
}
a:hover {
    background-color: var(--bg_h);
    color: var(--red-dim);
}

::selection {
    background: var(--purple);
}

/* -------------------------------------------------------------------------- */
/* Lists */
/* -------------------------------------------------------------------------- */
ul {
    margin-block-start: 0.5rem;
}
ul ul {
    margin-block-start: 0;
}
ul > li::marker {
    color: var(--green-dim);
}
ol > li::marker {
    color: var(--green);
}
dl > dt {
    color: var(--green);
}

/* -------------------------------------------------------------------------- */
/* Forms */
/* -------------------------------------------------------------------------- */
form {
    display: grid;
    grid-gap: 0 1rem;
    grid-template-columns: auto auto 1fr;
}

form * {
    grid-column: 1 / 4;
}

form label {
    grid-column: 1 / 2;
}

input, textarea, button, select {
    background-color: var(--bg_s);
    color: var(--fg);
    /* min-width: 40ch; */
    border: 1px solid var(--aqua-dim);
    margin-bottom: 0.5rem;
    grid-column: 2 / 3;
}

input:focus, textarea:focus, button:focus, select:focus {
    outline: 1px solid var(--aqua);
}

/* -------------------------------------------------------------------------- */
/* Tables */
/* -------------------------------------------------------------------------- */
table, th, td, fieldset {
    border-collapse: collapse;
    padding: 0.15em 1em;
}

th, td {
    border-right: 1px solid var(--bg2);
}
th:last-of-type, td:last-of-type {
    border-right: none;
}

th {
    border-bottom: 2px solid var(--bg4);
}
td {
    border-bottom: 1px solid var(--bg4);
}

thead th:empty {
    display: none;
}

/* -------------------------------------------------------------------------- */
/* Images */
/* Classes used: photo, gallery */
/* -------------------------------------------------------------------------- */
img.photo {
    margin: 0.5rem;
}