@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400&family=Source+Serif+Pro:ital,wght@0,400;0,700;1,400&display=swap')

html {
    color: #444;
    background-color: white;
}

body {
    font-family: 'Source Serif Pro', serif;
    padding: 0;
    margin: 0;
}

@media print {
    #top-bar {
        display: none;
    }
}

@media screen {
    html {
        background-image: url("/https/howardabrams.com/img/dark-keyboard.png");
        background-repeat: no-repeat;
        background-size: 100%;
    }

    #top-bar {
        height: 60px;
        top: 0px;
        left: 0px;
        border-bottom: 2px solid white;
        width: 100%;
        padding: 12px;
        z-index: 100;
    }

    #title {
        padding: 0;
        margin: 0;
        margin-left: 100px;
        color: black;
        /* font-size: 36px; */
        font-weight: bold;
        text-shadow: 2px 2px #000;
        /* display: inline; */
    }
    #subtitle {
        /* display: inline; */
        position: relative;
        line-height: .95em;
        left: 100px;
        width: 450px;
        color: black;
        font-size: 18px;
        font-weight: bold;
        text-shadow:
        -2px -2px #aaa,
        -2px  2px #aaa,
        2px -2px #aaa,
        2px  2px #aaa;
    }

    .gray-gradient {
        background: #aaaaaa;
        background: -moz-linear-gradient(top,  rgba(170,170,170,0.96) 0%, rgba(170,170,170,0.8) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(170,170,170,0.96)), color-stop(100%,rgba(170,170,170,0.8)));
        background: -webkit-linear-gradient(top,  rgba(170,170,170,0.96) 0%,rgba(170,170,170,0.8) 100%);
        background: -o-linear-gradient(top,  rgba(170,170,170,0.96) 0%,rgba(170,170,170,0.8) 100%);
        background: -ms-linear-gradient(top,  rgba(170,170,170,0.96) 0%,rgba(170,170,170,0.8) 100%);
        background: linear-gradient(to bottom,  rgba(170,170,170,0.96) 0%,rgba(170,170,170,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5aaaaaa', endColorstr='#ccaaaaaa',GradientType=0 );
    }

    #portrait {
        position: absolute;
        top: 10px;
        left: 10px;
        border: 0;
    }

    #search-area {
        position: absolute;
        top: 10px;
        right: 50px;
        white-space: nowrap;
    }

    .button {
        border: 0;
    }
    .button img {
        position: relative;
        top: 12px;
    }

    #send-button {
        display: none;
    }

    #rss-button {
        background-image: url("/https/howardabrams.com/img/rss-hi.svg");
        background-size: 32px;
        background-repeat: no-repeat;
        background-position: 0px -2px;
    }
    #rss-button img:hover {
        opacity: 0;
        filter:alpha(opacity=0);
    }

    #mail-button {
        background-image: url("/https/howardabrams.com/img/mail-hi.svg");
        background-size: 32px;
        background-repeat: no-repeat;
        background-position: 0px -2px;
    }
    #mail-button img:hover {
        opacity: 0;
        filter:alpha(opacity=0);
    }

    #searchform {
        display: inline;
    }

    #searchform #s {
        background: url("/https/howardabrams.com/img/search.png") no-repeat 5px 6px;
        background-color: #ddd;
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
        border: 2px solid #888;
        border-radius: 5px;       /* css 3 */
        -moz-border-radius: 5px;  /* mozilla */
        -webkit-border-radius: 5px;   /* webkit */

        width: 90px;
        height: 30px;
        padding: 0px 10px 0px 28px;

        -webkit-transition-duration: 400ms;
        -webkit-transition-property: width, background;
        -webkit-transition-timing-function: ease;
        -moz-transition-duration: 400ms;
        -moz-transition-property: width, background;
        -moz-transition-timing-function: ease;
        -o-transition-duration: 400ms;
        -o-transition-property: width, background;
        -o-transition-timing-function: ease;
    }

    #searchform #s:focus {
        background-color: #f9f9f9;
        width: 160px;
    }

    #content {
        margin-top: 200px;
        max-width: 800px;
        border-top: 8px solid #000;

        border-radius: 20px;       /* css 3 */
        -moz-border-radius: 20px;  /* mozilla */
        -webkit-border-radius: 20px;   /* webkit */
    }

    #bottom-section {
        border-top: 2px solid #aaa;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
    }

    #bottom-section li {
        display: inline;
        padding: 0 20px;
    }

    #bottom-section li a {
        border-bottom: none;
    }
}

#content {
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    padding-left: 40px;
    padding-top: 0px;
}

#content .date {
    text-align: right;
    font-style: italic;
    font-size: 90%;
    line-height: 10px;
}

.outline-text-2 {
    position: relative;
    top: -20px;
}

.quoter {
    font-family: serif;
    font-size: large;
    font-style: italic;
    margin-top: 60px;
    margin-bottom: 40px;
    color: #888;
}

.quoter::before {
    content: "▬ ▬ ▬";
    display: block;
    padding-bottom: 20px;
    text-align: center;
    font-style: normal;
    font-size: medium;
    color: #aaa;
}

/*
.quoter::after {
    content: "▬ ▬ ▬";
    display: block;
    text-align: center;
    font-style: normal;
    font-size: medium;
    color: #aaa;
}
*/

h1, h2, h3, h4, h5, h6 {
    font-family: 'Source Sans Pro', sans-serif;
    color: #888;
    font-feature-settings: "kern" 1, "liga" 1, "swsh" 1;
}

h1 {
    text-align: center;
    font-size: 3em;
}

h2, h3, h4 {
    position: relative;
}
h2 {
    left: -20px;
    font-size: 2em;
}
h3 {
    left: -15px;
    font-size: 1.5em;
}
h4 {
    left: -10px;
    font-size: 1.2em;
}

pre, code {
    font-family: 'Source Code Pro', monospace;
    /* font-size: 0.8em; */
}

pre {
    background-color: white;
    padding: 8px 0;
    padding-left: 12px;
    border-top: 2px solid #eee;
    border-bottom: 2px solid #eee;
}

a {
    color: #22d22d;
    text-decoration: none;
    border-bottom: 1px dotted;
}
a img {
    border-bottom: 0;
}
sup a {
    border-bottom: 0;
}

figure {
    margin-left: 0;
}
figure img {
    max-width: 800px;
}

h2.footnotes {
    font-size: 105%;
    margin-top: 30px;
    border-top: 2px solid #aaa;
    padding-top: 20px;
}

div.footdef sup ~ p {
    display: inline;
}
div.footdef p ~ p {
    display: block;
    margin-left: 12px;
}

p {
    line-height: 200%;
}

#content li~li  {
    margin-top: 12px;
}

.date {
    text-align: right;
    position: relative;
    top: -40px;
    left: -20px;
}

.validation {
    display: none;
}

.odd {
    background-color: #eee;
}
.even {
    background-color: white;
}
.left {
    text-align: left;
}
.right {
    text-align: right;
}

th {
    padding-left: 8px;
    padding-right: 8px;
    background-color: #cccccc;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
td {
    padding-left: 8px;
    padding-right: 8px;
}

/** Source Code Settings **/
.src {
    color: black;
    background-color: white;
}
.org-parenthesis {
    color: #888888;
}
.org-comment {
    color: #888888;
}
.org-comment-delimiter {
    color: #888888;
}
.org-keyword {
    color: #88dd88;
}
.org-function-name {
    color: #8888dd;
}
.org-doc {
    color: #eecc88;
}
.org-string {
    color: #aa9988;
}
.org-builtin {
    color: #dd6666;
}

@media (prefers-color-scheme: dark) {
    html {
        background-color: #1d1f21;
        color: white;
    }
    #title {
        color: #c5c8c6;
    }
    #content {
        background-color: #1d1f21;
    }
    h1, h2, h3, h4, h5, h6 {
        color: #c5c8c6;
    }
    pre {
        background-color: black;
    }

    /** Source Code **/
    .src {
        color: #f2e9e1;
        background-color: #0c0906;
    }
    .org-keyword {
        color: #a8b269;
    }
    .org-constant {
        color: #f2d7a9;
    }
    .org-builtin {
        color: #ffb7a5;
    }
    .org-doc {
        color: #f2d7a9;
    }
    .org-function-name-face {
        color: #708c93;
    }
    .org-string {
        color: #e5e1ce;
    }

    tr.odd {
        background-color: #333;
    }
    tr.even {
        background-color: #666;
    }

    .odd th {
        background-color: #999;
    }
}

/* MOBILE PHONE SECTION */
@media only screen and (max-device-width: 480px) {
    body {
        font-size: 1em;
    }
    #content {
        margin-top: 40px;
    }
    h1 { font-size: 2em; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.1em; }
    h4 { font-size: 1em; }
}

@media only screen and (min-device-width: 600px) {
    #outline-container-orgbc05ff5 {
        padding-right: 280px;
        background-image: url("/https/howardabrams.com/img/mastodon-light.png");
        background-repeat: no-repeat;
        background-position: right top;
        background-size: 300px;
    }
}

@media only screen and (min-device-width: 600px) and (prefers-color-scheme: dark) {
    #outline-container-orgbc05ff5 {
        background-image: url("/https/howardabrams.com/img/mastodon-dark.png");
    }
}