---
---

html, body {
    overflow-x: hidden;
    background-color: white;
    font-family: sans-serif;
    vertical-align: baseline;
}

h1 {
    margin: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    padding-left: 2rem;
}

blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr;

    a {
        color: #1569C7;
    }

    a:visited {
        color: purple;
    }

    h3 {
        margin-top: 1rem;
        margin-bottom: 0.3rem;
    }

    sup {
        color: #1569C7;
        ::before {
            content: '[';
        }
        ::after {
            content: ']';
        }
        a {
            text-decoration: none;
        }
    }


    .page-title {
        grid-column-start: 1;
        grid-column-end: 3;
    }

    .content {
        grid-column-start: 1;

        .tag::before {
            content: '#'
        }

        ul.sites {
            list-style-type: none;
            padding: 0;
        }
    }

    .sidebar {
        grid-column-start: 2;
        padding-left: 2rem;

        .external-links {
            .external-link {
                font-size: 0.8rem;
            }
        }

        a {
            color: dimgray;
        }

        #identicon {
            text-align: center;
        }

        a.button {
            display: block;
            padding: 0.2rem 0;
            text-align: center;
            border: 2px solid lightgray;
            text-decoration: none;
            margin-bottom: 0.3rem;
            font-size: 0.9rem;
            text-transform: uppercase;
            transition-duration: 0.1s;
        }

        a.button:hover {
            background-color: lightgray;
            color: #111111
        }
    }

    div.subtitle-stuff {
        color: grey;
        font-size: 0.8rem;

        a {
            color: grey;
        }
    }

    code {
        font-family: monospace;
    }

    p {
        margin: 1rem 0;
    }

    .inlist {
        columns: 1rem 3;
    }

    @media (max-width: 768px) {
        display: block;

        .sidebar {
            padding-left: 0;
        }
    }
}