@import url("../fonts/iosevka-ss08.css");

:root {
    --main-font-size: 12pt;
    --light-fg: #000;
    --light-bg: #fff;
    --light-fg-alt: #808080;
    --dark-bg: #1c1c1c;
    --dark-fg: #bababa;
    --dark-fg-alt: #808080;
    --fg: var(--light-fg);
    --fg-alt: var(--light-fg-alt);
    --bg: var(--light-bg);
}

* {
    margin: 0;
    padding: 0;
}

body {
    padding-left: 24pt;
    background-color: var(--bg);
    line-height: 1.3;
    font-family: "Iosevka SS08 Web", monospace;
    font-size: var(--main-font-size);
    color: var(--fg);
}

@media only screen and (max-device-width: 480px) and (orientation: portrait) {
    body {
        padding-left: 12pt;
    }
}

header, section, footer {
    margin: 12pt 0;
    white-space: pre-wrap;
}

header {
    line-height: 1.25;
}

img.me {
    position: absolute;
    width: 42px;
    margin: -2pt;
    border-radius: 50%;
    border: 1px dotted var(--fg);
}

img.me.dimmed {
    filter: invert(20%);
}

h1, h2, h3 {
    display: inline-block;
    font-size: var(--main-font-size);
    font-weight: normal;
}

h1, h3 {
    font-weight: bold;
}

p {
    display: inline-block;
    max-width: 500px;
}

a, a:active, a:visited {
    color: var(--fg);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

footer a {
    font-weight: bold;
}

.emoji {
    font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji",
        Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif,
        LastResort;
    font-weight: normal;
}

.rainbow {
    background-image: linear-gradient(to right, red, coral, orange, green, cadetblue, purple);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.vim {
    color: var(--fg-alt);
}

.blink {
    animation: blink 1s steps(1) infinite;
}

@keyframes blink {
    50% { color: transparent; }
}