body {
margin: 0;
padding: 0;
background-color: black;
color: #e8ba04;
font-family: "Press Start 2P", system-ui;
font-weight: 200;
font-size: 9px;
font-style: normal;
line-height: 1.5;
height: 100%;
width: 100%;
}

mark {
background-color: #1c1919;
color: #e8ba04;
padding: 4px 4px;
}

a {
color: #e8ba04  
}

body::before {
  mix-blend-mode: multiply;
  content: ""; /* Required for pseudo-elements */
  position: fixed; /* Keep the overlay covering the viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background-color: #cbe522 !important;
  z-index: 9999; /* Ensure it stays on top of other content */
  pointer-events: none; /* Allows mouse events to pass through */
}

body::after {
  mix-blend-mode: overlay;
  content: ""; /* Required for pseudo-elements */
  position: fixed; /* Keep the overlay covering the viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://i.postimg.cc/LXJ8mQQs/tv.jpg');
  background-color: #ddd713;
  z-index: 9999; /* Ensure it stays on top of other content */
  pointer-events: none; /* Allows mouse events to pass through */
}

.header {
border: 1px dashed black;
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important;
margin-top: 10px !important;
margin: auto;
flex-wrap: wrap;
text-align: left;
box-sizing: border-box;
justify-content: left;
align-content: center;
display: flex;
background-image: url('https://i.postimg.cc/FRwjLq14/Untitled313-20250917222737.png') !important;
background-size:100%;
background-repeat: space;
background-position: left;
width: 1100px;
height: 200px;
}

.card {
z-index: 10;
text-shadow: 
0 0 7px #ffa200,
0 0 10px #c6560f;
text-align: center;
justify-content: center;
align-content: center;
margin-top: -780px;
margin-right: 420px;
float: right;
background-color: black;
width: 230px;
height: 300px;
}

.infobox {
text-shadow:
0 0 3px #ffa200,
0 0 7px #ffa200, 
0 0 10px #c6560f,
0 0 15px #c6560f;
border: 1px dashed #261D16;
overflow: scroll;
justify-content: center;
align-content: center;
text-align: center;
margin-right: 680px;
margin-top: -780px;
float: right;
width: 600px;
height: 400px;
border-radius: 10px;
background-color: black;
}

.navtitle {
float: left; 
height: 100px;
width: 200px;
margin-right: 82%;
display: flex;
margin-top: 5px;
margin-bottom: -100%;
}

.bottom {
font-family: "Workbench", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 20px;
border: 1px dashed #261D16;
margin-right: 680px;
margin-left: -300px !important;
margin-top: -365px;
overflow: hidden;
justify-content: right;
align-content: center;
text-align: center;
float: right;
width: 600px;
height: 350px;
border-radius: 10px;
background-image: url('grid2.png') !important;
background-color: black;
}

.extra {
text-shadow: 
0 0 7px #c6560f,
0 0 10px #c6560f;
border: 2px solid black;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
background-color: #0a0909;
overflow: scroll;
float: right; 
height: 458px;
width: 225px;
margin-right: 420px;
margin-top: -25%;
}

.navheader {
float: left; 
height: 100px;
width: 200px;
margin-right: 91.1%;
margin-top: 40%;
}

button {
margin-left: 5px;
border: 2px solid #1c1919;
border-radius: 3px;
box-shadow:
inset 2px 2px 5px black, /* Top-left highlight */
inset -2px -2px 5px black;   /* Bottom-right shadow */
padding: 10px;
width: 190px;
background-color: #1c1919;
color: #e8ba04;
font-family: "Press Start 2P", system-ui;
font-weight: 200;
font-size: 9px;
font-style: normal;
text-shadow: 
0 0 7px #c6560f,
0 0 10px #c6560f;
}


.nav {
border-bottom-right-radius: 5px;
overflow: visible !important;
margin-top: 3px;
margin-left: -22px;
margin-right: 70px;
margin-bottom: -70px;
float: left !important;
margin-right: 80%;
text-align: left;
justify-content: left;
align-content: left;
background-color: black !important;
width: 200px;
height: 700px;
}

.middle {
box-shadow: 0 0 20px 5px rgba(255, 144, 0, 0.1);
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border: 1px solid #e8ba04;
overflow: hidden;
margin-top: 5px !important;
margin: auto;
flex-wrap: wrap;
box-sizing: border-box;
text-align: center;
justify-content: center;
align-content: center;
display: flex;
background-color: #1c1919 !important;
width: 1100px;
height: 800px;
}

.flickering-text {
  animation: flicker 1.5s infinite alternate; /* Apply the animation */
}

@keyframes flicker {
  0%, 5%, 15%, 20%, 25%, 50%, 56%, 100% {
    opacity: 1;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  }
  20%, 24%, 55% {
    opacity: 0.7;
    text-shadow: none;
  }
  22% {
    opacity: 0.5;
    text-shadow: none;
  }
}

.log {
color: #e8ba04;
font-family: "Press Start 2P", system-ui;
font-weight: 200;
font-size: 9px;
font-style: normal;
text-shadow: 
0 0 7px #c6560f,
0 0 10px #c6560f;
}

.yello {
text-align: center;
justify-content: center;
align-content: center;
text-shadow: 
0 0 7px #00000000,
0 0 10px #00000000;
color: #e8ba04;
padding: 4px 200px;
}

.none {
text-shadow: 
0 0 7px #00000000,
0 0 10px #00000000;
margin-bottom: 100px !important;
color: #00000000;
}

.glow {
margin-top: -100px !important;
text-shadow:
0 0 3px #ffa200,
0 0 7px #ffa200, 
0 0 10px #c6560f,
0 0 15px #c6560f; 
}

.credits {
color: #1c1919;
}
    .bob {
       animation: choppy-bob 2s steps(4, end) infinite alternate;
    }
@keyframes choppy-bob {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-10px); /* Up position */
  }
  50% {
    transform: translateY(5);
  }
  75% {
    transform: translateY(-10px); /* Slightly lower up position */
  }
  100% {
    transform: translateY(0);
  }
}