body { font: normal sans-serif;
/*        font-family: "Trebuchet MS",
             FreeSans,
             "Liberation Sans",
             Verdana,
             sans-serif; */
        font-family: Lato, FreeSans, "Liberation Sans", "Helvetica Neue", Tahoma, sans-serif;

        background: #EEEEEE; /* url("olli-winter.png") url("olli-mask-400x310.png") no-repeat left top; */
        font-size: 100%;
          }

/* .container { margin: 2em 4em; } */

header { /*font-size: 115%; 1.25em;*/ text-align: center; max-width: 30em; margin: 0 auto 1em auto; position: relative; } /* pos.rel. for .ankh*/
.headerlogo { float: left; width: 100px; height: 100px; position: absolute; top: 0px; left: 0px; }
header h1 { text-shadow: 3px 3px 3px #FFFFFF; text-decoration: none; color: #000000; font-size: 2.5em; margin: 0.25em 0 0.25em 0; }
/* text-dec none because it's a link */
header a { text-decoration: none; text-shadow: 2px 2px 2px #FFFFFF, 3px 3px 2px #FFFFFF; font-family: Lobster; font-weight: normal; font-style: normal; font-size: 1.1em; }
header a:hover { text-decoration: underline; }

.lankh { width: 150px; height: auto; position: absolute; left: -16em; top: 10em; z-index: -1; }
.rankh { width: 150px; height: auto; position: absolute; right: -16em; top: 10em; transform: rotate(180deg); z-index: -1; }


.froglink { position: fixed; right: 10px; top: 10px; text-decoration: none; color: black; }
.frogpic:hover {  
  -webkit-transform: rotate(-20deg);
     -moz-transform: rotate(-20deg);
       -o-transform: rotate(-20deg);
      -ms-transform: rotate(-20deg);
          transform: rotate(-20deg); width: 150px; }
.frogpic {   -webkit-transition: all 2s ease;
     -moz-transition: all 2s ease;
       -o-transition: all 2s ease;
      -ms-transition: all 2s ease;
          transition: all 2s ease; width: 100px; }
/* <a href="" class="froglink"><img src="files/froggy.png" class="frogpic"></a> */
/* doesn't work as occasional homepage.php-link: would be an a inside an a...*/

nav {
    display: flex; 
    flex-flow: row wrap;
    justify-content: space-between; /*center;*/ /*space-around;*/
    align-content: center;

    list-style:none;
    margin: 0 /*auto*/;
    padding: 0;
    text-align:center;
    font-size: 1.25em;
}
nav a { /* display:inline-block; */ padding: 0 0.5em; }
.thispage { background: linear-gradient(rgba(255, 255, 255, 0),rgba(255, 255, 255, 1)); }

nav a:hover { background: #EEEEEE; border-radius: 0.25em; }

/* background: linear-gradient(#EEEEEE,#FFFFFF); */


.withOverflowingBackground::after {
   content: " ";
   position: absolute;
   width: 1em;
   height: 20em; /* 7 */
   z-index: -1;
   background: linear-gradient(rgba(255, 255, 255, 0)0%,rgba(255, 255, 255, 1)1.1em,rgba(255, 255, 255, 1)85%,rgba(255, 255, 255, 0)100%);
/* rgba(238, 238, 238, 0)0%,rgba(255, 255, 255, 1)1.4em */
/* background: linear-gradient(rgba(238, 238, 238, 0)0%,rgba(255, 255, 255, 1)14%,rgba(255, 255, 255, 1)100%); */
}



.clearer { clear: both; } 

main { font-size: 1.2em; /*120%;*/ padding: 2em; background: #FFFFFF; /*border-radius: 2em;*/ max-width: 30em; margin: 0 auto; line-height: 1.4; } /* -0.4em auto 0 auto */
main li { margin-top: .25em; }
.firstpara::first-line { font-variant: small-caps; }
.firstpara::first-letter { font-size: large; }
main a:hover { text-decoration: none; }
.smallimg { margin: 15px; float: right; border: 1px solid black; }

.sperren { font-weight: normal; font-style: normal; letter-spacing: .2em;
padding-left: .2em; }
.crudehide { background: black; padding-left: 1em; padding-right: 1em; }
.crudehide:hover { background: white; }

footer { font-size: 0.75em; /*75%;*/ margin: 2em; text-align: center; position: relative; }



@media only screen and (max-device-width: 480px) {
header h1 { font-size: 4em; }
header ul li a { font-size: 2.5em; }
/* reminder: .container { margin: 2em 4em; } */
/* .container { margin: 2em 1em; } */
main { max-width: 95%; }
/* em { font-family: serif; } */
/* f--k y-u Samsung. above was worse. https://code.google.com/p/chromium/issues/detail?id=169446#c11 */
}



/* h1,h2,h3,h4,h5,h6 { font-style: bold; text-align: center; } */
h1,h2,h3,h4,h5,h6 { text-align: center; font-weight: normal; font-style: normal; font-family: Lobster; }

main h1,h2,h3 { text-transform: lowercase; }
h2, h3 { margin: 2em 0 1em 0; } /* was_ 4 0 2 0 */

hr {     margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto; }


.smalltext { font-size: 50%; } /* not used? */
.break { text-align: center; margin: 1em 0; font-size: large; }
.break::before { content: "* * *"; }
.jax { float: right; padding: 5px; font-size: xx-small; }
.epigraph { margin: 0 10% 0 auto; width: 40%; }
.epiattrib { text-align: right;}
.oldquote { background: #F1E7CD; padding: 2em; border-radius: 1em; }
.blocknote  { background: #EEEEEE; padding: 2em; border-radius: 1em; }

.tippy { border-bottom: 1px dashed #5f401a; } /* formatting for text that has title tooltip in it*/

.centry { display: block; text-align: center; font-style: italic; margin: 1em 3em; }

.gnum { color: #EEEEEE; font-size: 4em; }
.guidetoc { list-style-type: lower-roman; text-transform: lowercase; }
.guidetocnull { list-style-type: circle; }
.guideobsbox { float: right; background: #EEEEEE; padding: 1em; width: 45%; margin-top: 3em; border-radius: 1em; }
.guidetocdiv { float: left;  width: 35%; margin-top: 3em; }



/* 2021 additions: */

/* pull quote aside */
.pquote { float: right; max-width: 10em; padding: 1em 0em 1em 1em; font-size: 110%; font-style: italic; }

.nothere { background: #fcf1d2; padding: 0.2em 1em 0.2em 1em; }