body {
  font-family: 'Brush Script MT', cursive;
  font-size: 120%;
  color: #111;
  width: 100%;
  max-width: 80%;
  padding: 1em;
  margin: 0 10%;
  display: block;
  text-align: center;
  background-image: url("https://image.freepik.com/vektoren-kostenlos/wellig-glatte-linien-muster-hintergrund_1017-14206.jpg");
}

body #universe {
  background-image: url("https://wallpapercave.com/wp/wp2088474.jpg" !important);
  z-index: 2;
}

a:link    {
  color: rgb(17, 170, 34);
  text-decoration: none;
  font-size: 120%;
}

a:visited { color: rgb(17, 170, 34); }
a:hover   { color: red; text-decoration: none; }


p { margin-top: 10vh;}

h1, h2, h3, h4, h5, h6, h7 { margin:0px;}

#menu li {
    display: inline;
}

#post-list {
    margin-bottom: 1em;
    margin-top: 1em;
}

pre {
    margin: 2em 1em 2em 4em;
    white-space: pre-wrap;
}

header {
  margin-bottom: 5%;
}

#pfeil {
  max-height: 3vh;
}

#book-a-bonk {left: 30%;
top: 22%;
background-image: book-a-bonk.jpg;
position: absolute;
-webkit-animation: flickerAnimation 5s infinite;
-moz-animation: flickerAnimation 5s infinite;
-o-animation: flickerAnimation 5s infinite;
 animation: flickerAnimation 5s infinite;
}

#book-a-bonk2 {
  right: 4%;
top: 4%;
background-image: book-a-bonk.jpg;
position: absolute;
max-width: 300px;
-webkit-animation: flickerAnimation 5s infinite;
-moz-animation: flickerAnimation 5s infinite;
-o-animation: flickerAnimation 5s infinite;
 animation: flickerAnimation 5s infinite;
}



@keyframes flickerAnimation {
  0%   { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:0; }
  100% { opacity:1; }
}



#clown {left: 30%;
top: 25%;
position: absolute;
z-index: -1;
max-width: 450px;}

#clown img {max-width: 450px;}

#cakeclown {left: 10%;
top: 45%;
position: absolute;}

#santaclownz {left: 25%;
top: 15%;
position: absolute;}

#mcraeck {left: 50%;
top: 10%;
position: absolute;}

#magicbonk {right: 20%;
top: 60%;
position: absolute;}

#torpedobonk {right: 30%;
bottom: 10%;
position: absolute;}

#cupidiot {left: 25%;
bottom: 5%;
position: absolute;}

#wtfaq {left: 5%;
top: 5%;
position: absolute;}

#daywid {left: 5%;
bottom: 5%;
position: absolute;}

#dummdumm {left: 12%;
bottom: 10%;
position: absolute;}

#social {right: 5%;
bottom: 5%;
position: fixed;}

#comingsoon {
position: absolute;
bottom: 0;
right: 0;
transform: rotate(-0.1turn);
}

#failed {
position: absolute;
bottom: 0;
right: 0;
transform: rotate(0.1turn);
}

#book-a-bonk2 img {max-width: 100%;}

img:hover {
  transform: scaleX(-1);
  filter: hue-rotate(90deg);
}

/* TEXT HOVER IMG */
.img__wrap {
  position: relative;
}

.img__description_layer {
  position: fixed;
  top: 40%;
  right: 25%;
  width: 5%;
  height: 5%;
  color: red;
  font-size: 2em;
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description_layer {
  visibility: visible;
  opacity: 1;
}

.img__description {
  transition: .2s;
  transform: translateY(1em);
}

.img__wrap:hover .img__description {
  transform: translateY(0);
}

  /* POP UP START */

  .img-replace {
    /* replace text with an image */
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    color: transparent;
    white-space: nowrap;
  }
  .bts-popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    backdrop-filter: blur(0.7rem)!important;
    visibility: hidden;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
    transition: opacity 0.3s 0s, visibility 0s 0.3s;
    z-index: 10000;
  }
  .bts-popup.is-visible {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
    transition: opacity 0.3s 0s, visibility 0s 0s;
  }

  .bts-popup-container {
    position: relative;
    width: 40%;
    height: 25%;
    left: 25%;
    top: 25%;
    background: #f36f21;
    text-align: center;
    padding: 7vw;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
    /* Force Hardware Acceleration in WebKit */
    -webkit-backface-visibility: hidden;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
  }

  .bts-popup-container .bts-popup-button {
    padding: 3%;
  	display: inline-block;
    margin-bottom: 3%;
    margin-right: 3%;
        background-color: white;
        width: 20%;
  }

  .bts-popup-container a {
    color: black;
    text-decoration: none;
    text-transform: uppercase;
  }

  .bts-popup-container a:hover {
    -webkit-animation: flicker 2s infinite !important;
  }

  @-webkit-keyframes flicker
  {
  0% {opacity:0;}
  9% {opacity:0;}
  10% {opacity:.5;}
  13% {opacity:0;}
  20% {opacity:.5;}
  25% {opacity:1;}
  }


  .bts-popup-container .bts-popup-close {
    position: relative;
  }
  .bts-popup-container .bts-popup-close::before, .bts-popup-container .bts-popup-close::after {
    content: '';
    position: absolute;
    top: 12px;
    width: 16px;
    height: 3px;
    background-color: white;
  }
  .bts-popup-container .bts-popup-close::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 8px;
  }
  .bts-popup-container .bts-popup-close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 6px;
    top: 13px;
  }
  .is-visible .bts-popup-container {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

/* POPUP TRYOUT */
          .overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            backdrop-filter: blur(0.7rem)!important;
            transition: opacity 500ms;
            visibility: visible;
            opacity: 1;
            z-index: 1000;
          }
          .overlay:target {
            visibility: hidden;
            opacity: 0;
            display:none
          }
          .popup {
            position: relative;
            padding: 7vw;
            background: #f36f21;
            width: 40%;
            height: 25%;
            left: 25%;
            top: 25%;
            z-index: 1000;
            transition: all 5s ease-in-out; }

            button {
                padding: 3%;
              	display: inline-block;
                margin-bottom: 3%;
                margin-right: 5%;
                    background-color: white;
                    width: 30%;
                    border: 0px;
                    font-family: 'Brush Script MT', cursive;
                    font-size: 120%;
              }

              button:hover {
                -webkit-animation: flicker 2s infinite !important;
              }


/*.popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; }*/

/* RESPONSIVE */
@media only screen and (max-width: 800px) {
  .bts-popup-container {
    margin: 8em auto;
  }
  #clown, #cakeclown, #santaclownz, #mcraeck, #magicbonk, #torpedobonk, #cupidiot, #wtfaq, #daywid, #dummdumm, #social, #comingsoon, #book-a-bonk2{
    width=device-width;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-bottom: 10vh;
  }
  #clown {margin-top: 20%;}
  #comingsoon {position: absolute;}
#social img {width: 25%}
#pfeil img {max-width: 25% !important}
#book-a-bonk {top: 0%; left: 50%;}
img {width: 100%; }
.bts-popup-container {width: 100%; height: 100%;}
.popup {width: 90%; left: 0%; height: 60%; top: 5%; padding-top: 30%;}
}