* {
padding : 0;
margin : 0;
}
html {
background : url(/ffhg.jpg) center center no-repeat fixed;
font-size : 100%;
background-size : cover;
scroll-behavior : smooth;
}
body {
text-align : center;
}
.container {
background : #EFEFEF;
box-shadow : 0 0 40px #000000;
border-bottom-left-radius : 30px;
border-bottom-right-radius : 30px;
border-top-left-radius : 30px;
border-top-right-radius : 30px;
margin : 0 auto;
padding : 0.6rem;
max-width : 600px;
}
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: white;
   color: black;
   text-align: center;
}
p {
font : 1.2rem/1.5 Verdana, Georgia, Sans Serif;
margin : 0 0 30px 0;
text-indent : 0;
text-align : justify;
}

pcenter {
font : 1.2rem/1.5 Verdana, Georgia, Sans Serif;
margin : 0 0 30px 0;
text-indent : 0;
text-align : center;
}

psmall {
text-align : center;
}
h2 {
font : 2.5rem/1.5 Verdana, Georgia, Serif;
margin : 0 0 0 0;
text-indent : 0;
text-align : center;
}

h6 {
font : 1.1rem Verdana, Georgia, Sans Serif;
margin : 0 0 30px 0;
text-indent : 0;
font-weight : normal;
text-align : center;
}


hr{

border: 0;
width: 100%;
height: 3px;
background-color: grey;
}


.container * {
padding : 0.1rem;
}
a:link, a:visited, a:active, a:hover {
text-decoration : none;
font-size : 1.2rem;
font-weight : normal;
color : #000000;
}
a:active, a:hover {
color : #333335;
text-decoration : underline;
}
a.text:link, a.text:visited {
font-size : 1.2rem;
text-decoration : underline;
font-weight : normal;
color : #000000;
}
a.text:active, a.text:hover {
color : #333335;
text-decoration : none;
}

a.commend:link, a.commend:visited {
font-size : 0.8rem;
text-decoration : underline;
font-weight : normal;
color : #000000;
}
a.commend:active, a.commend:hover {
color : #333335;
text-decoration : none;
}




a.story:link, a.story:visited {
font-size : 1.0rem;
text-decoration : none;
text-align : center;
font-weight : normal;
color : #000000;
}
a.story:active, a.story:hover {
color : #333335;
text-decoration : underline;
}




a.nav:link, a.nav:visited {
font : 1.2rem Verdana, Georgia, Sans Serif;
text-decoration : none;
font-weight : normal;
color : #000000;
}
a.nav:active, a.nav:hover {
color : #333335;
text-decoration : none;
}
.flex {
display : flex;
justify-content : center;
align-items : center;
}
img.bild {
margin : 0 5px 5px 0;
box-shadow : 0 0 20px black;
border-bottom-left-radius : 30px;
border-bottom-right-radius : 30px;
border-top-left-radius : 30px;
border-top-right-radius : 30px;
}

video {
margin : 0 5px 5px 0;
box-shadow : 0 0 20px black;
border-bottom-left-radius : 30px;
border-bottom-right-radius : 30px;
border-top-left-radius : 30px;
border-top-right-radius : 30px;
}


nav {
box-sizing : border-box;
float : left;
width : 100%;
font-size : 1.6rem;
}
nav ul {
margin : 0;
padding : 0;
}
nav a {
display : block;
color : #fff;
text-decoration : none;
}
nav ul li {
position : relative;
float : left;
list-style : none;
}
nav ul li a {
padding : 10px;
}
nav ul ul {
position : absolute;
top : -9999px;
left : -9999px;
background : #FFFFFF;
box-shadow : 0 0 20px black;
border-bottom-left-radius : 30px;
border-bottom-right-radius : 30px;
border-top-left-radius : 30px;
border-top-right-radius : 30px;
}
nav ul ul li {
float : none;
width : 300px;
}
nav ul ul li a {
padding : 10px 20px;
}
nav ul li:hover > ul {
top : 100%;
left : 0;
}
nav ul ul li:hover > ul {
top : 0;
left : 200px;
}
nav ul li.submenu > a:after {
position : relative;
float : right;
content : '';
margin-left : 10px;
margin-top : 5px;
}
nav ul ul li.submenu a:after {
margin-left : auto;
margin-right : -10px;
border-left : 5px solid #fff;
border-right : 5px solid transparent;
border-top : 5px solid transparent;
border-bottom : 5px solid transparent;
}
nav ul ul li:last-child {
border-bottom : none;
}
.header {
background : #808080;
}
.nav-main {
background : #808080;
text-align : center;
}
.main {
background : #808080;
}

b {
    text-decoration : underline dotted;
    font-size: 1.2rem;
    font-weight: normal;
    cursor: pointer;
    }


a.tooltip {
  position: relative;
  text-decoration: underline dotted;
}
a.tooltip:after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 20%;
  background: #ffcb66;
  padding: 5px 15px;
  color: black;
  -webkit-border-radius: 10px;
  -moz-border-radius : 10px;
  border-radius : 10px;
  white-space: nowrap;
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition : all 0.4s ease;
  transition : all 0.4s ease;
}
a.tooltip:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 20px solid #ffcb66;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  -webkit-transition: all 0.4s ease;
  -moz-transition : all 0.4s ease;
  transition : all 0.4s ease;
  opacity: 0;
  left: 30%;
  bottom: 90%;
}
a.tooltip:hover:after {
  bottom: 100%;
}
a.tooltip:hover:before {
  bottom: 70%;
}
a.tooltip:hover:after, a:hover:before {
  opacity: 1;
}


.footer {
background : #808080;
color : black;
font-size : 1.20em;
font-size : 1.20rem;
text-align : center;
}
@media screen and (min-width: 800px) {
body {
margin : 0.8rem;
}
.content {
display : flex;
}
}