h2 { margin-top: 1.5em }
div#query { background: #b2e9d5; padding: 1em; background-image: url('/images/IMG_7497.jpg'); background-size: cover; background-repeat: no-repeat; }
div#query h2 { margin-top: 0; color: white  }
div#query form div { display: flex; }
div#query form input { border-radius: 0; border-style: none }
div#query form input[type=text] { width: 100%; flex: 1; padding: 0.5em; font-size: large; min-width: 0; border-radius: 0; margin-right: 1em }
div#query button { cursor: pointer; display: flex; align-items: center }

/*div#texts { width: fit-content; min-width: 975px; margin: auto }*/
div#texts .textName { border: dotted 1px black; border-radius: 5px; padding: 0.5em; margin-top: 1em; background: whitesmoke }
div#texts .textName { display: flex; justify-content: space-between }
div#texts .textName div { flex: 1 }

div#render {  }
div#t { display: flex; flex-direction: column; padding-left: 1em; }

div.occurence { text-align: right; }
div#texts > div.occurence { margin: 1em 0; font-weight: bold }
.match { color: red; font-weight: bold }
.hidden { display: none !important }
.textResults { border-left: solid 1px silver; border-bottom: solid 1px silver; border-right: solid 1px silver; border-radius: 5px }
.textResults table { table-layout: fixed; width: 973px; background: white; border-collapse: collapse }
.textResults tr:hover { background: whitesmoke }
.textResults tr.context { background-color: linen; animation: new-context 1s ease-out }
.textResults tr.context:hover { background-color: antiquewhite; }
.textResults td { word-wrap: break-word; vertical-align: top; width: 50% }
.textResults th { text-wrap: nowrap; vertical-align: top; width: 100px; width: 10ch; font-weight: normal; font-family: monospace; }
.textName .occurence { color: silver }
.textFooter { text-align: center; padding: 0.25em }
.textFooter a { text-decoration: none; color: black }

@keyframes new-context {
    0% { background-color: goldenrod; }
}

.error { color: white }

#publications { display: grid; gap: 2em; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); }
a.publication { display: flex; align-items: flex-start; gap: 1em; border: solid 1px silver; padding: 0.5em; color: black; text-decoration: none }
a.publication:hover { background: whitesmoke; }
a.publication img { width: 2cm }
a.publication .title { font-weight: bold }
a.publication .editors { margin: 0.5em 0 }

#publication .title { display: flex; align-items: flex-start; margin-top: 0.5em }
#publication .title > img { width: 16px; margin-right: 0.5em; margin-top: 0.2em }
#publication .special, #publication .dedication { font-size: large; font-style: italic; font-weight: 100; font-family: 'Segoe UI Light',Tahoma,Helvetica,sans-serif; margin-top: 1em }
#publication .publisher { margin-bottom: 0.5em }
#publication .float { float: right; max-width: 340px; margin-left: 1em }
#publication .illustration { margin-top: 1em; }
#publication .illustration > div { font-style: italic }
#publication .float .illustration > img { max-width: 340px }
#publication .article .illustration { text-align: center; margin: 1em }