:root {
    color-scheme: light dark;
}

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

body {
    display: flex;
    padding: 8px;

    > div {
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow: hidden;

        > div {
            overflow: auto;
        }
    }
}

html {
    font-size: 22px;
}

* {
    font-family: "Alef", "Noto Sans Hebrew", "Noto Sans", "Noto Sans Arabic", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "David CLM", "David Libre", David, "Noto Serif Hebrew", "Noto Serif", serif;

    * {
        font-family: inherit;
    }
}

blockquote {
    font-family: "Shofar", "Shlomo", "Taamey Frank CLM", "SBL Hebrew", "Ezra SIL SR", "Ezra SIL", serif;

    cite {
        font-size: smaller;
    }
}

code {
    font-family: "JetBrains Mono", monospace;
}

h1 {
    margin-bottom: 0;
}

div:has(> .placeholder) {
    align-content: center;
    text-align: center;
}

.icon {
    height: 1em;
    vertical-align: middle;
    padding-inline-end: 0.3333em;
}

#selectedResource {
    padding: 8px;
    margin: 8px;
    border: thick dashed;
}

.thumbnail {
    float: inline-end;
    vertical-align: top;
    height: 6em;
}

iframe {
    display: block;
    margin-top: 1rem;
    border: none;
}