/* ---- PIXEL THREADS - CUTE PASTEL DARK THEME ---- */

/* Import a pixel font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ---- BASIC SETUP ---- */
body {
  /* A dark, soft purple background instead of harsh grey */
  background-color: #2c2a3e; 
  /* A soft, off-white/lavender text color */
  color: #f0e8f4;           
  /* A clean, readable font for paragraphs */
  font-family: 'Verdana', sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 900px;
  margin: 20px auto;
  padding: 0 20px;
}

/* ---- HEADER AND NAVIGATION ---- */
header h1 {
  /* Use the pixel font for the main title! */
  font-family: 'Press Start 2P', cursive;
  /* A cute pastel pink for the title */
  color: #f4c2c2; 
  text-align: center;
  font-size: 2.2em; /* Slightly smaller to fit the chunky font */
  margin-bottom: 20px;
  /* A subtle shadow to make the text pop like in a video game */
  text-shadow: 3px 3px 0px #1a1924;
}

nav {
  /* A slightly lighter shade for the nav background */
  background-color: #3e3b56; 
  /* Remove rounded corners for a blocky, pixel look */
  border-radius: 0;
  padding: 15px 0;
  text-align: center;
  margin-bottom: 30px;
  /* A sharp, pixel-style shadow */
  box-shadow: 4px 4px 0px #1a1924;
}

nav a {
  color: #f0e8f4;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 15px;
  margin: 0 5px;
  border-radius: 0; /* No rounded corners */
  transition: all 0.2s ease-in-out; /* Smooth transition for everything */
}

nav a:hover {
  background-color: #f4c2c2; /* Highlight with pastel pink */
  color: #2c2a3e; /* Make text dark for contrast */
  /* Make the button look like it's being pressed! */
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* ---- GENERAL CONTENT STYLING ---- */
h2 {
  font-family: 'Press Start 2P', cursive;
  font-size: 1.5em;
  /* A nice pastel teal/mint for subheadings */
  color: #a7d8de;
  /* A dotted border looks more pixelated than a solid one */
  border-bottom: 3px dotted #5a567d;
  padding-bottom: 10px;
}

h3 {
  color: #f0e8f4;
}

a {
  color: #a7d8de; /* Links match the h2 color */
  font-weight: bold;
}

a:hover {
  color: #f4c2c2; /* Links turn pink on hover */
  text-decoration: none;
}

/* For images and videos, make them blocky too */
img, iframe, video {
  max-width: 100%;
  height: auto;
  border-radius: 0; /* No rounded corners */
  border: 3px solid #3e3b56;
  /* This ensures that if you upload pixel art, it stays sharp! */
  image-rendering: pixelated;
}

/* For code blocks in tutorials */
code {
  background-color: #3e3b56;
  padding: 3px 6px;
  border-radius: 0;
  font-family: 'Courier New', Courier, monospace;
  color: #f4c2c2;
}

/* Make lists have cute pixel-style bullets */
ul {
  list-style-type: square;
}

/* ---- FOOTER ---- */
footer {
  text-align: center;
  margin-top: 40px;
  padding: 20px;
  color: #8b85a3;
  border-top: 2px dashed #3e3b56; /* Dashed border for footer */
}
/* ---- NAVIGATION DROPDOWN ---- */

/* The container for the dropdown */
.dropdown {
  position: relative;
  display: inline-block; /* Allows it to sit next to other nav items */
}

/* The content of the dropdown menu (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #3e3b56;
  min-width: 240px; /* Was 200px, now 240px to prevent text wrapping */
  box-shadow: 4px 4px 0px #1a1924;
  z-index: 1;
}

/* The links inside the dropdown */
.dropdown-content a {
  color: #f0e8f4;
  padding: 12px 16px;
  text-decoration: none;
  display: block; /* Makes the whole area clickable */
  text-align: left;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #f4c2c2;
  color: #2c2a3e;
}

/* Show the dropdown menu when hovering over the dropdown container */
.dropdown:hover .dropdown-content {
  display: block;
}
/* ---- TUTORIAL CALLOUT BOXES ---- */

/* A box for critical warnings (like TOS) */
.warning-box {
  background-color: #3e3b56; /* Slightly lighter background */
  border-left: 5px solid #f4c2c2; /* Pastel pink accent border */
  padding: 15px;
  margin: 20px 0;
  box-shadow: 4px 4px 0px #1a1924; /* Consistent shadow */
}

.warning-box h4 {
  margin-top: 0;
  color: #f4c2c2; /* Pink title */
  font-family: 'Press Start 2P', cursive;
  font-size: 1em;
}

/* A box for the example message */
blockquote {
  background-color: #2c2a3e;
  border-left: 5px solid #a7d8de; /* Pastel teal accent border */
  padding: 15px;
  margin: 20px 0;
  font-style: italic;
  color: #c7c1d6; /* Slightly muted text */
}
/* A box for helpful tips and info */
.tip-box {
  background-color: #3e3b56; /* Slightly lighter background */
  border-left: 5px solid #a7d8de; /* Pastel teal accent border */
  padding: 15px;
  margin: 20px 0;
  box-shadow: 4px 4px 0px #1a1924; /* Consistent shadow */
}

.tip-box h4 {
  margin-top: 0;
  color: #a7d8de; /* Teal title */
  font-family: 'Press Start 2P', cursive;
  font-size: 1em;
}