@font-face {
font-family: pixel;
src: url(https://dl.dropbox.com/s/kmhe7d3n18vdz5e/w95fa.woff?dl=0);
}

@font-face {
src: url(https://dl.dropbox.com/s/ktlx5w7t8gk42nb/SakeMoru-Regular.ttf);
font-family: SakeMoru;
}

h1{
  margin-top: -9px;
 font-family:"SakeMoru";
 color: #594f58;
 font-size: 30px;
}

p{
font-family:"pixel";  
font-size: 25px;
}

.crt-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 9999;
  pointer-events: none; /* Allows user interaction */
  background: 
    linear-gradient(rgba(18, 16, 16, 0) 40%, rgba(0, 0, 0, 0.25) 40%), 
    linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 4px; /* Adjust size for scanlines */
  animation: flicker 0s infinite;
}

@keyframes flicker {
  0% { opacity: 0.9; }
  50% { opacity: 1; }
  100% { opacity: 0.9; }
}


body {
background-image: url('images/purple lolita bg.jpg');
background-attachment: fixed;
background-repeat: repeat;
overflow: auto;
}

.main-box{
 border-width:3px;
  border-style:dashed;
  border-radius: 20px;
  background-color: white;
  margin: auto;
  margin-top: 60px;
  width: 884px;
  height: 500px;
  position: relative;
  padding: 5px;
  z-index: 4;
  animation: float 4s ease-in-out infinite; [22]
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); } /* Moves box up */ [22, 52]
  100% { transform: translateY(0px); } /* Returns to start */ [22]
}

.falling-bats-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Allows users to click through them */
  overflow: hidden;
  z-index: 9999;
}

.bat {
  position: absolute;
  top: -10%;
  font-size: 2rem;
  animation: fall linear infinite;
}

@keyframes fall {
  0% { transform: translateY(0vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0.5; }
}

/* Add random positioning and delays for each bat */
.bat:nth-child(1) { left: 10%; animation-duration: 5s; animation-delay: 1s; }
.bat:nth-child(2) { left: 30%; animation-duration: 8s; animation-delay: 2s; }
.bat:nth-child(3) { left: 70%; animation-duration: 6s; animation-delay: 0s; }
}

.fixed-image {
  position: fixed;
  top: 20px;   /* Distance from the top */
  right: 20px; /* Distance from the right */
  z-index: 100; /* Keeps it above other content */
}

.button1{
   background-color: black;
  border: 2px dashed white;
  border-radius: 20px;
  margin: -100px;
  margin-top: -300px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  cursor: pointer;
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}
.button1:hover {background-color: #ba80b1;}

a:link, a:visited {
  background-color: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}