@import url("https://cdnjs.cloudflare.com/ajax/libs/picocss/1.4.4/pico.min.css");

/**** pico style overrides *****/

/* header and footer */
header, footer {
    padding: 0px !important;
}

header p, footer p {
    margin: 0px;
    position: absolute;
    right: 50%;
    transform: translate(50%, 0px);
    font-size: 15px;
    font-weight: 500;
}

header p {
    top: 7px;
}

footer p {
    padding-bottom: 7px;
}

/* font size */
@media (min-width: 1200px) {
    :root {
        --font-size: 19px;
    }
}

/* link underlines for a11y */
a {
    text-decoration: underline;
}

/* focus indicator for a11y */
[data-theme="dark"] a:focus {
    outline: 2px solid rgba(225,225,225,0.5);
    border-radius: 2px;
}

[data-theme="light"] a:focus {
    outline: 2px solid rgba(25,25,25,0.5);
    border-radius: 2px;
}

/* adjust contain widths */
@media (max-width: 1199px) {
    .container {
        max-width: 100%;
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 575px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* adjust heading margins */
h2 {
    margin-bottom: 1.5rem;
}

/* adjust code */
code {
    margin-top: 2px;
}

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* dark/light mode toggle button */
#light-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 5px;
    font-size: 14px;
    font-weight: 500;
}

/* increase color contrast for a11y */
:root {
    --primary: #13b1e5 !important;
}

a {
    background-color: transparent;
}

[data-theme="light"] a {
    color: #0c779a;
}

[data-theme="light"] code {
    color: rgb(80, 105, 115);
}

[data-theme="dark"] code {
    color: rgb(155, 170, 170);
}

[data-theme="light"] pre code {
    color: initial;
}

[data-theme="dark"] pre code {
    color: initial;
}

[data-theme="light"] a code {
    color: #80556b !important;
}

[data-theme="dark"] a code {
    color: #b77a99 !important;
}

[data-theme="light"] .hljs {
    background: #fcfcfc;
}

[data-theme="dark"] .hljs {
    background: #0d1418;
}

[data-theme="light"] .hljs-comment, .hljs-deletion, .hljs-meta {
    color: #555;
}

[data-theme="dark"] .hljs-comment, .hljs-deletion, .hljs-meta {
    color: #ccc;
}

/* non-md elements / classes */
figure {
    display: inline-block;
    padding: 5px;
}

[data-theme="light"] figure {
    border: 1px solid #ccc;
}

[data-theme="dark"] figure {
    border: 1px solid #333;
}

figcaption {
    padding: 2px !important;
    text-align: center;
    font-size: 16px;
}

.figure-right, .img-right {
    display: block;
    float: right;
    max-width: 50%;
    padding: 5px;
    margin-left: 20px;
    margin-bottom: 15px;
}

.figure-left, .img-left {
    display: block;
    float: left;
    max-width: 50%;
    padding: 5px;
    margin-right: 20px;
    margin-bottom: 15px;
}

@media (max-width: 700px) {
    .figure-right, .img-right, .figure-left, .img-left {
        float: none;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}