/* courgette-regular - latin */
@font-face {
  font-family: 'Courgette';
  font-style: normal;
  font-weight: 400;
  src: url('Bilderbogen/fonts/courgette-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('Bilderbogen/fonts/courgette-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('Bilderbogen/fonts/courgette-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('Bilderbogen/fonts/courgette-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('Bilderbogen/fonts/courgette-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('Bilderbogen/fonts/courgette-v13-latin-regular.svg#Courgette') format('svg'); /* Legacy iOS */
}

html{scroll-behavior: smooth;}




h1 {font-size:50px; color:#4d0000 ;font-family: 'Courgette';text-align: center;line-height: 10px;}
h2 {font-size:30px; color:#002699;font-family: 'Courgette';text-align: center;font-weight: 400;}
h3 {font-size:20px; color:lightyellow;font-family: 'Courgette';font-weight:lighter;text-align: center;}

p {font-size:22px;font-family: 'Courgette';text-align:center;color:#4d0000 ;}

figcaption{ 
    
    font-size: 20px;color:navy;font-family: cursive;text-align: center;padding-top: 20px;

}

.box{
height: 550px;
border: 1px solid #4d0000;
margin-bottom: 3px;margin-right: 3px;
padding: 5px;background-color:  #fff9e5;border-radius:10px;
} 


div {
  float: left;
  }


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
   
    background-color:darkgoldenrod;
    overflow:hidden;
    position:fixed;
    top:10;
    border:1px solid #4d0000;border-radius: 15px;
    
}

ul li:last-child{background-color:#002699;}

li a {
    display:block;
    text-align:center;
    color:lightyellow;
    padding: 8px 0 8px 16px;
    text-decoration: none;
    font-size: 20px;
}


li a:hover {
    
    background-color: lightsteelblue;
    color: white;
}



li {
    
    float:left;border-right: 1px solid #bbb;width:150px;font-family: 'Courgette';
}


header {background-color:#fff2cc ; padding-bottom: 8px;padding-top: 10px;border-bottom: 1px solid navy;}

body {background-color: #fff9e5; width: 100%;text-align: center;}

.box2 {hight:40px;width:100%;background-color:#fff2cc;border-top: 1px solid #4d0000;border-bottom: 1px solid #4d0000;margin-bottom:10px;text-align: center}
.box3 {hight:50px;width:100px;background-color:#4d0000;border-top: 1px solid navy;border-bottom: 1px solid navy;margin-top:10px;margin-bottom: 10px; border-radius:30px;color:lightyellow;margin-left:38%;box-shadow:10px 5px 5px #a65959; }
.box4 {hight:50px;width:100px;background-color:#002699;border-top: 1px solid navy;border-bottom: 1px solid navy;margin-top:10px;margin-bottom: 10px; border-radius:30px;color:lightyellow;margin-left:5%;box-shadow:10px 5px 5px #3377ff; }


.hovertext {
  position: relative;
  border-bottom: 10px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 220px;
  background-color:#4d0000 ;
  color: #fff;
  text-align: center;
  border-radius: 20px;
  padding: 10px;
  transition: opacity 1s ease-in-out;font-size: 20px;font-family: sans-serif;

  position: absolute;
  z-index: 1;
  left: 50px;
  top: 1%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}