@font-face {
  font-family: 'Fag';
  src: url('https://file.garden/ZyAZ489CMB3jXlAi/FaggottPin%20Strada.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
 
@font-face {
  font-family: 'Du Bell';
  src: url('https://file.garden/ZyAZ489CMB3jXlAi/dubellay.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
 
@font-face {
  font-family: 'Averia Libre';
  src: url('https://file.garden/ZyAZ489CMB3jXlAi/AveriaSerifLibre-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
 

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: black;
}
 
#stage-wrapper {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  overflow: hidden;
}
 
#stage {
  position: relative;
  width: 2836px;
  height: 1230px;
  flex-shrink: 0;
  overflow: hidden;
  transform-origin: center center;
  background: black;
}
 
.texture{
  background-image: url(https://file.garden/ZyAZ489CMB3jXlAi/wrinkled-and-crumpled-white-paper-texture-background-photo.jpg);
  mix-blend-mode: overlay;
  position: absolute;
  width: 700px;
  height: 960px;
  left: 22%;
  bottom: 2%;
  z-index: 500;
  opacity: 0.1;
  pointer-events: none;
}
 
.container{
  position: relative;
  width: 100%;
  height: 100%;
}
 
h1{
  font-size: 60px;
  animation: shake 0.3s linear infinite;
  color: #170326;
}
 
 
 @keyframes shake {
 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(0deg);
  }
 }
 
.continue { 
  position: absolute; 
  top: 80%; 
  left: 23%; 
  width: 200px; 
  height: 400px; 
  background-image: url(https://file.garden/ZyAZ489CMB3jXlAi/de.webp); 
  background-repeat: no-repeat; 
  background-size: contain; 
  transform: rotate(-30deg); 
  z-index: 600;
  pointer-events: auto;
}
 
.continue a { 
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-decoration: none; 
  cursor: pointer;
}
 
.continuetxt { 
  position: absolute; 
  left: 36%; 
  top: 14%; 
  font-size: 20px; 
  font-family: 'Fag'; 
  color: #402b2b; 
  pointer-events: none;
}
 
h3{
  font-size: 25px;
  text-shadow: 1px 0px 5px #46364d;
  font-family: 'Averia Libre';
  color: #140f17;
}
 
body {
  font-family: 'Fag';
  color: #402b2b;
  font-size: 30px;
}
 
.hidden {
  display: none;
}
 
.doc {
border-image: url(https://file.garden/ZyAZ489CMB3jXlAi/Sprite-0001-6x.png) 50 37 30 37 fill / 50px 37px 30px 37px;
padding: 50px 37px 30px 37px;
  z-index: 400;
  position: absolute;
  width: 640px;
  height: 900px;
  left: 22%;
  bottom: 2%;
  box-shadow: 0 0 500px 1000px rgba(0,0,0,0.6);
    font-size: 20px;
  font-family: 'Du Bell';
  text-shadow: 1px 0px 5px #46364d;
  color: #140f17;
}
 
.button{
  position: absolute;
  z-index: 51;
  left: 48%;
  top: 63%;
background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
 
.hovertxt{
  opacity: 0;
  visibility: hidden;
   transition: opacity 0.5s ease, visibility 0.5s ease; 
  position: absolute;
  left: 45%;
  top: 63%;
  width: 503.6px;
  height: 133.5px;
  padding-right: 60px;
}
 
.button:hover + .hovertxt {
  opacity: 1;
  visibility: visible;
}
 
.cache {
  position: absolute;
  left: 47%;
  top: 50%;
  z-index: 50;
}
 
.page {
  position: absolute;
animation: floatUpDown 2s ease-in-out infinite alternate;
}
 
 
@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-20px);
  }
}
 
 
.vignette{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 27px 20px rgba(0,0,0,0.4) inset;
}
 
 
.grain{
content: '';
  width: 100%;
  height: 100%;
  position: absolute;
   z-index: 10;
  top: 2%;
  left: 1%;
  opacity: .06;
  background: url('https://file.garden/ZyAZ489CMB3jXlAi/no-signal-tv-texture-television-grainy-noise-effect-as-background-no-signal-retro-vintage-television-pattern-no-signal-tv-143904994.webp') repeat center center;
  -webkit-animation: grain 0.5s steps(1) infinite;
  animation: grain 0.5s steps(1) infinite;
  pointer-events: none;
}
@keyframes grain {
  0%, 100% {
    transform: translate(0, 0, 0);
  }
 
  10% {
    transform: translate(-1%, -1%);
  }
 
  20% {
    transform: translate(1%, 1%);
  }
 
  30% {
    transform: translate(-2%, -2%);
  }
 
  40% {
    transform: translate(3%, 3%);
  }
 
  50% {
    transform: translate(-3%, -3%);
  }
 
  60% {
    transform: translate(4%, 4%);
  }
 
  70% {
    transform: translate(-4%, -4%);
  }
 
  80% {
    transform: translate(2%, 2%);
  }
 
  90% {
    transform: translate(-3%, -3%);
  }
}
 
 
.crt-lines {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("https://www.lofi.cafe/images/lines.jpg");
	z-index: 10;
	background-size: 7px auto;
	mix-blend-mode: overlay;
	pointer-events: none;
	opacity: 0.4;
	animation: moveDownAnimation 150s linear infinite;
}
@keyframes moveDownAnimation {
	100% {
		background-position-y: 100%;
	}
}
 
.noclicking{
  pointer-events: none;
}
 

.text-ring-wrap {
  position: absolute;
  left: calc(50% + 225px);
  top: calc(50% + 175px);
  width: 700px;
  height: 700px;
  transform: translate(-50%, -50%);
  z-index: 21;
  pointer-events: none;
}
 
.text-ring {
  position: relative;
  width: 100%;
  height: 100%;
  font-family: 'Du Bell', consolas, monospace;
  font-size: 17px;
  letter-spacing: 1px;
  animation: textRotation 12s linear infinite;
}
 
@keyframes textRotation {
  to {
    transform: rotate(360deg);
  }
}
 
.text-ring span {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.2em;
}
 
.overlay {
  height: 350px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 450px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(50, 24, 50,1);
}
.overlay::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/crt.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
}