body {
    font-family: 'Palatino Linotype', sans-serif !important;
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.ready {
    opacity: 1;
    transition: 0.25s opacity;
}

header {
    background-color: #0284c7;
    padding: 2px 0;
    width: 100%;
}

h1.title {
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}

section.main {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70vw;
}

sl-divider {
    width: 50vw;
    --color: #0284c7;
    --spacing: 0px;
    --width: 5px;
}

kub-index-search-ui {
    --kub-width: 50vw;
    --kub-first-facet-btn-bg-color: #0284c7;
    margin-bottom: 10px;
}

kub-index-headings-viewer,
kub-text-segments-viewer {
    --kub-width: 50vw;
}

kub-index-headings-viewer {
    --kub-height: 40vh;
}

/* small screen sizes */
@media only screen and (max-width: 664px) {
    body {
        font-size: 1.1rem;
        padding: 2px;
    }

    header {
        font-size: 10px;
        padding: 0 1px;
    }

    h1.title {
        text-align: justify;
        padding: 10px;
    }

    section.main,
    kub-index-headings-viewer,
    kub-text-segments-viewer {
        width: 100%;
    }

    sl-divider {
        width: 100%;
    }    
}

/* medium screen sizes */
@media only screen and (max-width: 835px) {
    body {
        font-size: 1.1rem;
        padding: 2px;
    }

    header {
        font-size: 10px;
        padding: 0 1px;
    }

    h1.title {
        text-align: center;
        padding: 10px;
    }

    section.main,
    kub-index-headings-viewer,
    kub-text-segments-viewer {
        width: 100%;
    }

    sl-divider {
        width: 100%;
    }    
}