* {
    font-family: Arial, Helvetica, sans-serif;
}
pre {
    max-width :100%;
    font-family: monospace;
    color: #dde;
    line-height: 1em;
}
html {
    background-color: #000400;
    width: 100vw;
    padding: 0;
    color: #cfc;
}
body {
    background-color: #010;
    max-width: 40em;
    padding: 2em 2em;
    padding-left: 4em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    line-height: 1.5em;
}
h1, h2, h3 {
    color: #ddf;
    margin-left: -1.5rem;
}
h1 {
    color: white;
}
ul {
    padding-left: 1em;
}
li::marker {
    color: white;
}
:link, :hover, :visited {
    margin-left: -1.5rem;
    /* color: #e0ffe0; */
    color: #e0e0ff;
    text-decoration: none;
}
:link {
    font-weight: bold;
}
:hover {
    color: #8ad;
}
:visited {
    font-weight: normal;
}
:link:before {
    content: "\27A1 ";
}
.site:link:before, .site:hover:before, .site:visited:before {
    color: #acf;
    content: "\27A4 ";
}
.http:link {
    color: #ffcc88;
}
.http:hover {
    color: #f84;
}
.http:link:before, .http:hover:before, .http:visited:before {
    color: #ffc;
}
.gemini:link:before, .gemini:hover:before, .gemini:visited:before {
    color: #acf;
}
.gopher:link {
    color: #8f8;
}
.gopher:hover {
    color: #0d0;
}
.unknown:link:before, .unknown:hover:before, .unknown:visited:before {
    color: #ffc;
}
.unknown:link {
    color: grey;
}
.unknown:hover {
    color: silver;
}
.unknown:link:before, .unknown:hover:before, .unknown:visited:before {
    color: grey;
}

@media screen and (max-width: 46em) {
    body {
        padding: 0 2em;
        margin: 0;
    }
    h1, h2, h3, :link, :hover, :visited {
        margin-left: 0em;
    }
    pre {
        font-size: 0.56rem;
        max-width: 100%;
        overflow: hidden;
    }
}