@font-face {
   font-family: "Creampuff";
   src: url(/fonts/creampuff.woff);
   font-style: normal;
   font-weight: bold;
 }

 @font-face {
   font-family: "Georgia";
   src: url(/fonts/GEORGIA.TTF);
 }

 @font-face {
   font-family: "Georgia";
   src: url(/fonts/GEORGIAB.TTF);
   font-weight: bold;
 }

 body {
   background: #666;
   font-family: Georgia, "Times New Roman", Times, serif;
   color: #fff;
 }

 .p1 {
   padding: 1%;
 }

 body>div>h1 {
   font-family: Creampuff;
   color: #bb99ee;
   font-size: 50pt;
   margin: 0px;
   padding: 0px;
 }

 h2,
 p {
   color: #ffffff;
 }

 a {
   color: #331122;
   text-decoration: none;
 }

 .impressum a {
   color: #ffee88;
 }

 #snailcontainer {
   background: #000000;
   height: 300px;
   position: relative;
   overflow: hidden;
 }

 #snailcontaner>div {
   position: absolute;
   top: 0;
   left: 0;
 }

 #snailcontainer>div>div {
   position: absolute;
   padding: 2px 40px 5px 40px;
   margin-right: 10px;
   color: #ffffff;
   left: 0;
   top: 0;
   font-size: 10pt;
   border-width: 2px;
   border-style: solid;
 }

 #snailcontainer div h1 {
   text-align: right;
 }

 #snailcontainer>span {
   position: absolute;
   color: #fff;
 }

 #snailcontainer>p {
   color: #bb99ee;
   position: absolute;
 }

 .impressum {
   background: #000000;
   padding: 20px;
 }

 #notes {
   box-sizing: border-box;
   position: fixed;
   width: 98%;
   left: 1%;
   bottom: 0;
   background: rgba(255, 220, 10, 0.8);
   border: 2px solid rgba(255, 220, 10, 1);
   border-bottom: none;
   border-radius: 20px 20px 0 0;
   padding: 10px 20px;
   color: #000;
   will-change: opacity, transform;
 }

 #notes button {
   background: #f40;
   color: #000;
   border: none;
   border-radius: 5px;
   padding: 5px 10px;
 }

 #notes * {
   display: none;
 }

 #popup {
   position: fixed;
   visibility: hidden;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
 }

 #popup .modal {
   position: absolute;
   width: 80%;
   max-width: 500px;
   left: 50%;
   top: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   background: #fff;
 }

 #popup h1 {
   margin: 0;
   padding: 10px 20px;
   background: #8cf;
   text-align: center;
 }

 #popup p {
   padding: 10px 20px;
   color: #000;
 }

 #popup button {
   display: block;
   margin: 20px auto 0 auto;
   padding: 10px 20px;
   border: none;
   border-radius: 5px;
 }

 @media (max-width: 480px) {
   body>div>h1 {
     font-size: 14vw;
     text-align: center;
   }
 }