@import url('https://use.fontawesome.com/releases/v5.8.1/css/all.css'); 
@import url('https://fonts.googleapis.com/css?family=Kurale');
@font-face { font-family: 'KuraleOffline'; font-display: active; 
   src: url('../schrift/kurale-regular.otf') format('truetype'); }
@font-face { font-family: 'Lobster'; font-display: active; 
   src: url('../schrift/LobsterTwo-Regular.otf') format('truetype'); }
@-ms-viewport {
   width: device-width; }
@viewport {
   width: device-width; }
*, *::after, *::before {
   box-sizing: border-box; }
html, body {
   height:100%; }
body {
   font-family: Kurale, KuraleOffline, Lobster, serif; 
   background: #394fe0;
   color: white;
   display: flex;
   flex: 1 1 auto;
   margin: 0;
   flex-flow: column;
   min-height: 100vh; 
   padding-top: 0.5rem;
}
main {
   margin: 5px; }
main.stihi article {
   float: left;
   padding: 0 1rem; }
main.stihi h3 {
   color: yellow; 
   margin-bottom: 0; }
footer {
   margin-top: 0; 
   clear: both; }
select, input {
   width: 15rem; 
   margin: 3px; }
input[type="submit"] {
   width: auto; }
select, input, textarea {
   border-radius: 0.3rem }
textarea {
   width: 90% }
header, nav {
   margin-top: -1rem;
   margin-bottom: 1rem; }
nav td {
   display: block;
   float: left; }
aside {
   text-indent: 1rem;
   font-size: larger; }
h1 {
   text-shadow: 2px 2px 3px black, 
      -2px -2px 3px black; }
h2 { 
   margin-top: -1rem; 
   text-align: right; 
   color: #04cfff; }
h2:hover { 
   color: greenyellow;
   background-color: unset;
   letter-spacing: unset;
   word-spacing: unset;
   text-indent: unset; }
a, aside {
   font-weight: bold; 
   font-size: larger; 
   padding: 2px; } 
a:hover, a:focus, a:active {
   text-decoration: underline; 
   text-decoration-style: double; }
a[href] {
   color: #dedb93;
   font-weight: bold; 
   font-size: larger; 
   padding: 2px; }
div.box { 
   margin: auto;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   flex: 1;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   flex-flow: row; }
div.box article {
   width: 50%; }
div.box article.ganz {
   width: 100%; }
article {
   background-color: #63309f;
   padding: 0.3rem; 
   border-radius: 0.3rem;
   margin: 3px;
   color: #FFF; }
@keyframes farbe {
   50% { background-color: #462b65;
      border: 1rem; } } 
article:hover, td:hover {
   animation: farbe 3s; 
   animation-timing-function: ease-in-out; }
aside.regeln {
   font-size: smaller; 
   padding: 3px; }
table { 
   background-color: #3F51B5; 
   border-radius: 0.5rem; 
   padding: 0 0.5rem;
   margin-bottom: 0; 
   box-sizing: content-box; }
table.salat td {
   font-size: xx-large;
   text-align: center;
   width: 6vw;
   border: 1px;
   padding: 1px;
   animation: none; 
   color: darkblue; 
   background-color: aquamarine;
   text-align: center; 
   break-inside: avoid;
   margin: 1px; }
table.salat.sieben td {
   font-size: 7vmin;
   width: 9vw;
   height: 9vh; }
table.salat.zehn td {
   font-size: 6vmin;
   width: 7vw;
   height: 7vh; }
table.salat:hover td:not(.normal) {
   font-weight: bold; 
   background-color: aqua;
   transition-timing-function: linear;
   transition-duration: 1s;
/*   transform: matrix(1, -0.05, 0, 0.9, 0, 0);*/
   color: black; }
table.salat input {
   text-align: center;
   font-size: 100%;
   border: 1px;
   margin: 1px;
   padding: 1px;
   width: 5vw; 
   height: 6vh; 
   background-color: aquamarine; }
tr, code {
   padding: 0.2rem; 
   border-radius: 0.4rem; 
   text-align: left; }
tr.beitrag, code {
   background-color: #689F38 }
tr.beitrag:nth-child(3n)  {
   background-color: #509F60 }
tr.beitrag:nth-child(3n+1) {
   background-color: #389F88 }
td, th { 
   padding: 3px 7px; 
   display: inline-block; 
   border-radius: 5px; }
td.datum {
   color: #9621c9; }
td.name {
   color: #fe7; 
   text-shadow: 1px 1px 1px #6c0505 }
td.thema {
   color: black; }
table.salat tr {
   white-space: nowrap; }
input[type="number"] {
   width: 3rem; }
input[type="submit"] {
   padding: 2px; 
   color: #462b65; }
p.unten {
   background-color: #303F9F; 
   padding: 3px; 
   border-radius: 2px; }
p.unten input {
   width: unset; }
p.sort {
   width: auto; }
p.sort:hover {
   width: inherit; }
p.sort span {
   background-color: #462b65;
   padding: 0 1rem; 
   border-radius: 5px;
   font-size: xx-large;
   letter-spacing: 0.5rem; }
p.sort span:hover {
   background-color: #3F51B5; }
span.zaehlen {
   font-size: smaller;
   color: yellow; }
.big {
   font-size: larger; }
.HA {
   text-shadow: 2px 2px 1px black;
   background-color: yellow; }
.s4ot {
   color: #0b305c; }
#top {
   right: 5px;
   padding: 5px;
   top: 0px;
   margin-top: 20px;
   margin-bottom: 20px;
   opacity: 0.7;
   color: goldenrod;
   z-index: 2;
   position: fixed; }
#top a:hover {
   color: aqua; }
#up {
   right: 5px;
   padding: 5px;
   bottom: 1rem;
   margin-top: 20px;
   margin-bottom: 20px;
   opacity: 0.7;
   color: goldenrod;
   z-index: 2;
   position: fixed; }
#up a:hover {
   color: aqua; }
#up a:active {
   color: black; }
@media screen and (max-width:999px) {
   main {
      margin: 2px; }
   table {
      padding: 0; }
   h2 {
      display: none; } 
   select, input { 
      margin: 0.2rem 0.5rem; } 
   div.box {
      flex-direction: column; }
   div.box article {
      width: 100%; } }
@media screen and (max-width:666px) {
      header, #zeit, .cut, #fade {
      display: none; } }
/* @media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) */