:root {
    --background: #282a36;
    --current-line: #44475a;
    --foreground: #f8f8f2;
    --purple: #bd93f9;
    --green: #50fa7b;
    --cyan: #8be9fd;
    --orange: #ffb86c;
    --orange-hover: #fa9428;
    --comment: #6272a4;
    --comment-hover: #3954a7;
}

.return-str:after {
    content: "() -> str:";
    color: var(--foreground);
}

.return-list:after {
    content: "() -> list:";
    color: var(--foreground);
}

.return-dict:after {
    content: "() -> dict:";
    color: var(--foreground);
}

.return-none:after {
    content: "() -> None:";
    color: var(--foreground);
}

.return-int:after {
    content: "() -> int:";
    color: var(--foreground);
}

.call {
    color: var(--green);
}

.call:after {
    content: "()";
    color: var(--foreground);
}

.func {
    margin-left: 2em;
    width: 80%;
}

.var {
    display: flex;
}

.var .name:after {
    content: "=";
    margin-left: .5em;
}

.def {
    font-weight: 500;
    margin-bottom: .3em;
    color: var(--green);
}

.def:before {
    content: "def ";
    font-weight: 400;
    color: var(--purple);
}

.return {
    display: flex;
}

.return:before {
    content: "return";
    color: var(--purple);
}

.return p {
    margin-left: .5em;
}

.docstring:before {
    content: "\"\"\"";
}

.docstring:after {
    content: "\"\"\"";
}

.docstring {
    color: var(--comment);
    margin-bottom: 1em;
}

.dict {
    margin-left: .5em;
}

.dict:before {
    content: "{";
    color: var(--foreground);
}

.dict:after {
    content: "}";
    color: var(--foreground);
}

.dict ul {
    list-style: none;
}

.dict li {
    display: flex;
}

.dict li p:first-child:not(.str):after {
    content: ":";
}

.dict li p:first-child.str:after {
    content: "\":";
}

.dict li:not(:last-child):after {
    content: ",";
}

.list {
    margin-left: .5em;
}

.list:before {
    content: "[";
    color: var(--foreground);
}

.list:after {
    content: "]";
    color: var(--foreground);
}

.list ul {
    list-style: none;
}

.list li {
    display: flex;
}

.list li:not(:last-child):after {
    content: ",";
    color: var(--foreground);
}

.conditional ul {
    list-style: none;
}

.conditional li:first-child:before {
    content: "if";
    margin-right: .5em;
    color: var(--purple);
}

.conditional li:not(:first-child):nth-of-type(2n+1):before {
    content: "elif";
    margin-right: .5em;
    color: var(--purple);
}

.conditional li:nth-of-type(2n+1) {
    margin-top: .5em;
}

.conditional li:nth-of-type(2n+2) {
    margin-left: 1.8em;
}

.conditional li:nth-of-type(2n+1):after {
    content: ":";
}

.conditional .else:before {
    margin-right: 0 !important;
    content: "else" !important;
}

.str:before {
    color: var(--foreground);
    content: "\"";
}

.str:after {
    color: var(--foreground);
    content: "\"";
}

.str {
    color: var(--orange);
    margin-left: .5em;
}

.int {
    margin-left: .5em;
    color: var(--purple);
}

.bool-true:before {
    content: "True";
    margin-left: .5em;
    color: var(--purple);
}

.bool-false:before {
    content: "False";
    margin-left: .5em;
    color: var(--purple);
}

.comment:before {
    content: "# ";
}

.comment {
    color: var(--comment);
}

.comment a, .docstring a {
    color: var(--comment);
    text-decoration: underline;
}

.comment a:hover, .docstring a:hover {
    color: var(--comment-hover);
}

.str a {
    color: var(--orange);
    text-decoration: underline;
}

.str a:hover {
    color: var(--orange-hover);
}

@media screen and (max-width: 650px) {
    .func {
       width: 95%;
    }
}