@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto:wght@300;400;700&display=swap');

:root {
  /* Synthwave Colors */
  --background-top: #2b213a;
  --background-bottom: #110022;
  
  --primary-color: #ff00ff; /* Neon Pink */
  --secondary-color: #00ffff; /* Cyan */
  --tertiary-color: #ffe600; /* Yellow */
  
  --text-color: #ffffff;
  --muted-color: #bfaec9;
  
  --heading-font: "Press Start 2P", cursive;
  --body-font: "Roboto", sans-serif;
  
  --base-font-size: 32px;
  --text-size: 18pt;
  --h1-size: 32pt; /* Smaller because pixel font is wide */
  --h2-size: 24pt;
  --h3-size: 18pt;
  
  --box-bg: rgba(43, 33, 58, 0.8);
  --box-border: #ff00ff;
  
  --neon-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff;
  --cyan-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff;
}

body, .reveal-viewport {
  background: linear-gradient(to bottom, var(--background-top) 0%, var(--background-bottom) 100%);
  min-height: 100vh;
}

/* Grid Floor Effect */
body::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30vh;
  background: 
    linear-gradient(rgba(255, 0, 255, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 0, 255, 0.3) 1px, transparent 1px);
  background-size: 40px 40px; /* Grid size */
  background-position: center bottom;
  transform: perspective(500px) rotateX(60deg); /* 3D effect */
  transform-origin: bottom center;
  z-index: -1;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, black);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black);
}

/* Sun Graphic */
.reveal::before {
  content: "";
  position: fixed;
  bottom: 20vh;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: linear-gradient(to top, #ff00ff, #ffe600);
  z-index: -2;
  box-shadow: 0 0 50px rgba(255, 0, 255, 0.5);
  mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 45%, transparent 50%, black 50%, black 55%, transparent 55%, transparent 60%, black 60%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 45%, transparent 50%, black 50%, black 55%, transparent 55%, transparent 60%, black 60%);
}

.reveal {
  font-family: var(--body-font);
  color: var(--text-color);
}

.reveal h1, .reveal h2, .reveal h3 {
  font-family: var(--heading-font);
  color: var(--primary-color);
  text-transform: uppercase;
  text-shadow: 3px 3px 0px #00ffff;
  line-height: 1.4;
}

.reveal h1 { 
  background: -webkit-linear-gradient(#ffe600, #ff00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 5px rgba(255,0,255,0.8));
}

.reveal p, .reveal li {
  font-size: var(--text-size);
  color: var(--text-color);
  text-shadow: 0 0 2px rgba(0, 255, 255, 0.5);
}

.box {
  background: rgba(17, 0, 34, 0.7);
  border: 2px solid var(--secondary-color);
  box-shadow: 0 0 10px var(--secondary-color), inset 0 0 10px rgba(0, 255, 255, 0.2);
  border-radius: 10px;
  padding: 20px;
}

.callout {
  border-left: 8px solid var(--tertiary-color);
  background: rgba(255, 230, 0, 0.1);
  box-shadow: -5px 0 10px rgba(255, 230, 0, 0.2);
  padding: 15px;
  border-radius: 0 10px 10px 0;
}

code {
  font-family: "Press Start 2P", cursive !important;
  font-size: 0.7em;
  color: var(--tertiary-color);
}

/* Mermaid diagrams */
.mermaid { width: 100%; }
.mermaid svg { max-width: 100%; height: auto; }