pre {
    color: #F8F8F2;
    background-color: #282A36;
    line-height: 200%;
}

pre > .hl-keyword {
    color: #FF79C6;
}

pre > .hl-property {
    color: #50FA7B;
}

pre > .hl-attribute {
    font-style: italic;
}

pre > .hl-type {
    color: #8BE9FD;
}

pre > .hl-generic {
    color: #9d3af6;
}

pre > .hl-value {
    color: #F1FA8C;
}

pre > .hl-literal {
    color: #F1FA8C;
}

pre > .hl-number {
    color: #F1FA8C;
}

pre > .hl-variable {
    color: #F8F8F2;
}

pre > .hl-comment {
    color: #9eade1;
}

pre > .hl-blur {
    filter: blur(2px);
}

pre > .hl-strong {
    font-weight: bold;
}

pre > .hl-em {
    font-style: italic;
}

pre > .hl-addition {
    display: inline-block;
    min-width: 100%;
    background-color: #00FF0022;
    margin-left: -70px;
    padding-left: 70px;
    width: calc(100% + 80px);
}

pre > .hl-deletion {
    display: inline-block;
    min-width: 100%;
    background-color: #FF000011;
    margin-left: -70px;
    padding-left: 70px;
    width: calc(100% + 80px);
}

pre > .hl-gutter {
    display: inline-block;
    font-size: 0.9em;
    color: #555;
    padding: 0 1ch;
    margin-right: 1ch;
    user-select: none;
}

pre > .hl-gutter-addition {
    background-color: #34A853;
    color: #fff;
}

pre > .hl-gutter-deletion {
    background-color: #EA4334;
    color: #fff;
}



code {
    background-color: #f4f4f4;
    line-height: 200%;
    padding: 2px 7px;
    margin: 0 2px;
    border-radius: 4px;
    word-break: keep-all;
}

code > .hl-keyword {
    color: #A01E7A;
}

code > .hl-property {
    color: #0B5E0B;
}

code > .hl-attribute {
    font-style: italic;
}

code > .hl-type {
    color: #0066A1;
}

code > .hl-generic {
    color: #5A1FA1;
}

code > .hl-value {
    color: #704D00;
}

code > .hl-literal {
    color: #704D00;
}

code > .hl-number {
    color: #704D00;
}

code > .hl-variable {
    color: #1A1A1A;
}

code > .hl-comment {
    color: #4A5568;
}