body {
    font-family: 'Open Sans', sans-serif;
}

@media only screen and (min-width: 768px) {
    .wrapper {
        max-width: 700px;
    }
}
@media only screen and (min-width: 1024px) {
    .wrapper {
        max-width: 850px;
    }
}
@media only screen and (min-width: 1150px) {
    .wrapper {
        max-width: 1024px;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Rokkitt', serif;
}

a,
a:hover {
    color: #0066a1;
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

.post-tags .tags a {
    color: #0066a1;
    border: 1px solid #0066a1;
}

.meta-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.post-tags {
    margin-right: 1rem;
}

.post-tags .tags li {
    margin-top: 0;
}

.rouge {
    padding-left: 0.5rem;
}

img.align-left {
    margin: 10px auto 10px 10px;
}

.imageblock.text-left > div > img {
    margin: 10px auto 10px 10px;
}

img.book-cover {
    max-height: 400px;
    display: inline;
}

#rest-api-book-image-parent {
    display: flex;
    justify-content: flex-start;
}

@media (max-width: 767px) {
    #rest-api-book-image-parent {
        flex-direction: column;
    }
}


#rest-api-book-image-parent > img {
    margin: 10px 1em 10px 1em;
    width: 306px;
}

.book-ad {
    background: #0066a1;
    color: #f1f1f1;
    border-radius: 4px;
    padding: 1em;
    margin-top: 1em;
    display: flex;
    align-items: center;
}

.book-cover {
    width: 20em;
    margin-right: 2em;
    display: none;
}

@media only screen and (min-width: 375px) {
    .book-cover {
        display: flex;
    }
}

@media only screen and (min-width: 1024px) {
    .book-ad {
        padding: 0.5em;
    }
    .book-cover {
        width: 7em;
    }
}


.book-ad > div > a {
    color: white;
    text-decoration: underline;
}

.book-tagline {
    font-style: italic;
    margin-top: -2rem;
}

.riekpil-ad {
    background: rgb(253, 193, 52);
    color: rgb(27, 28, 37);
    border-radius: 4px;
    padding: 1em;
    margin-top: 1em;
    display: flex;
    align-items: center;
}

.riekpil-cover {
    width: 20em;
    margin-right: 2em;
    display: none;
}

@media only screen and (min-width: 375px) {
    .riekpil-cover {
        display: flex;
    }
}

@media only screen and (min-width: 1024px) {
    .riekpil-ad {
        padding: 0.5em;
    }
    .riekpil-cover {
        width: 7em;
    }
}


.riekpil-ad > div > a {
    color: white;
    text-decoration: underline;
}

.riekpil-tagline {
    font-style: italic;
    margin-top: -2rem;
}

.adr {
    background: #dff1f6;
    margin: 1em;
    padding: 1em;
}

#paypal-container {
    display: flex;
    align-items: center;
    justify-content: left;
}

#paypal-text-link {
    margin-left: 1rem;
}

.github-url {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    margin-top: -1rem;
}

.github-url > svg {
    margin-right: 0.5rem;
    width: 1rem;
    height: 1rem;
}

.project-description {
    margin-top: 1rem;
}

h3.summary {
    margin-top: 0.4rem;
    margin-bottom: 0.8rem;
}


.row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.row > div:nth-child(3) {
    margin-left: auto;
}


.header-image-container {
    padding-right: 20px;
}

.header-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
}

.pull-right {
    margin-left: auto;
}

.fill {
    flex: 1;
}

h3.summary a {
    color: #333;
}

h3.summary a:hover {
    text-decoration: none;
}

#toctitle {
    font-style: italic;
}

.toc ul li {
    margin-bottom: 0;
    list-style: none;
}

.image-border > div > img {
    box-shadow: 0 0 10px 1px #ccc;
}

@media only screen and (max-width: 670px) {
    div.desktop {
        display: none;
    }
}

@media only screen and (min-width: 671px) {
    div.mobile {
        display: none;
    }
}

#signup-block {
    background-color: rgba(0, 102, 161, 0.58);
    border-radius: 0.5rem;
    padding: 1rem 4rem;
    margin-top: 1.5rem;
}

#signup-block-title {
    color: #eef1ff;
    font-size: 1.3rem;
}

#signup-block-subtitle {
    color: #00183e;
    font-size: 0.9rem;
}

#signup-block input.email {
    padding: 1.3rem 1.5rem;
    line-height: 1.5rem;
}


#signup-block input.button {
    height: 100%;
}

#signup-block .button:hover {
    background-color: #005591;
}

#mc_embed_signup_scroll {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

@media only screen and (max-width: 768px) {
    #signup-block {
        padding: 1rem 2rem;
    }

    #mc_embed_signup_scroll {
        display: grid;
        grid-auto-rows: 1fr;
        justify-content: normal;
    }

    #signup-block-title {
        font-size: 1rem;
    }

    #signup-block-subtitle {
        font-size: 0.8rem;
    }

    #signup-block input.button {
        height: 90%;
    }
}

.small-note {
    font-size: 0.7em;
    margin-top: 5px;
    font-style: italic;
}

.buy-book-links {
    display: flex;
    column-gap: 1em;
}

a.book-read-more-link {
    background:linear-gradient(to bottom, #2077ae 5%, #0066A1 100%);
    background-color:#0066A1;
    border-radius:8px;
    display: inline-flex;
    align-items: center;
    cursor:pointer;
    color:#ffffff;
    font-size:20px;
    font-weight:bold;
    padding:13px 32px;
    text-decoration:none;
    text-shadow:0px 1px 0px #3d768a;
}
a.book-read-more-link:hover {
    background:linear-gradient(to bottom, #0066A1 5%, #2077ae 100%);
    background-color:#2077ae;
}
a.book-read-more-link:active {
    position:relative;
    top:1px;
}

.book-read-more-link-arrow {
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
}

.image-with-text-right {
    display: flex;
}

.image-with-text-right-image {
    margin-right: 2rem;
    flex-shrink: 0;
    min-width: 150px;
    max-width: 250px;
}

@media only screen and (max-width: 425px) {
    .image-with-text-right-image {
        display: none;
    }
}

.testimonial {
    display: flex;
    align-items: center;
}

.testimonial:not(first-child) {
    margin-top: 2rem;
}

.testimonial-image {
    margin-left: 1rem;
    margin-right: 1rem;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
}

.testimonial-image > img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
}

.testimonial-text {
    position: relative;
}

.testimonial-text > p:first-of-type::before {
    content: "\201C";
    font-size: 270px;
    height: 82px;
    line-height: 1;
    position: absolute;
    top: -60px;
    left: -40px;
    z-index: -1;
    font-family: sans-serif, serif;
    color: #cac8c8;
    opacity: 0.7;
}

.testimonial-person {
    font-size: 1.1rem;
}

.testimonial-person-title {
    font-size: 0.8rem;
    color: #929292;
}

@media only screen and (max-width: 768px) {
    .testimonial {
        flex-direction: column;
    }

    .testimonial-image {
        flex-direction: row;
    }

    .testimonial-image > img {
        margin-right: 2rem;
    }
}

@media only screen and (max-width: 425px) {
    .testimonial-image > img {
        width: 100px;
        height: 100px;
    }
}

.about-me {
    background-color: rgba(0, 102, 161, 0.58);
    border-radius: 0.5rem;
    padding: 1rem 4rem;
    /*margin-top: 1.5rem;*/
    margin-bottom: 2rem;
    color: #eef1ff;
}

.about-me > h2 {
    margin-top: 0;
    margin-bottom: 0;
    color: #00183e;
}

.about-me p {
    margin-block-start: 0;
    margin-block-end: 0.3rem;
}

.about-me a {
    color: #00183e;
}

#signup-block-title {
    color: #eef1ff;
    font-size: 1.3rem;
}

#signup-block-subtitle {
    color: #00183e;
    font-size: 0.9rem;
}


/* Mailchimp CSS */
#mc_embed_signup {
    clear: left;
    width: 100%;
    margin-top: 0.5rem;
}

#mc_embed_signup .button {
    background-color: #0066a1;
    color: #eef1ff;
}

/* AsciiDoctor*/
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.colist table td, .admonitionblock table td {
    border: 0;
}

p.tableblock {
    margin-block-start: 0;
    margin-block-end: 0;
}

.fa {
    font-family: "Font Awesome 5 Free";
}

.admonitionblock td.content > .title, .audioblock > .title, .exampleblock > .title, .imageblock > .title, .listingblock > .title, .literalblock > .title, .stemblock > .title, .openblock > .title, .paragraph > .title, .quoteblock > .title, table.tableblock > .title, .verseblock > .title, .videoblock > .title, .dlist > .title, .olist > .title, .ulist > .title, .qlist > .title, .hdlist > .title {
    text-rendering: optimizeLegibility;
    text-align: left;
    font-family: "Noto Serif", "DejaVu Serif", serif;
    font-size: 1rem;
    font-style: italic
}

table.tableblock.fit-content > caption.title {
    white-space: nowrap;
    width: 0
}

.paragraph.lead > p, #preamble > .sectionbody > [class="paragraph"]:first-of-type p {
    font-size: 1.21875em;
    line-height: 1.6;
    color: rgba(0, 0, 0, .85)
}

table.tableblock #preamble > .sectionbody > [class="paragraph"]:first-of-type p {
    font-size: inherit
}

.admonitionblock > table {
    border-collapse: separate;
    border: 0;
    background: none;
    width: 100%
}

.admonitionblock > table td.icon {
    text-align: center;
    width: 80px
}

.admonitionblock > table td.icon img {
    max-width: none
}

.admonitionblock > table td.icon .title {
    font-weight: bold;
    font-family: "Open Sans", "DejaVu Sans", sans-serif;
    text-transform: uppercase;
    font-size: 2.0em;
}

.admonitionblock > table td.content {
    padding-left: 1.125em;
    padding-right: 1.25em;
    border-left: 1px solid #dddddf;
    color: rgba(0, 0, 0, .6)
}

.admonitionblock > table td.content > :last-child > :last-child {
    margin-bottom: 0
}

.admonitionblock td.icon [class^="fa icon-"] {
    font-size: 2.5em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
    cursor: default
}

.admonitionblock td.icon .icon-note::before {
    content: "\f05a";
    color: #0066a1
}

.admonitionblock td.icon .icon-tip::before {
    content: "\f0eb";
    text-shadow: 1px 1px 2px rgba(155, 155, 0, .8);
    color: #111
}

.admonitionblock td.icon .icon-warning::before {
    content: "\f071";
    color: #bf6900
}

.admonitionblock td.icon .icon-caution::before {
    content: "\f06d";
    color: #bf3400
}

.admonitionblock td.icon .icon-important::before {
    content: "\f06a";
    color: #bf0000
}

.conum[data-value] {
    display: inline-block;
    color: #fff !important;
    background: #0066a1;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    text-align: center;
    font-size: .75em;
    width: 1.67em;
    height: 1.67em;
    line-height: 1.67em;
    font-family: "Open Sans", "DejaVu Sans", sans-serif;
    font-style: normal;
    font-weight: bold
}

.conum[data-value] * {
    color: #fff !important
}

.conum[data-value] + b {
    display: none
}

.conum[data-value]::after {
    content: attr(data-value)
}

pre .conum[data-value] {
    position: relative;
    top: -.125em
}

b.conum * {
    color: inherit !important
}

.conum:not([data-value]):empty {
    display: none
}

.colist td:not([class]):first-child {
    padding: .4em .75em 0;
    line-height: 1;
    vertical-align: top;
}

.colist td:not([class]):first-child img {
    max-width: none
}

.colist td:not([class]):last-child {
    padding: .25em 0
}

table.linenotable td.code {
    padding-left: .75em;
}

table.linenotable td.linenos {
    border-right: 1px solid rgba(255, 255, 255, .35);
    opacity: .35;
    padding-right: .5em;
}

.literalblock pre, .listingblock > .content > pre {
    padding: 0.75em;
}

.listingblock > .title {
    font-family: "Open Sans", sans-serif;
    font-size: 0.9rem;
    margin-bottom: -0.8em;
}

.highlight pre {
    padding: 0;
}

.conference-talk {
    margin-top: 1rem;
}

.talk-title {
    font-size: 1.2rem;
}

.talk-date {
    font-size: 0.8rem;
    font-style: italic;
}

.talk-description {
    margin-top: 0.5rem;
}

.next-and-previous-links {
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
}

.next-and-previous-links a {
    display: flex;
    gap: 0.5rem;
}