/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


  /* Add a black background color to the top navigation */
.topnav {
  border: 10px groove #BC13FE; /* Red border around the navigation bar */
    padding: 30px;          
    padding-top: 0px;/* Adds space inside the navbar */
    margin-bottom: 10px;       /* Adds space below the navbar */
    background-color: #0a0a0a; /* Optional background color */
  background-color: #0a0a0a; /* Dark background */
  overflow: visible; /* Clear floats */
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left; /* Float links to the left to arrange them horizontally */
  color: #f2f2f2; /* White text color */
  text-align: center; /* Center the text */
  padding: 6px 12px; /* Add some padding */
  text-decoration: underline; /* Remove underlines from links */
  font-size: 13px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #0a0a0a; /* Light background on hover */
  color: black; /* Black text on hover */
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #BC13FE; /* Green background for the active link */
  color: black;
}







body {
  

  background-color: black;
  color: #363636;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  padding-bottom: 50px;
  }
  .container {
    background-color: #0a0a0a;
  display: flex;
  justify-content: center; /* Centers content horizontally */
  align-items: center;
/* Centers content vertically */
  height: 75%;/* Set a height for the container to see vertical centering */
  border: 10px groove #BC13FE;  
    border-spacing: 500px;/* Adds a box/border around the content area */
}

.content-box {
  height: 95%;
  padding: 10px;           /* Add some internal spacing */
  background-color: #0a0a0a /* Optional: adds background color for visibility */
}
 
  .bottom-nav {
  background-color: #0a0a0a; /* Dark background color */
  overflow: hidden; /* Hide overflow */
  position: static; /* Fix the position relative to the viewport */
  bottom: 0; /* Place it at the bottom */
  width: 100%; /* Full width */
  display: flex; /* Use flexbox for easy alignment of links */
  justify-content: space-around; /* Distribute links evenly */
  height: 50px; /* Set a specific height */
}

.bottom-nav a {
  float: left; /* Use float for older browsers, flexbox handles layout */
  display: block; /* Make links block elements */
  color: #222222; /* Light text color */
  text-align: center; /* Center the text */
  padding: 14px 16px; /* Add some padding */
  text-decoration: none; /* Remove underlines from links */
  font-size: 17px; /* Set font size */
}

.bottom-nav a:hover {
  background-color: #0a0a0a; /* Change background on hover */
  color: #0a0a0a; /* Change text color on hover */
}


.splash {
    position: fixed; /* Fixed position ensures it covers the entire screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* 100% of the viewport height */
    background-color: black; /* Choose your background color */
    z-index: 10; /* High z-index to be on top */
    display: flex; /* Centers the content inside the splash screen */
    align-items: center;
    justify-content: center;
    transition: opacity 1s ease-out; /* Add a smooth transition effect */
}

/* Class to be added by JavaScript to hide the splash screen */
.display-none {
    display: none;
}

/* Optional: Style for the main content to avoid a black screen while loading */
.main-content {
    display: none; /* Initially hide the main content */
    padding: 10px;
}
}


  

@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}
@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}
.crt::after {
  content: " ";
  display: box;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background: rgba(18, 16, 16, 0.1);
  opacity: 1;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;  opacity: 0.24387;
}
.crt::before {
  content: " ";
  display: box;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
.crt {
  animation: textShadow .15s infinite;  text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }




/* Add .crt::after with animation: flicker 0.15s infinite; for effect */