/* theme.css */

/* 1. Global Variables */
:root {
  /* Colors */
  --bg-sky-bottom: #87ceeb;
  --bg-sky-top: #b0e0e6;
  --glass-dark: rgba(40, 40, 40, 0.4);
  --glass-med: rgba(40, 40, 40, 0.2);
  --glass-light: rgba(255, 255, 255, 0.4);
  
  /* UI Accents */
  --accent-red: darkred;
  --accent-yellow: palegoldenrod;
  --border-light: #ccc;
  
  /* Typography */
  --text-main: whitesmoke;
  --text-light: white;
  --text-dim: lightgray;
  --text-hover: red;
  
  /* Effects */
  --blur-heavy: blur(15px) saturate(180%);
  --blur-light: blur(5px) saturate(180%);
  --shadow-soft: 0 2px 6px rgba(0,0,0,0.1);
  --shadow-medium: 0 2px 6px rgba(0,0,0, 0.5);
}

/* 2. Global Resets & Base Structure */
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a1a 0%, #3a1111 100%);
  /* background: linear-gradient(to top, var(--bg-sky-bottom), var(--bg-sky-top)); */
  font-family: sans-serif; /* A fallback clean font */
}

#content {
  position: relative;
  z-index: 1;
}

/* Plane Emojis Base Font Size */
.plane {
  font-size: 2rem;
}