/* 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." */
/* style.css - black to grey radial gradient + snow overlay */

body {
  margin: 0;
  font-family: 'Comic Sans MS', 'Courier New', monospace;
  color: #e0e0e0;
  min-height: 100vh;
  
  /* Black to dark grey RADIAL gradient (circular, from center) */
  background: radial-gradient(circle at center, #2a2a2a, #111111, #000000);
  
  /* Fallback for older browsers */
  background-color: #000000;
}

/* If you want the gradient to be static (no animation), remove the animation below */
/* Optional: very slow breathing effect for the gradient (subtle) */
@keyframes breathe {
  0% { background-size: 100% 100%; }
  50% { background-size: 120% 120%; }
  100% { background-size: 100% 100%; }
}

/* Uncomment the line below if you want a subtle "breathing" animation */
/* body { animation: breathe 20s ease-in-out infinite; } */

/* style.css - Your existing gradient + new snow container */

body {
  margin: 0;
  font-family: 'Comic Sans MS', 'Courier New', monospace;
  color: #e0e0e0;
  min-height: 100vh;
  
  /* Your original Black to dark grey RADIAL gradient */
  background: radial-gradient(circle at center, #2a2a2a, #111111, #000000);
  background-color: #000000;
}

/* New: Container for the JavaScript snowflakes */
#snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* This is crucial! It lets you click through the snow */
  z-index: 100; /* Ensures snow sits above your content */
}

/* Your existing content styles */
body > *:not(#snow-container) {
  position: relative;
  z-index: 2;
}

/* Your other styles (links, text-shadow, etc.) remain exactly the same */
a {
  color: #aaaaaa;
  text-decoration: none;
  transition: 0.2s;
}
a:hover {
  color: #cccccc;
  text-decoration: underline;
}
p, h1, h2, h3, .project-title, .project-desc {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}



/* notfound.html
body {
  background-color: #000000;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e0e0e0;
}

/* Grenze Gotisch only on the 404 number for impact */
.error-code {
  font-family: 'Grenze Gotisch', 'Times New Roman', serif;
  font-size: 96px;
  font-weight: 700;
  letter-spacing: 4px;
  margin-bottom: 16px;
  color: #e0e0e0;
  opacity: 0.8;
}