/* BODY */
body {
  margin: 0;
  padding: 20px;
  font-family: 'Press Start 2P', monospace;
  background: #330022; /* Deep purple background */
  color: white;
  display: flex;
  justify-content: center;
}

/* CONTAINER */
.container {
  width: 95%;
  max-width: 1200px;
  background: #2e2e70; /* darknlue w purple tint*/
  border: 10px double  #ff3399; /* matching background */
  box-shadow: 0 0 15px #ff5733; /* Red-orange glow */
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* HEADER */
.header {
  background: #ffcc00; /* Yellow background */
  color: #000;
  border: 5px solid #ff5733; /* Red-orange border */
  padding: 15px;
  text-align: center;
  box-shadow: inset 0 0 10px #ff5733;
}

/* MAIN LAYOUT */
.main-layout {
  display: flex;
  gap: 20px;
}

/* SIDE NAV */
.side-nav {
  width: 220px;
  background: #14143d;
  border: 5px solid #ff5733; /* Red-orange border */
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: inset 0 0 10px #ff5733;
}

.nav-btn {
  background: #ff5733; /* Red-orange background */
  color: white;
  border: 3px solid #ffcc00; /* Yellow border */
  padding: 12px;
  cursor: pointer;
  font-size: 0.8em;
  transition: 0.2s;
}

.nav-btn:hover {
  background: #ff784e;
  border-color: #ff5733;
  animation: shake 0.3s;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

/* SCREEN AREA */


/* CONTENT BOX INSIDE SCREEN */
.screen-content {
  background: #1a1aff; /* Deep purple background */
  border: 3px dashed #ffcc00; /* Yellow dashed border */
  padding: 50px;
  width: 800%;
  max-width: 800px;
  text-align: center;
  box-shadow: 0 0 10px #ff5733; /* Red-orange glow */
  top: 100px;}

.footer {
  background: #ffcc00; /* Yellow background */
  color: #000;
  border: 5px solid #ff5733; /* Red-orange border */
  padding: 15px;
  text-align: center;
  font-weight: bold;
  box-shadow: inset 0 0 10px #ff5733;
  animation: pulse 2s infinite; /* Apply pulsing animation */
}

/* Define the pulse animation */
@keyframes pulse {
  0% {
    box-shadow: inset 0 0 10px #ff5733;
  }
  50% {
    box-shadow: inset 0 0 25px #ff5733;
  }
  100% {
    box-shadow: inset 0 0 10px #ff5733;
  }
}
 .blink {
  animation: textPulse 2s infinite;
}

@keyframes textPulse {
  0%,100% { color: #000; }
  50% { color: #ff5733; }
} 

@keyframes blink {
  0%,50%,100% { opacity: 1; }
  25%,75% { opacity: 0; }
}