:root {
  --color-bg:#1f2022;
  --color-bg-code:#1f2022;
  --color-text:#eefbfe;
  --color-link:#fb30c4;
  --color-accent:#e1bd00c9;
  --overlay-brightness:.85;
  --body-width:800px;
}

[data-theme="dark"] {
  --color-bg:#1f2022;
  --color-bg-code:#1f2022;
  --color-text:#eefbfe;
  --color-link:#fb30c4;
  --color-accent:#e1bd00c9;
  --overlay-brightness:.85;
  --body-width:800px;
  --audio-filter: invert(100%);
}

[data-theme="light"] {
  --color-bg:#eefbfe;
  --color-bg-2:;
  --color-bg-code:#eefbfe;
  --color-text:#1f2022;
  --color-link:#fb30c4;
  --color-accent:#ffeb00;
  --overlay-brightness:.95;
  --body-width:800px;
  --audio-filter: invert(0%);
}

audio {
  filter: var(--audio-filter);
  width: -webkit-fill-available;
  margin: 1rem 5rem
}

html {
    font-family: "Space Mono", monospace;
    background: var(--color-bg);
    color: var(--color-text);
}

a {
    color: var(--color-link);
}

main a {
    max-width: 100%;
}

.heading-permalink {
    font-size: .7em;
}

body {
    max-width: var(--body-width);
    margin: 5rem auto;
    padding: 0 .5rem;
    font-size: 1rem;
    line-height: 1.56;
}

article img {
    max-width: var(--body-width);
}


blockquote {
    background: var(--color-bg);
    filter: brightness(var(--overlay-brightness));
    border-left: 4px solid var(--color-accent);
    border-radius: 4px;
    box-shadow:
        -0.8rem 0rem 1rem -1rem #f1fa8c,
        0.2rem 0rem 1rem rgb(0, 0, 0, .4);
    padding-left: 1rem;
    margin: 1rem;
}

li.post {
    list-style-type: None;
    padding: .2rem 0;
}

pre.wrapper {
    padding: 0;
    box-shadow: 0.2rem 0rem 1rem rgb(0, 0, 0, .4);
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 2rem;
}

pre {
    margin: 0;
    padding: 1rem;
    min-width: -webkit-fill-available;
    max-width: fit-content;
    overflow-x: auto;
}

pre .filepath {
    margin: 0;
    padding-left: 1rem;
    border-radius: 4px 4px 0 0;
    background: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

pre .filepath p {
    margin: 0
}

pre .filepath .right {
    display: flex;
    gap: .2rem;
    align-items: center;
}

pre::-webkit-scrollbar {
    height: 4px;
    background-color: transparent;
}

pre::-webkit-scrollbar-thumb {
    background-color: #d3d3d32e;
    border-radius: 2px;
}

pre::-webkit-scrollbar-track {
    background-color: transparent;
}

.copy-wrapper {
    background: none;
    position: absolute;
    width: 100%;
    z-index: 25;
    display: flex;
    justify-content: flex-end;
}

button.copy {
    z-index: 100;
    background: none;
    fill: #ffffff45;
    border: none;
    width: 32px;
    align-self: flex-end;
    top: 0;
    right: 0;
    margin: 0.5rem 0.2rem;

}

button.copy:hover {
    fill: white
}

a.help {
    fill: #ffffff45;
}

a.help:hover {
    fill: white;
}

a.help svg {
    height: 24px;
    width: 24px;
}

.highlight {
    background: var(--color-bg-code);
    color: var(--color-text);
    filter: brightness(var(--overlay-brightness));
    border-radius: 0 0 4px 4px;
}

.highlight .c {
    color: #8b8b8b
}

/* Comment */
.highlight .err {
    color: #960050;
    background-color: #1e0010
}

/* Error */
.highlight .k {
    color: #c678dd
}

/* Keyword */
.highlight .l {
    color: #ae81ff
}

/* Literal */
.highlight .n {
    color: #abb2bf
}

/* Name */
.highlight .o {
    color: #c678dd
}

/* Operator */
.highlight .p {
    color: #abb2bf
}

/* Punctuation */
.highlight .ch {
    color: #8b8b8b
}

/* Comment.Hashbang */
.highlight .cm {
    color: #8b8b8b
}

/* Comment.Multiline */
.highlight .cp {
    color: #8b8b8b
}

/* Comment.Preproc */
.highlight .cpf {
    color: #8b8b8b
}

/* Comment.PreprocFile */
.highlight .c1 {
    color: #8b8b8b
}

/* Comment.Single */
.highlight .cs {
    color: #8b8b8b
}

/* Comment.Special */
.highlight .gd {
    color: #c678dd
}

/* Generic.Deleted */
.highlight .ge {
    font-style: italic
}

/* Generic.Emph */
.highlight .gi {
    color: #a6e22e
}

/* Generic.Inserted */
.highlight .gs {
    font-weight: bold
}

/* Generic.Strong */
.highlight .gu {
    color: #8b8b8b
}

/* Generic.Subheading */
.highlight .kc {
    color: #c678dd
}

/* Keyword.Constant */
.highlight .kd {
    color: #c678dd
}

/* Keyword.Declaration */
.highlight .kn {
    color: #c678dd
}

/* Keyword.Namespace */
.highlight .kp {
    color: #c678dd
}

/* Keyword.Pseudo */
.highlight .kr {
    color: #c678dd
}

/* Keyword.Reserved */
.highlight .kt {
    color: #c678dd
}

/* Keyword.Type */
.highlight .ld {
    color: #e6db74
}

/* Literal.Date */
.highlight .m {
    color: #ae81ff
}

/* Literal.Number */
.highlight .s {
    color: #e6db74
}

/* Literal.String */
.highlight .na {
    color: #a6e22e
}

/* Name.Attribute */
.highlight .nb {
    color: #98c379
}

/* Name.Builtin */
.highlight .nc {
    color: #abb2bf
}

/* Name.Class */
.highlight .no {
    color: #c678dd
}

/* Name.Constant */
.highlight .nd {
    color: #abb2bf
}

/* Name.Decorator */
.highlight .ni {
    color: #abb2bf
}

/* Name.Entity */
.highlight .ne {
    color: #a6e22e
}

/* Name.Exception */
.highlight .nf {
    color: #61afef
}

/* Name.Function */
.highlight .nl {
    color: #abb2bf
}

/* Name.Label */
.highlight .nn {
    color: #abb2bf
}

/* Name.Namespace */
.highlight .nx {
    color: #a6e22e
}

/* Name.Other */
.highlight .py {
    color: #abb2bf
}

/* Name.Property */
.highlight .nt {
    color: #c678dd
}

/* Name.Tag */
.highlight .nv {
    color: #abb2bf
}

/* Name.Variable */
.highlight .ow {
    color: #c678dd
}

/* Operator.Word */
.highlight .w {
    color: #abb2bf
}

/* Text.Whitespace */
.highlight .mb {
    color: #ae81ff
}

/* Literal.Number.Bin */
.highlight .mf {
    color: #ae81ff
}

/* Literal.Number.Float */
.highlight .mh {
    color: #ae81ff
}

/* Literal.Number.Hex */
.highlight .mi {
    color: #ae81ff
}

/* Literal.Number.Integer */
.highlight .mo {
    color: #ae81ff
}

/* Literal.Number.Oct */
.highlight .sa {
    color: #e6db74
}

/* Literal.String.Affix */
.highlight .sb {
    color: #e6db74
}

/* Literal.String.Backtick */
.highlight .sc {
    color: #e6db74
}

/* Literal.String.Char */
.highlight .dl {
    color: #e6db74
}

/* Literal.String.Delimiter */
.highlight .sd {
    color: #98c379
}

/* Literal.String.Doc */
.highlight .s2 {
    color: #98c379
}

/* Literal.String.Double */
.highlight .se {
    color: #ae81ff
}

/* Literal.String.Escape */
.highlight .sh {
    color: #e6db74
}

/* Literal.String.Heredoc */
.highlight .si {
    color: #e6db74
}

/* Literal.String.Interpol */
.highlight .sx {
    color: #e6db74
}

/* Literal.String.Other */
.highlight .sr {
    color: #e6db74
}

/* Literal.String.Regex */
.highlight .s1 {
    color: #e6db74
}

/* Literal.String.Single */
.highlight .ss {
    color: #e6db74
}

/* Literal.String.Symbol */
.highlight .bp {
    color: #abb2bf
}

/* Name.Builtin.Pseudo */
.highlight .fm {
    color: #61afef
}

/* Name.Function.Magic */
.highlight .vc {
    color: #abb2bf
}

/* Name.Variable.Class */
.highlight .vg {
    color: #abb2bf
}

/* Name.Variable.Global */
.highlight .vi {
    color: #abb2bf
}

/* Name.Variable.Instance */
.highlight .vm {
    color: #abb2bf
}

/* Name.Variable.Magic */
.highlight .il {
    color: #ae81ff
}

/* Literal.Number.Integer.Long */

/* Tab style starts here */
.tabbed-set {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: 1em 0;
    border-radius: 0.1rem;
}

.tabbed-set>input {
    display: none;
}

.tabbed-set label {
    width: auto;
    padding: 0.9375em 1.25em 0.78125em;
    font-weight: 700;
    font-size: 0.84em;
    white-space: nowrap;
    border-bottom: 0.15rem solid transparent;
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
    cursor: pointer;
    transition: background-color 250ms, color 250ms;
}

.tabbed-set .tabbed-content {
    width: 100%;
    display: none;
    box-shadow: 0 -.05rem #ddd;
}

.tabbed-set input {
    position: absolute;
    opacity: 0;
}

/* fonts */
h1 {
    font-weight: 700;
}

h1#title a {
    font-size: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 3rem;
}

h1 {
    font-size: 2.5em;
    margin-top: 5rem;
}

h2 {
    font-size: 1.63rem;
    margin-top: 5rem;
}



p {
    font-size: 21px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1.5;
}

@media only screen and (max-width: 700px) {
    p {
        font-size: 18px;
    }
}

@media only screen and (max-width: 600px) {
    p {
        font-size: 16px;
    }
}

@media only screen and (max-width: 500px) {
    p {
        font-size: 14px;
    }
}

@media only screen and (max-width: 400px) {
    p {
        font-size: 12px;
    }
}


pre {
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 18.5714px;
    */
}

a {
    font-weight: 600;
    text-decoration-color: var(--color-accent);
    color: var(--color-link);
    padding: .3rem .5rem;
    display: inline-block;
}

.admonition,
details {
    box-shadow: 0.2rem 0rem 1rem rgb(0, 0, 0, .4);
    margin: 5rem 0;
    border: 1px solid transparent;
    border-radius: 4px;
    text-align: left;
    padding: 0;
    border: 0;

}

.admonition {
    padding-bottom: 1rem;
}

details[open] {
    padding-bottom: .5rem;
}

.admonition p {
    padding: .2rem .6rem;
}

.admonition-title,
.details-title,
summary {
    background: var(--color-bg-2);
    padding: 0;
    margin: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

summary:hover {
    cursor: pointer;
}

summary.admonition-title,
summary.details-title {
    padding: .5rem;
    padding-left: 1rem;
}

.note {
    border-left: 4px solid #f1fa8c;
    box-shadow:
        -0.8rem 0rem 1rem -1rem #f1fa8c,
        0.2rem 0rem 1rem rgb(0, 0, 0, .4);
}

.note>.admonition-title {
    border-bottom: 1px solid #3c3d2d;
}

.abstract {
    border-left: 4px solid #8be9fd;
    box-shadow:
        -0.8rem 0rem 1rem -1rem #8be9fd,
        0.2rem 0rem 1rem rgb(0, 0, 0, .4);
}

.abstract>.admonition-title {
    border-bottom: 1px solid #2c3a3f;
}

.info {
    border-left: 4px solid;
    box-shadow:
        -0.8rem 0rem 1rem -1rem #8bb0fd,
        0.2rem 0rem 1rem rgb(0, 0, 0, .4);
}

.info>.admonition-title {
    border-bottom: 1px solid #2c313f;
}

.tip {
    border-left: 4px solid #008080;
    box-shadow:
        -0.8rem 0rem 1rem -1rem #008080,
        0.2rem 0rem 1rem rgb(0, 0, 0, .4);
}

.tip>.admonition-title {
    border-bottom: 1px solid #1b2a2b;
}

.success {
    border-left: 4px solid #50fa7b;
    box-shadow:
        -0.8rem 0rem 1rem -1rem #50fa7b,
        0.2rem 0rem 1rem rgb(0, 0, 0, .4);
}

.success>.admonition-title {
    border-bottom: 1px solid #263e2b;
}

.question {
    border-left: 4px solid #a7fcbd;
    box-shadow:
        -0.8rem 0rem 1rem -1rem #a7fcbd,
        0.2rem 0rem 1rem rgb(0, 0, 0, .4);
}

.question>.admonition-title {
    border-bottom: 1px solid #303e35;
}

.warning {
    border-left: 4px solid #ffb86c;
    box-shadow:
        -0.8rem 0rem 1rem -1rem #ffb86c,
        0.2rem 0rem 1rem rgb(0, 0, 0, .4);
}

.warning>.admonition-title {
    border-bottom: 1px solid #3f3328;
}

.failure {
    border-left: 4px solid #b23b3b;
    box-shadow:
        -0.8rem 0rem 1rem -1rem #b23b3b,
        0.2rem 0rem 1rem rgb(0, 0, 0, .4);
}

.failure>.admonition-title {
    border-bottom: 1px solid #34201f;
}

.danger {
    border-left: 4px solid #ff5555;
    box-shadow:
        -0.8rem 0rem 1rem -1rem #ff5555,
        0.2rem 0rem 1rem rgb(0, 0, 0, .4);
}

.danger>.admonition-title {
    border-bottom: 1px solid #402523;
}

.bug {
    border-left: 4px solid #b2548a;
    box-shadow:
        -0.8rem 0rem 1rem -1rem #b2548a,
        0.2rem 0rem 1rem rgb(0, 0, 0, .4);
}

.bug>.admonition-title {
    border-bottom: 1px solid #32232c;
}

.example {
    border-left: 4px solid #bd93f9;
    box-shadow:
        -0.8rem 0rem 1rem -1rem #bd93f9,
        0.2rem 0rem 1rem rgb(0, 0, 0, .4);
}

.example>.admonition-title {
    border-bottom: 1px solid #332d3e;
}

.source {
    border-left: 4px solid #bd93f9;
    box-shadow:
        -0.8rem 0rem 1rem -1rem #bd93f9,
        0.2rem 0rem 1rem rgb(0, 0, 0, .4);
}

.source>.admonition-title {
    border-bottom: 1px solid #332d3e;
}

.quote {
    border-left: 4px solid #999;
    box-shadow:
        -0.8rem 0rem 1rem -1rem #999,
        0.2rem 0rem 1rem rgb(0, 0, 0, .4);
}

.quote>.admonition-title {
    border-bottom: 1px solid #2d2e2f;
}

table {
    margin: 1rem 0;
    border-collapse: collapse;
    border-spacing: 0;
    display: block;
    max-width: -moz-fit-content;
    max-width: fit-content;
    overflow-x: auto;
    white-space: nowrap;
}

table thead th {
    border: solid 1px var(--color-text);
    padding: 10px;
    text-align: left;
}

table tbody td {
    border: solid 1px var(--color-text);
    padding: 10px;
}

.theme-switch {
    z-index: 10;
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;

    display: flex;
    justify-content: flex-end;
    margin-right: 1rem;
    margin-left: auto;
    position: fixed;
    right: 1rem;
    top: 1rem;
}

.theme-switch input {
    display: none;

}

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
}

.slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 26px;
}

input:checked+.slider {
    background-color: #343434;
}

input:checked+.slider:before {
    background-color: #848484;
}

input:checked+.slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

img {
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
}

a {
    max-width: -moz-available;
    max-width: -webkit-fill-available;
}

details>* {
    margin: 1rem;
}

.admonition>* {
    margin: 1rem;
}

p.admonition-title,
summary {
    margin: 0;
    padding-left: 1.2rem;
}

.small {
    font-size: .9rem;
    color: #888;
}

admonition+admonition {
    margin-top: 20rem;
}

::-webkit-scrollbar {
    height: 12px;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #d3d3d32e;
    border-radius: 6px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}