:root {
    --bg-color: #ffd1f0;
    --bg-color-2: #86c693;
    --bg-color-2-hov: #b8f5b4;
    --fg-color: #493b44;
    --fg-color-2: #1a271d;

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

    font-family: monospace;
    font-size: 16pt;

    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: 0.2s;
}

body {
    padding: 1em;
}

#content {
    width: 1000px;
}

div.header {
}

ul {
    list-style-type: none;
}

ul li {
    text-indent: -2em;
}

ul li:before {
    content: "- ";
}

#header {
    margin-bottom: 1em;
}

#header td {
    color: black;
}

#header .logo img {
    display: block;
    height: 3em;
    margin-right: 10px;
}

#content img {
    display: block;
    margin: auto !important;
    max-width: 40vw;
    max-height: 30vw;
    border: solid 1px black;
}

#content p {
    text-indent: 2ch;
}

a, a:visited {
    color: var(--fg-color) !important;
    transition: background 0.2s;
}

a:hover {
    color: var(--fg-color-2) !important;
    background: var(--bg-color-2);
}

.tabs a {
    margin-right: 2ch;
}

h1, h2, h3, h4, h5, h6 {
    color: black;
    font-size: 1rem;
}

h1 {
    border-bottom: solid 2px black;
}

h2 {
    border-bottom: dotted 2px black;
}

h4, h5, h6 {
    font-weight: normal;
}

h1:before {
    content: "# ";
    color: var(--bg-color-2) !important;
}

h2:before {
    content: "## ";
    color: var(--bg-color-2) !important;
}

h3:before {
    content: "### ";
    color: var(--bg-color-2) !important;
}

h4:before {
    content: "#### ";
    color: var(--bg-color-2) !important;
}

h5:before {
    content: "##### ";
    color: var(--bg-color-2) !important;
}

h6:before {
    content: "###### ";
    color: var(--bg-color-2) !important;
}

hr {
    border: none;
    border-bottom: solid 2px black;
}

@media(max-width: calc(1000px + 3em + 8px)) {
    #content {
        width: auto !important;
    }
}