/* style.css */

:root {
  /* Theme colors */
  --background-gradient-start: #000000;
  --background-gradient-end: #000000;
  --border-color: blue;
  --button-bg: #0003ad;
  --button-hover-bg: #0004ff;
  --exit-button-hover-bg: #FF5C5C;
  --button-shadow-color: rgba(0,0,0,0.8);
  
  /* Neon glow intensity */
  --neon-shadow: 0 0 8px rgba(0,0,0,0.8);
  --neon-shadow-hover: 0 0 12px currentColor, 0 0 24px currentColor, 0 0 48px currentColor;
  
    /* Neon exit glow intensity */
  --exit-shadow: 0 0 8px rgba(0,0,0,0.8);
  --exit-shadow-hover: 0 0 12px red, 0 0 24px red, 0 0 48px red;
  
}

/* Layout styles using variables */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'monospace';
  background: linear-gradient(to bottom, var(--background-gradient-start), var(--background-gradient-end));
  color: black;
  font-size: calc(5px + 0.5vw);
  overflow: hidden;
  position: relative;
  color: white;
}

/* Reusable button styles */
button {
  width: 20%;
  padding: 15px;
  font-size: 1.2rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-shadow: 0 0 5px rgba(0,0,0,0.8);
  box-shadow: var(--neon-shadow);
  transition: background-color 0.3s, box-shadow 0.3s, text-shadow 0.3s;
  color: black;
  background-color: blue;
}
button:hover {
  background-color: var(--button-hover-bg);
  box-shadow: var(--neon-shadow-hover);
  color: black;
}

.exitbutton {
  width: 20%;
  padding: 15px;
  font-size: 1.2rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-shadow: 0 0 5px rgba(0,0,0,0.8);
  box-shadow: var(--neon-shadow);
  transition: background-color 0.3s, box-shadow 0.3s, text-shadow 0.3s;
  color: white;
  background-color: red;
}
.exitbutton:hover {
  background-color: var(--exit-button-hover-bg);
  box-shadow: var(--exit-shadow-hover);
  color: red;
}

      /* Canvas for particles */
    #particle-canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }