a:link, a:visited {
  font-weight: bold;
  color: #AA0000;
  }

sup {
  font-size: 0.5em;       
  line-height: 0;         
  position: relative;    
  vertical-align: baseline;
  top: -0.7em;           
}

.full-page-image {
    position: fixed;
    background-size: cover;
    background-position: center;
    width: 100%;
    top: 0;
    left: 0;
    margin: 0;
    object-fit: cover;
    min-height: 100vh; 
    z-index: -1;

}

.full-page-image2 {
    position: absolute;
    background-size: cover;
    background-position: center;
    width: 100%;
    top: 0;
    left: 0;
    margin: 0;
    object-fit: cover;
    min-height: 100vh; 
    z-index: -1;

}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 5%;
  width: 100%;
}


.blinkie {
border-right: 2px solid #000;
animation: cursie 1s step-end infinite;
}

@keyframes cursie {
  50% { opacity: 0; }
}

.containerls1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 25%;
  width: 100%;
}

.containerls {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin-top: 0;
  width: 100%;
}

/* veeeejo */

iframe {
  position: fixed;
  left: -10vw;
  bottom: -15vh;
  width: 100vw;
  height: 100vh;
  display: block;  
  z-index: -1;
  }

.noguy {
position: fixed;
bottom: -80px;
left: 40%;
z-index: 1;

}

.noguy img {
  display: block;
}

/* pornbox mailography */

.bookcontainer {
  margin: 1%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #eee;
  perspective: 1500px;
  overflow: visible;
  }
.book {
  position: relative;
  width: 500px;
  height: 700px;
  margin-left: 600px;
  }
.page {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #eee;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1s ease-in-out;
  cursor: pointer;
  }
.page img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  display: block;
  backface-visibility: hidden;
}
.page .back {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
}
.page.flipped {
  transform: rotateY(-180deg);
}

.mailboxhome {
  position: absolute;
  right: 20%;
  top: 25%;
  font-family: "Yuyu", sans-serif;
  font-size: 40px;
}

/* FONTS */

.coral-pixels {
  font-family: "Coral Pixels", serif;
}
.special-elite {
  font-family: "Special Elite", system-ui;
}
.yuyu {
  font-family: "Yuyu", sans-serif;
  font-weight: 200;
}
.space-mono {
  font-family: "Space Mono", monospace;
}
.lacquer {
  font-family: "Lacquer", system-ui;
}
.bpmf {
  font-family: "Bpmf Iansui", cursive;
}
.gaegu {
  font-family: "Gaegu", sans-serif;
}
.martel-sans {
  font-family: "Martel Sans", sans-serif;
}

/* I Need to learn how to make many of the same with variations instead of new classes probably TITE TITE TITE */
  
h1,.tite  {
  font-size: 50px;
  line-height: 48px;
}

.titebutn {
 display: inline-block;
  padding: 12px 24px;
  font-size: 50px;
  background-color: #eee;
  border: 5px solid black;
  box-shadow:
  padding: 1%;
  margin: 2%;
  box-shadow: -4px 4px 0px 0px #000000;

transition: background-color 0.2s ease;

}
.titebutn:hover {
  background-color: #eee;
  border: 5px solid black;
  box-shadow: 0 0 0 0 #000000;
  transform: scale(0.9);

}
.tite2 {
 color: black;
 font-size: 50px;
 line-height: 48px;
}

.tite3 {
 position: absolute;
 top:50%;	
 color: black;
 font-size: 90px;
 line-height: 88px;

}



section {
  margin: 0;  
}

/* THERE IS NO HERE THERE IS NO NOW */
.now {
  position: absolute;
  left: 35%;
  top: 10%;
  z-index: 4;
  transform: perspective(200px) rotateX(-45deg);
  animation: here 5s ease-in-out 1 both;
}

@keyframes here {
  0% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  }
}



.containerbutt {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 15%;
  width: 100%;

}
.butt {
  margin-left: 0;
  width: 35%;
  text-align: justify;
  flex-direction: column;
  font-size: 20px;
  line-height: 19px;
}


.content {
  width: 50%;
  text-align: justify;
  flex-direction: row;
  font-size: 20px;
  line-height: 19px;
}
.lscontent {
  margin-left: 40%;
  margin-top: 20%;
  width: 50%;
  text-align: justify;
  flex-direction: row;
  font-size: 20px;
  line-height: 19px;
}

.ouchfootnote {
  position: fixed;
  left: 30%;
  bottom: 10%;
  width: 40%;
  text-align: center;
  font-size: .8em;
  line-height: 19px;
  animation: ouchide 3s ease-in 1 7s both;
}

.ouchcontent {
  position: fixed;
  left: 30%;
  top: 10%;
  width: 40%;
  text-align: justify;
  font-size: 20px;
  line-height: 19px;
  animation: ouchide2 3s ease-in 1 2s both;
}
.ouchcontent2 {
  position: fixed;
  left: 30%;
  top: 20%;
  width: 40%;
  text-align: justify;
  font-size: 20px;
  line-height: 19px;
  animation: ouchide 3s ease-in 1 9s both;
}

@keyframes ouchide {
  0% {
  opacity: 0;
  }
  100% {
  opacity:1; 
  }
}
@keyframes ouchide2 {
  0% {
  opacity: 0;
  }
  100% {
  opacity:1; 
  }
}


.church {
  margin-left: 0;
  width: 35%;
  text-align: justify;
  flex-direction: column;
 font-size: 20px;
  line-height: 19px;
}

/* delay showing text */

.churchhide {
  animation: chide 3s ease-in 1 both;
}

@keyframes chide {
  0% {
  opacity: 0;
  }
  100% {
  opacity:1; 
  }
}

.waitbigslide {
  position: absolute;
  top: 40%;
  animation:
    whide 2s ease-in 1 2s both,
    waitbig-slide 2.5s linear 1 3s both;
}

@keyframes whide {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes waitbig-slide {
  0%   { transform: scale(0) translateX(0); }
  20%  { transform: scale(5) translateX(0); }
  40%  { transform: scale(1) translateX(0); }
  97%  { transform: scale(1) translateX(0); }
  100% { transform: scale(1) translateX(-1000px); }
}

.churchqu {
  animation: puff 4s ease-in-out infinite both;
transform-origin: center center;
}

@keyframes puff {
  0% { 
  letter-spacing: auto;
  filter: blur(0); 
  }
  
   50% {
   letter-spacing: 4px;
   filter: blur(3px);
  }
  
   100% {
     filter: blur(0);
  }
}

.lim {
  position: absolute;
  left: 60%;
  top: 50%;
  animation: lhide 4s ease-in 1 5s both;
}
@keyframes lhide {
  0% {
  opacity: 0;
  }
  100% {
  opacity:1; 
  }
}

.lim2 {
  position: absolute;
  left: 70%;
  top: 55%;
  animation: lhide2 4s ease-in 1 7s both;
}

@keyframes lhide2 {
  0% {
  opacity: 0;
  }
  100% {
  opacity:1;
  }
}

.lim3 {
  position: absolute;
  left: 75%;
  top: 60%;
  animation: lhide3 5s ease-in 1 8s both;
}

@keyframes lhide3 {
  0% {
  opacity: 0;
  }
  100% {
  opacity:1;
  }
}

ul li {
  margin-left: 5%;
  font-size: 20px;
  line-height: 19px;
  list-style-type: "► ";
}




/* back and forth <-- there -->  <--- there --> */


.there1{
  display: inline-block;
  animation: rem 3s ease-in-out infinite alternate;

}

@keyframes rem {
 0% {
    transform: translateX(-30px);
  }
  100% {
    transform: translateX(-2000px); 
  }
}

.there2 { 
  display: inline-block;
  animation: rem2 2.4s ease-in-out infinite alternate;
}

@keyframes rem2 {
 0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(1000px); 
  }
}

							/*//////////////*/
							/* HIS HOLINESS */
							/*//////////////*/

.froggy {
  position: absolute;
  top: 50%;
  left: 25%;
  z-index: 5;

}

.froggy2 {
  position: absolute;
  top: 60%;
  left: 35%;
  z-index: 2;

}
						/*//////////////////////*/
						/* Froggy Froggy Shake. */
						/*       BEHOLD         */
						/*//////////////////////*/

.froggyshake01 {
  animation: shake-constant 0.5s infinite;
}

@keyframes shake-constant {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }

  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }

  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }

  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }

  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }

  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }

  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }

  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }

  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }

  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }

  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

.froggyshake02 {
  animation: shake-constant2 0.5s infinite;
}

@keyframes shake-constant2 {
  0% {
    transform: translate(-1px, 1px) rotate(0deg);
  }

  10% {
    transform: translate(2px, -2px) rotate(-1deg);
  }

  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }

  30% {
    transform: translate(-3px, 2px) rotate(0deg);
  }

  40% {
    transform: translate(-2px, -1px) rotate(-1deg);
  }

  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }

  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }

  70% {
    transform: translate(3px, -1px) rotate(1deg);
  }

  80% {
    transform: translate(-1px, 1px) rotate(2deg);
  }

  90% {
    transform: translate(1px, 2px) rotate(1deg);
  }

  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}


.flew {
  width: 70vw;
  height: 70vh;
  animation: fly 10s infinite;
  z-index: -1;
}

@keyframes fly {
0% { 
   
    transform: translateX(100px) rotate(0deg); 
  }
  50% { 
    transform: translateX(100px) rotate(0deg); 
  }
  100% { 
    transform: translateX(100px) rotate(360deg); 
  }

} 
						/*///////////////*/
						/* SO MANY FADES */
						/*///////////////*/
						
 #fade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white; 
    z-index: 9999;
    transition: opacity 3.5s ease; 
    opacity: 1;
    pointer-events: none;
  } 
  
   #fadewhite-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white; 
    z-index: 9999;
    transition: opacity 3.5s ease; 
    opacity: 1;
    pointer-events: none;
  } 
  
  
#fadebutt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black; 
    z-index: 9999;
    transition: opacity 10.5s ease; 
    opacity: 1;
    pointer-events: none;
  }
  
#fadeouch-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black; 
    z-index: 9999;
    transition: opacity 6.5s ease; 
    opacity: 1;
    pointer-events: none;
  }
  
#fadeout-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white; 
  z-index: 9999;
  transition: opacity 3s ease; 
  opacity: 0;
  pointer-events: none;
}
  
/*WHEEEEEEEEEEEEEEEEEEEE */

.whee{
  animation: ahh 1s ease-in 1s both;
}

@keyframes ahh {
  0% {
  transform: translateY(0) rotateX(0) scale(1);
  transform-origin: 50% 1400px;
  opacity: 1;
  }
  100% {
  transform: translateY(-600px) rotateX(-30deg) scale(0);
  transform-origin: 50% 100%;
  opacity: 0;
  }
}

.cotfs
{
  padding: 0;
  display: block;
  width: max-content;
  text-align: center;
  white-space: nowrap;
  position:absolute;
  top: 50%;
  left: 50%;
  animation: scrollby 8s ease 1s 1 both;
  transform-origin: center center;
 transform: translate(-50%, -50%); 

}

@keyframes scrollby {

 0% {
    transform: translate(-50%, -50%) scale(100); 
    visibility: hidden;
  }
  50% {visibility: hidden;}
  
  100% {
      transform: translate(-50%, -50%) scale(0); 
      visibility: visible;
  }

}

/* IT'S A BIRD! IT'S A PLANE! NO, WAIT! IT'S A FROG! */

.cotfs2
  {
  animation: scrollby2 2s linear 1 forwards;
  display: inline-block;
  animation-delay: 3.5s;
  animation-fill-mode: both; 
  }

@keyframes scrollby2 {

 0% {
    transform: translateX(400%);
  }
  100% {
 
    transform: translateX(-300%);
  }

}

				/* TYPEWRITER EFFECT THAT I PROBABLY WON'T EVEN USE */

.typecontainer
  {
  margin-left:50%;
  display: flex;
  width: 99%;
  }

.typewriter {
  color: #000;
 
  overflow: hidden; 	
  border-right: .15em solid black; 		/* The cursor */
  white-space: nowrap; 		
  margin: 0 auto; 	
  letter-spacing: 0; 	
  animation: 
    typing 3s steps(30, end),
    blink-caret .9s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The cursor animation */

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: black }
}



/* WAS it a church?????? */

.flick {
display: inline-block;
animation: flicker-in-1 2s linear 5s 2 both;
}


@keyframes flicker-in-1 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  10.1% {
    opacity: 1;
  }
  10.2% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  20.1% {
    opacity: 1;
  }
  20.6% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  30.1% {
    opacity: 1;
  }
  30.5% {
    opacity: 1;
  }
  30.6% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  45.1% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  55.1% {
    opacity: 0;
  }
  57% {
    opacity: 0;
  }
  57.1% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  60.1% {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  65.1% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  75.1% {
    opacity: 0;
  }
  77% {
    opacity: 0;
  }
  77.1% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  85.1% {
    opacity: 0;
  }
  86% {
    opacity: 0;
  }
  86.1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}


/* but what _IS_ a church anyway??? */

.vibe {
   display: inline-block;
   animation: scale-up-center 2s alternate 8.5s both;
  }


@keyframes scale-up-center {
  0% {
            transform: scale(1);
  }
  50% {
            transform: scale(3);
  }
}


/* Ouch. */

.tite3.bounceInDown {
  animation: bounceDown 1s linear 2s both, ouchfade 2s ease-out 1 5s both;
}
@keyframes bounceDown {
    0% {
        opacity: 0;
        transform: translateY(-2500px);
    }
    1% {
        opacity: 1;
   }
    90% {
        transform: translateY(10px);
    }
    93% {
        transform: translateY(-10px);
    }
    95% {
        transform: translateY(0);
    }
    97% {
        transform: translateY(-10px);
    }
    
    100% {
        transform: translateY(0);
    }
  }

@keyframes ouchfade { 
  0% { opacity: 1; } 
  100% { opacity: 0; } 
}

div.flit {
  animation: slide-out-left 6s cubic-bezier(0.550, 0.085, 0.680, 0.530) 4s both;
  }
  
  @keyframes slide-out-left 
  {
  0% {transform: translateY(1000px) translateX(1000px);} 
  100% {transform: translateY(-1000px) translateX(-1000px);
  }
 }

/* speshul flutterbies cursor */

 .tiny-butterfly {
 position: absolute;
 pointer-events: none;
 font-size: 16px;
 animation: floatUpAndFade 0.8s ease-out forwards;
 z-index: 9999;
}

@keyframes floatUpAndFade {
 0% {
 opacity: 1;
 transform: translate(0, 0) scale(0.5) rotate(0deg);
 }
 100% {
 opacity: 0;
 transform: translate(var(--rand-x), -60px) scale(1.2) rotate(var(--rand-rot));
 }
}

.butterfly-trigger {
 padding-right: 25px;
 padding-top: 25px;
 padding-bottom: 25px;
 display: inline-block;
 cursor: pointer;
 user-select: none;
 }
 
 
bounce-out-top {
  animation: bounce-out-top 2s ease 7s both;
}


@keyframes bounce-out-top {
  0% {
            transform: translateY(0);
            animation-timing-function: ease-out;
  }
  5% {
            transform: translateY(-30px);
            animation-timing-function: ease-in;
  }
  15% {
            transform: translateY(0);
            animation-timing-function: ease-out;
  }
  25% {
            transform: translateY(-38px);
            animation-timing-function: ease-in;
  }
  38% {
            transform: translateY(0);
            animation-timing-function: ease-out;
  }
  52% {
            transform: translateY(-75px);
            animation-timing-function: ease-in;
  }
  70% {
            transform: translateY(0);
            animation-timing-function: ease-out;
  }
  85% {
    opacity: 1;
  }
  100% {
            transform: translateY(-800px);
    opacity: 0;
  }
}

        
.churchHallway {
  top:0;
  margin:0;
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  animation: through 30s ease-in 4s 1 forwards;
  transform-origin: 50% 40%;
}

@keyframes through {

  0% {transform: scale(1);}
  100% {transform: scale(300) }

}




/* -----------------------------------------------------------------------
 *   Lots of things generated by Animista on [SO MANY DAYS AND TIMES]
 * 		       Licensed under FreeBSD License.
 *	 	See http://animista.net/license for more info. 
 *	 	w: http://animista.net, t: @cssanimista
 *
 *			    Buy her a coffee NOW! 
 *	         	     She is a hero.
 * --------------------------------------------------------------------- */



/* MO-BILE SHITE */


@media screen and (max-width: 900px) {
   
  .container {
  max-width: 99%;
   }
  .lim2 {
  position: absolute;
  left: 35%;
  top: 80%;
  }
  .lim {
  position: absolute;
  left: 50%;
  top: 70%;
  }
}