@font-face {
  font-family: 'Gypsy';
  src: url('Gypsy.ttf'); /* Replace with the path to your Spooky font file */
}

@font-face {
  font-family: 'ostrich';
  src: url('ostrich.otf'); /* Replace with the path to your ostrich font file */
}

@font-face {
  font-family: 'other';
  src: url('other.ttf'); /* Replace with the path to your other font file */
}

@font-face {
  font-family: 'Cyberverse';
  src: url('Cyberverse.otf'); /* Replace with the path to your type font file */
}

body {
  margin: 0;
  padding: 0;
  background: url('cathedral.gif') no-repeat center center fixed;
  background-size: cover;
}

#cover-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1.5s ease-in-out;
}

#cover-screen.clicked {
  opacity: 0;
  pointer-events: none;
}

#cover-screen h1 {
  font-family: 'spooky', sans-serif;
  letter-spacing: 5px;
  font-size: 4rem;
  color: white;
  text-align: center;
  text-shadow: 0 0 10px white;
  animation: neon-glow 1s ease-in-out infinite alternate;
  line-height: 0.4;
}

@keyframes neon-glow {
from {
text-shadow: 0 0 10px white;
}
to {
text-shadow: 0 0 20px white;
}
}

#website-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#website-content h1 {
font-family: 'Gypsy', sans-serif;
font-size: 8.0rem;
color: white;
text-shadow: 0 0 3px white;
letter-spacing: 6px;
margin: 0; /* Remove the default margin */
line-height: 0.8; /* Set the line-height to 1 to remove extra spacing */
}

#website-content h2 {
  font-family: 'other', sans-serif;
  font-size: 1.7rem;
  letter-spacing: 1.6px;
  color: white;
  text-shadow: 0 0 2px white;
  margin: 0; /* Remove the default margin */
  line-height: 2.3; /* Set the line-height to 1 to remove extra spacing */
  text-align: center; /* Center-align the text */
  white-space: nowrap; /* Prevent line breaks */
  overflow: hidden; /* Hide overflowing text */
}

#website-content h2 span {
  display: inline-block;
  opacity: 0;
  animation: reveal 2s infinite;
}

@keyframes reveal {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  10% {
    opacity: 1;
    transform: translateX(0);
  }
  90% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

#website-content h3 {
font-family: 'Cyberverse', sans-serif;
font-size: 0.8rem;
color: white;
text-shadow: 0 0 2px white;
letter-spacing: 1.5px;
margin: 0; /* Remove the default margin */
line-height: 0.9; /* Set the line-height to 1 to remove extra spacing */
}

@keyframes flicker {
  0%, 80%, 100% {
    opacity: 1;
  }
  30%, 60% {
    opacity: 0.5;
  }
  40%, 50%, 70% {
    opacity: 0.2;
  }
}

#website-content a {
display: inline-block;
margin: 22px;
}

#website-content img {
width: 25px;
height: 19px;
}

@media (max-width: 1920px) {
#website-content h1 {
font-size: 6.5rem;
}
#website-content h2 {
font-size: 1.3rem;
}
#website-content img {
width: 25px;
height: 19px;
}
}