@import url("./solarized-colors.css");
@media (prefers-color-scheme: light) {
    :root {
        --page-background-color: #BCD8ED;
        --page-background-image: url("/static/img/bg-light.jpg");
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --page-background-color: #1C1B1F;
        --page-background-image: url("/static/img/bg-dark.jpg");
    }
}
.light-theme {
        --page-background-color: #BCD8ED;
        --page-background-image: url("/static/img/bg-light.jpg");
}
.dark-theme {
        --page-background-color: #1C1B1F;
        --page-background-image: url("/static/img/bg-dark.jpg");
}
* {
    margin: 0;
    padding: 0;
    transition: background-color 0.5s, color 0.5s;
}
html,
body {
    height: 100%;
    font-size: 14pt;
    line-height: 1.5;
    /* just something that looks nice with this particular background image */
    background-color: var(--page-background-color);
}
.fixed-bg {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;

    background-image: var(--page-background-image);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto;
}
#container-outter {
    min-width: 200px;
    max-width: 768px;
    height: 100%;
    margin: 0 auto;
}
#container-outter::after {
    content: " ";
    display: block;
    height: 100%;
}
#content-border {
    padding: 20px;
    height: auto;
    width: auto;
    opacity: 0.95;
    color: var(--solarized-rebase0);
}
.solarized {
    border-radius: 0.35em;

    background-color: var(--solarized-rebase02);
    color: var(--solarized-rebase0);
}
.solarized hr {
    border-bottom: 1px solid var(--solarized-rebase0);
}
#content {
    position: relative;
}
ol,
ul {
    padding: 20px;
}
/* any nested <ul> */
ol ul, ul ul {
    padding-top: 0;
    padding-bottom: 0;
    list-style-type: cambodian;
}
blockquote {
    margin-left: 20px;
    text-align: right;
}

@media screen and (max-width: 500px) {
    .fixed-bg {
        background-size: cover;
    }
    blockquote br:not(:last-child) {
        display: none;
    }
}
@media screen and (min-width: 500px) {
    #container-inner {
        padding: 20px;
    }
    blockquote {
        max-width: 60%;
    }
    .top {
        float: right;
    }
    .bottom {
        position: absolute;
        right: 0;
        bottom: 0;
    }
}