/* drak.org css */

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/geist-mono.woff2) format('woff2');
}

@font-face {
    font-family: 'Raleway-Bold';
    font-style: normal;
    font-weight: 800;
    src: url(/fonts/Raleway-Bold.woff2) format('woff2');
}

body {
    background-color: #eee;
    color: #111;
    font-family: 'Geist', 'Courier New', Courier, monospace;
    margin: 0 auto;
    padding: 0 0 26px 0;
    max-width: 1600px;
    min-height: 89vh;
    position: relative;
}

h1 {
    font-family: 'Raleway-Bold', sans-serif;
    font-size: 1.4em;
    font-weight: bold;
    margin: 20px 30px;
    padding: 0;
    border-bottom: 1px solid #ccc;
    position: relative;

    .estd {
        position: absolute;
        right: 0;
        top: 5px;
        text-align: right;
        font-size: 0.6em;
        font-weight: normal;
        font-family: 'Geist', sans-serif;
    }
}

.backlink {
    margin: 0 50px 20px 50px;
    font-size: 0.8em;
}

h2 {
    margin: 10px 30px;
    font-family: 'Raleway-Bold', sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    position: relative;

    time {
        font-size: 0.8em;
        font-weight: normal;
        position: absolute;
        right: 0;
        top: 3px;
    }
}

h3 {
    margin: 6px 30px;
    font-family: 'Raleway-Bold', sans-serif;
    font-size: 1.1em;
    font-weight: bold;
}

p {
    margin: 0 45px;
    text-indent: 2em;
    clear: both;
}

p + p {
    margin: 10px 45px;
}

p + h2 {
    margin: 20px 30px 10px 30px;
}

img {
    display: block;
    margin: 20px auto;
    max-width: 100%;
}

pre {
    background-color: #e7e7e7;
    margin: 5px 40px;
    padding: 10px;
    code {
        font-family: 'Courier New', Courier, monospace;
    }
}

ul {
    margin: 10px 45px;
}

.figures {
    display: flex;
    padding: 10px 10%;
}

figure {
    img {
        max-width: 70%;
        margin: 5px;
    }
    figcaption {
        font-size: 0.8em;
    }
}

hr {
    margin: 10px 45px;
}

#footer {
    position: absolute;
    text-align: right;
    margin: 0;
    padding: 3px;
    font-size: 0.8em;
    right: 0;
    bottom: 0;
}