@font-face {
    font-family: "Roboto Mono";
    src: url("fonts/RobotoMono-Regular.ttf");
    font-style: normal;
}

:root {
    --contentbackground1: hsl(218.2, calc(1 * 10.5%), 20.6%);
    --contentbackground2: hsl(220, calc(1 * 13%), 9%);
}

body {
    margin: 0;
    padding: 0;
}

.content {
    font-family: "Roboto Mono", serif;
    margin: auto;
    max-width: 62.5em;
    overflow: auto;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 2rem 2rem 0;
    display: flex;
    align-items: flex-start
}

.content-noflex {
    font-family: "Roboto Mono", serif;
    margin: auto;
    max-width: 62.5em;
    overflow: auto;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 2rem 2rem 0;
}

.notop {
    padding: 0 2rem 0;
}


.badges a {
    text-decoration: none;
}

@media (prefers-color-scheme: light) {
    body {
        background: #fff;
    }

    .content, .content-noflex {
        background: linear-gradient(#fff, #dbdde2);
        box-shadow: inset 0 1px 8px #0004;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background: #000;
    }

    .content, .content-noflex {
        background: linear-gradient(
            var(--contentbackground1),
            var(--contentbackground2)
        );
        color: white;
        box-shadow: inset 0 1px 8px #000;
    }

    a {
        color: #0ff3ff;
    }
}

.source_code_link {
    bottom: 0;
    font-size: 0.8em;
    margin-bottom: -2rem;
    float: right;
}

.bottom_left_float {
    bottom: 0;
    float: left;
    margin-top: 0;
}

.pfp {
    margin-right: 1rem;
    align-self: flex-start;
    border-radius: 50%;
    border: 3px solid #fff;
    box-sizing: border-box;
}

.content-body {
    flex: 1
}