@import url('https://fonts.cdnfonts.com/css/sf-mono');

:root {
    --bg-color: #1F1F24;
    --text-main: #FFFFFF;
    --link-color: #A167E6;
    --link-hover-bg: #0056b3;
    --counter-color: grey;
    --syn-keyword: rgb(255 123 177);
    --syn-var: rgb(120 194 179);
    --syn-arr: #9EF1DD;
    --syn-arg-name: rgb(251 129 112);
    --syn-arg: #d8ca7c;
    --syn-comment: #7f8994;
    --syn-class: #9EF1DD;
    --syn-other: #D0A8FF;
    --syn-method: #A167E6;
}

html, body {
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: "SF Mono", monospace;
    font-palette: dark;
    line-height: 1.6;

    -webkit-text-size-adjust: 100%;
    font-size: clamp(12px, 3.5vw, 16px);
}

ol {
    margin: 0;
    padding: 5% 3%;
    list-style: none;
    counter-reset: counter;

    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;

    @media (width >= 768px) {
        padding: 5%;
    }
}

li {
    display: block;

    &::before {
        content: counter(counter);
        counter-increment: counter;
        display: inline-block;
        inline-size: 2.5ch;
        margin-inline-end: 1rem;
        color: var(--counter-color);
        font-variant-numeric: tabular-nums;
        text-align: end;
    }

    &:last-child::after {
        content: "|";
        margin-inline-start: 2px;
        color: var(--text-main);
        animation: typedjsBlink 0.7s infinite;
    }
}

a {
    color: var(--link-color);
    text-decoration: none;
    cursor: pointer;

    &:hover {
        color: var(--text-main);
        background-color: var(--link-hover-bg);
        border-radius: 4px;
    }

    &:is(:active, :visited) {
        color: var(--link-color);
    }
}

.keywrd { font-weight: bolder; color: var(--syn-keyword); }
.var { color: var(--syn-var); }
.arr { color: var(--syn-arr); }
.arg-name { color: var(--syn-arg-name); }
.arg { color: var(--syn-arg); }
.com { color: var(--syn-comment); }

.cls {
    color: var(--syn-class);
    &.other { color: var(--syn-other); }
}

.type.other { color: var(--syn-other); }
.method.other { color: var(--syn-method); }

.indent {
    display: inline-block;
    inline-size: 4ch;
}

@keyframes typedjsBlink {
    50% { opacity: 0; }
}