@font-face {
    font-family: "Fira Code";
    src:
        url("../fonts/FiraCode-Regular.woff2") format("woff2"),
        url("../fonts/FiraCode-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@media (min-resolution: 2dppx) {
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
}

::selection {
    background-color: hsl(154 84% 70%);
    color: hsl(154 5% 10%);
}

body {
    background: hsl(154 50% 5%);
    color: hsl(154 84% 70%);
    text-shadow: 0 0 4px hsl(154 84% 70%);
    font-family: "Fira Code", monospace;
    font-size: clamp(0.875rem, 0.8rem + 0.5vw, 1rem);
    padding: clamp(1rem, 5vw, 3rem);
    line-height: 1.5;
}

a {
    color: hsl(154 84% 70%);
}

p {
    max-width: 45rem;
    text-wrap: pretty;
}

article {
    position: relative;
    z-index: 1;
}

pre {
    margin: 0;
    padding: 0;
    font-size: clamp(0.5rem, 3vw, 1rem);
    margin-left: -2.1em;
    display: table;
    line-height: 1;
    position: relative;
    z-index: 1;
}

ul {
    padding: 0;
    li {
        padding-left: 1.5rem;
        list-style-type: none;

        &::before {
            content: "> ";
            position: absolute;
            left: 0;
            font-weight: bold;
        }
    }
}

#glare {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: radial-gradient(hsl(154 5% 15%) 0%, hsl(154 50% 5%) 100%);
}
.blink {
    display: inline;
    animation: blink 0.4s linear infinite;
}
#interlaced {
    position: fixed;
    background: repeating-linear-gradient(
        transparent 0px 1px,
        hsl(154 0% 0%/0.3) 3px 4px
    );
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    animation: lines 0.06s linear infinite;
}

@keyframes blink {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes lines {
    0% {
        background-position: 0px 0px;
    }
    50% {
        background-position: 0px 0px;
    }
    51% {
        background-position: 0px 2px;
    }
    100% {
        background-position: 0px 2px;
    }
}