@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&display=swap');

@media print {
  nav, nav *, .no_print { display: none !important; } 
  .print_only { display: block !important }
  .print_head { display: block !important }

/* main.crib { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2em } */

footer { display: grid; grid-template-columns: 1fr 1fr min-content;
         width: 100vw; font-size: 80% !important }
footer > div:first-child { text-align: left }
footer > div:last-child { text-align: right; width: fit-content }
  

/*  main.crib > * { flex: 0 0 fit-content }  */
 
details.vocab { outline: medium double grey !important }

details.scrolling summary { display: none }
details.scrolling:not(:open) { display: none }
details.vocab:not(:open) { display: none }
details.vocab a { display: none }

}

.print_only { display: none }

html, body { font-family: Alegreya; background-color: white }

html:has(.crib), body:has(.crib) { background-color: gainsboro }

nav, nav .linkbox { display: flex }

#translationSwitch { float: right }

.hideTranslation .def, .hideTranslation .trot { display: none }

nav { position: fixed; right: 0.8rem; font-family: sans-serif; font-size: smaller;
  background-color: white; outline: thin outset black; padding: 0.2em }

aside.print_head { text-align: right; margin: 1.2em 0em 1.2em auto; padding: 0.3em; outline:thin solid black;
  font-size: smaller; font-family: sans-serif; max-width: fit-content }

nav .linkbox
  { padding: 0.3em; outline:thin solid black; margin: 0em 0.2em; background-color: white; align-items: center }

nav button { margin: 0em 0.1em }

nav a { padding: 0.2em; outline: thin solid black; margin: 0em 0.3em }
nav a:hover { outline: thin dashed black }

nav a[target] { font-style: italic }
a { text-decoration: none }
a:hover { text-decoration: underline }

a.boxed { display: inline-block; padding: 0.2em; outline: thin solid black; background: whitesmoke;
  font-size: 90%; font-weight: normal; font-style: italic; margin-left: 1em }

footer { font-size: 90%; text-align: center; margin: 1em auto; width: 100% }
header *, footer * { margin: 0em }

main { margin: 1em 0em }
main.squib { display: flex }

main.squib > div { align-content: start; height: fit-content }
main.squib div *:first-child { margin-top: 0em }

main.crib { display: flex; flex-wrap: wrap; align-items: stretch }
main.crib details.vocab { flex-grow: 0; }

div.panel { width: 32% }

main.squib-index, main.crib-index { display: block }

main.scroll details[open] summary { color: gainsboro }

/* div.scrollPanel { display: grid; grid-template-columns: 13fr 8fr } */
div.scrollPanel { width: 100% }
div.scrollPanel .source{ }
div.scrollPanel  .trot { width: 38%; float: right }

.trot > *:first-child { margin-top: 0em }

p.squib, p.crib { display: inline-block; margin: 0.2em;
  outline: thin solid black; min-width: 4em;
  background-color: whitesmoke;
  padding: 0.2em;
  text-align: center; }

.vocab { margin: 0.2em 0.2em 0em 0em; outline: thin dashed grey;
  padding: 0.6em }
.vocab[open] { background-color: whitesmoke }

.vocab.verb { outline: medium double grey }
.vocab.noun { outline: thin solid grey }

p.line_no { float: right; clear: both; margin: 0em 0em 0em 0.4em; }

.ana { display: grid;
       grid-template-columns: 8em 1fr }

.quiz .tablet { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.2em }

.quiz .tablet .forms, .quiz .tablet .roots, .quiz .tablet .readings { display: flex; flex-direction: column }

.forms div.f, .roots div, .readings div { padding: 0.2em; outline: thin solid black } 
.vocab .lemmata { display: flex; flex-direction: column;
  margin-right: 0.4em; max-width: fit-content }
  
.vocab .lemma { display: flex; flex-direction: column }

.lemma { padding: 0.2em; display: inline-flex;
  flex-direction: column; outline: thin inset black;
  margin-bottom: 0.4em }

.form { font-size: 105%; font-weight: bold }
.properties { font-size: 80%; margin-right: 0.4em }

.transcription { font-size: 120%; width: 68%; orphans: 3; widows: 3 }

.scrollPanel .source { font-size: 120%; orphans: 3; widows: 3 }

.murray1924_translation, .scrollPanel .trot { border-left: thin solid black; padding-left: 1em }
.murray1924_translation h4 { text-align: right; margin: 0em }

.scrollPanel .trot { font-size: smaller }

.line { padding-left: 4em; text-indent: -5em }
.line:before { content: attr(data_n); display: inline-block; width: 3em; text-align: right; padding-right: 0.8em; font-size: small; font-family: sans-serif; color: darkgrey }
.line .choice { text-indent: initial; font-size: smaller }