:root {
    --fg:       #1d2021;
    --bg-alt:   #282828;

    /* --fg:       #ebdbb1; */

    --black:    #263640;
    --red:      #cc241d;
    --green:    #98971a;
    --yellow:   #d79921;
    --blue:     #458588;
    --magenta:  #b16282;
    --cyan:     #689d6a;
    --orange:   #d65d0e;

    --black-dim: #3c3836;

    color: var(--fg);
    /* background-color: var(--bg); */

    /* --banner-height: 386px; */
    /* --banner-width: 762px */
}

html {
    scrollbar-color: var(--green) var(--bg-alt);
    scrollbar-width: auto;
}

body {
    max-width: 735px;
    margin: auto;
    font-family: serif;
    color: var(--fg);
    /* background-color: var(--bg-alt); */
    padding: 1rem;
}

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

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

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

p { line-height: 1.61rem; }

.sep {
    height: 1px;
    background-color: var(--black);
}

.header {
    display: flex;
    /* flex-direction: column; */
    justify-content: left;
    margin: auto, 2rem;
    padding-top: 2rem;
    /* padding-bottom: 1rem; */
    /* gap: 3rem; */
    gap: 2rem;
}

.title {
    display: flex;
    align-items: center;
}

.title_image {
    image-rendering: pixelated;
}

.title_text {
    text-decoration: none;
    font-size: 20pt;
    font-weight: 600;
    color: var(--fg);
}

.middle {
    padding-bottom: 4rem;
    padding-top: 1rem;
}

.footer {
    padding: 2rem;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid var(--fg);
}

.contact_info {
    display: flex;
    gap: 1rem;
}

.contact_info > * {
    color: var(--blue);
    font-weight: bold;
    text-decoration: none;
}
.contact_info > *:hover {
    color: var(--cyan);
}