@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&family=Open+Sans&display=swap');

/* TODO This increases paragraphs, but how to increase heading sizes as well? */

body {
    font-size: 153%;
}

/* Exhibit headers – responsive typography */

@media screen and (max-width: 680px) {
    h1 {
        font-size: calc(5.7vw + 48%) !important;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}

/* Modified from https://tailwindcss.com/docs/font-size */

h1 {
    font-size: 3rem;
    line-height: 3.7rem;
    font-weight: 700;
    margin-bottom: .5em;
}

h2 {
    font-size: 2.25rem;
    line-height: 2.7rem;
    font-weight: 700;
    margin-bottom: .7em;
}

h3 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    margin-bottom: .8em;
}

h4 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
}

h5 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
}

h6 {
    font-size: 1rem;
}

.heading_700 {
    font-weight: 700;
}

.heading_600 {
    font-weight: 600;
}

.heading_500 {
    font-weight: 500;
}

.heading_400 {
    font-weight: 400;
}

.heading_300 {
    font-weight: 300;
}

.heading_200 {
    font-weight: 200;
}

.heading_100 {
    font-weight: 100;
}

p,
em {
    font-size: 1.5rem;
}

blockquote {
    margin-bottom: 1rem !important;
}

.ui.card > .content > .header,
.ui.cards > .card > .content > .header {
    font-family: 'IBM Plex Mono', monospace;
    font-size: calc(1.1vw + 15%) !important;
}


/* Adjust font-size of card titles when screen is 680px of less */

@media screen and (min-width: 1800px) {
    .ui.card > .content > .header,
    .ui.cards > .card > .content > .header {
        font-size: 0.8vw !important;
    }
}


/* Adjust font-size of card titles when screen is 680px of less */

@media screen and (max-width: 800px) {
    .ui.card > .content > .header,
    .ui.cards > .card > .content > .header {
        font-size: calc(1.7vw + 48%) !important;
        text-align: center;
    }
}

#content > .container {
    padding-top: 1em;
    padding-bottom: 4.3em;
}

blockquote {
    background-color: #f2f2f2;
    padding: 1.7rem 1.9rem 2.1rem 1.9rem;
    margin: 0;
}

.card > .image > img {
    padding: 0;
}


/* Add some top and bottom room for images in blog-posts */

.ui.container p img {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

:not(pre) > code {
    padding: 3px 5px;
    color: #111;
    font-weight: 500;
    background: rgba(0, 0, 0, .06);
    border-radius: 4px;
}

@media screen and (max-width: 680px) {
    code,
    span.token {
        font-size: calc(1.7vw + 43%) !important;
        white-space: break-spaces !important;
        line-height: 1 !important;
    }

    pre {
        line-height: 1 !important;
    }
}

.main-menu {
    border-radius: 0 !important;
    width: 100%;
}


/*#footer {*/


/*    padding: 5em 0;*/


/*}*/


/* search-header */

.search-post .input {
    width: 100%;
}

.search-post.ui.search .prompt {
    border-radius: .28571429rem !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: calc(.7vw + 15%) !important;
}

@media screen and (max-width: 800px) {
    .search-post.ui.search .prompt {
        font-size: calc(1.2vw + 48%) !important;
    }
}

.ui.category.search.search-post .results {
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .ui.search .results {
        max-width: 100%;
    }
}

.search-post .results .result .title {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: calc(.8vw + 15%) !important;
}

@media only screen and (max-width: 991px) {
    .search-post .results .result .title {
        font-size: calc(1.3vw + 48%) !important;
    }
}

.search-post .results .result .image {
    /*width: 30% !important;*/
    /*height: 5.1em !important;*/
    /*margin: -.85714286em -1.14285714em;*/
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/*.search-post .results .result .image img {*/
/*    width: 100% !important;*/
/*    object-fit: cover;*/
/*    transition: transform .5s, filter 1.5s ease-in-out;*/
/*    filter: grayscale(100%);*/
/*}*/

/*.search-post .results .result:hover .image img {*/
/*    filter: grayscale(0);*/
/*    transform: scale(1.1);*/
/*}*/

.search-post.ui.search > .results .result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
}


/* search-header */