/* 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: #739694;
  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-grid {
    background-color: #0a0a0a;
  display: flex;
  justify-content: center; /* Centers content horizontally */
  align-items: center;
/* Centers content vertically */
  height: 100%;/* 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 */
}
}


@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: 0;
  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: 4;
  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 3px rgba(255,0,80,0.3), 0 0 6px; 
  }



<style>
    /* Default state for the unvisited and visited link */
    #myUniqueLink:link, #myUniqueLink:unvisited {
        color: #739694; /* Change the color for the unvisited/visited link */
        
    }
    
    #myUniqueLink:link, #myUniqueLink:visited {
        color: #0a0a0a; /* Change the color for the unvisited/visited link */
        text-decoration: none; /* Remove underline */
    }

    /* State when the user hovers over the link */
    #myUniqueLink:hover {
        color: red; /* Change color on hover */
        text-decoration: underline; /* Add underline on hover */
    }

    /* State when the link is active (being clicked) */
    #myUniqueLink:active {
        color: yellow; /* Change color when active */
    }
</style>


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