/* 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." */

body {
  background-color: purple;
  color: pink;
  font-family: Verdana;
}
/* ==========================
   🎶 Early 2000s Theme
   Drop into style.css on Neocities
   ========================== */

/* ---- Easy Customization ---- */
:root {
  --bg-color: #000033;      /* dark starry background */
  --text-color: #ffffff;    /* default text color */
  --link-color: #00ccff;    /* neon blue links */
  --link-hover: #ff66ff;    /* hover color */
  --heading-color: #ffcc00; /* bright yellow headings */
  --content-bg: rgba(0, 0, 0, 0.6); /* semi-transparent box */
  --border-color: #33ff33;  /* neon green borders */
  --font-main: "Comic Sans MS", "Trebuchet MS", cursive, sans-serif;
  --font-size: 16px;
  --max-width: 800px;
}

/* ---- Reset-ish ---- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ---- Background ---- */
body {
  background: var(--bg-color) url("https://www.transparenttextures.com/patterns/stars.png") repeat;
  color: var(--text-color);
  font-family: var(--font-main);
  font-size: var(--font-size);
  line-height: 1.6;
  text-align: center;
}

/* ---- Headings ---- */
h1, h2, h3 {
  color: var(--heading-color);
  text-shadow: 2px 2px 5px #000000;
  margin: 20px 0 10px;
}

/* ---- Links ---- */
a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline overline;
}

/* ---- Content Box ---- */
.container {
  max-width: var(--max-width);
  margin: 30px auto;
  padding: 20px;
  background: var(--content-bg);
  border: 3px double var(--border-color);
  border-radius: 12px;
  box-shadow: 0 0 20px var(--border-color);
  text-align: left;
}

/* ---- Images ---- */
img {
  max-width: 100%;
  border: 2px solid var(--border-color);
  box-shadow: 0 0 15px #000000;
}

/* ---- Navigation Bar ---- */
nav {
  margin: 15px 0;
}
nav a {
  display: inline-block;
  padding: 8px 15px;
  margin: 3px;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  background: linear-gradient(180deg, #111111, #333333);
}
nav a:hover {
  background: linear-gradient(180deg, #222222, #444444);
  color: var(--link-hover);
}

/* ---- Footer ---- */
footer {
  margin: 40px 0 20px;
  font-size: 0.9em;
  opacity: 0.8;
}

/* ---- Fun Blink Effect (optional 2000s vibe!) ---- */
.blink {
  animation: blink 1s step-start infinite;
}
@keyframes blink {
  50% { visibility: hidden; }
}