:root {
    --color-el-tag:rgb(112, 112, 112);
    --color-html-tag: rgb(120, 33, 33);
    --color-html-attribute-name: rgb(236, 87, 87);
    --color-html-attribute-value: rgb(76, 142, 241);
}

.dark-mode {

    --color-el-tag:rgb(112, 112, 112);
    --color-html-tag: rgb(49, 141, 184);
    --color-html-attribute-name: rgb(155, 187, 220);
    --color-html-attribute-value: rgb(242, 151, 102);

}

.el-tag {
    color: var(--color-el-tag);
}

.html-tag {
    color: var(--color-html-tag);
}

.html-attribute-name {
    color: var(--color-html-attribute-name);
}

.html-attribute-value {
    color: var(--color-html-attribute-value);
}

.html-external-link {
    color: var(--color-html-attribute-value);
    position: relative;
}

.html-external-link::after {
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    top: 100%;
    left: 0%;
    background: var(--color-html-attribute-value);
}

pre {
    display: block;
    margin: 0;
    text-align: left;
    overflow: hidden;
}

@media (max-width: 500px) {
    pre {
        overflow-x: auto;
    }
}