$background:     hsl(210, 14%, 9%);
$text:           mix(hsl(210, 60%, 95%), $background, 85%);
$text-minus:     mix(hsl(210, 100%, 95%), $background, 60%);
$text-faint:     mix(hsl(210, 100%, 95%), $background, 40%);
$text-plus:      #fff;
$sel-background: $text;
$sel-text:       #000;

@font-face {
    font-family: 'IBM Plex Mono';
    font-style:  normal;
    font-weight: normal;
    src: url('/assets/IBMPlexMono-Regular.woff2') format('woff2'),
         url('/assets/IBMPlexMono-Regular.woff')  format('woff');
}

body {
    background-color: $background;
    color:            $text;
}

.wrap {
    text-align: center;
}

.content {
    display:     inline-block;
    min-width:   50em;
    margin:      0;
    padding:     2em 1em;
    text-align:  left;
    font-family: 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;
    font-size:   1em;
    line-height: 1.5;
}

::selection {
    color:            $sel-text;
    background-color: $sel-background;
}

:link {
    color: $text-plus;
}

:visited {
    color: $text;
}

:link, :visited {
    &:hover {
        color: $text-plus;
    }
}

.link-type {
    color: $text-minus;
}