/*
 * *** WELCOME TO MY HOMEPAGE! ***
 * This CSS file has been updated to give your site that authentic,
 * late 90s / early 2000s middle-school GeoCities/Angelfire look!
 * Expect bright colors, bad fonts, and lots of unnecessary visual flair.
 */

/* --- GENERAL BODY STYLES (Blinding Background and Funky Font) --- */
body {
  /* Blind the visitor immediately with a neon color */
  background-color: #99FF99; /* Bright Lime Green */
  color: #000080; /* Navy Blue text for high contrast */

  /* The official font of amateur web design! */
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: 16px;
  margin: 0;
  padding: 10px;
}

/* Add a custom scrollbar for that classic Windows 98 feel (though this is modern CSS) */
/* ::-webkit-scrollbar { display: none; } */


/* --- HEADINGS (BIG, BOLD, and CENTERED!) --- */
h1 {
  color: #FF0000; /* Bright Red */
  text-align: center;
  font-size: 48px;
  font-weight: 900;
  text-shadow: 2px 2px 0px #000080; /* A crude, thick 'glow' effect */
  padding: 10px;
  border: 5px dashed #FF6600; /* Orange dashed border */
  background-color: #FFFFCC; /* Pale yellow background for the title block */
}

h2 {
  color: #008080; /* Teal/Cyan */
  text-decoration: underline overline;
  text-align: left;
  font-style: italic;
  font-size: 28px;
  margin-top: 30px;
  border-bottom: 2px solid #008080;
}


/* --- LINK STYLES (Must be obnoxious and clearly different) --- */
a:link {
  color: #0000FF; /* Bright Blue */
  text-decoration: underline;
  font-weight: bold;
}

a:visited {
  color: #800080; /* Vile Purple */
  text-decoration: none; /* Make visited links lose the underline for extra inconsistency */
}

a:hover {
  color: #FF00FF; /* Hot Pink on hover */
  background-color: #00FFFF; /* Aqua background on hover */
  cursor: help; /* Change cursor for no real reason */
}


/* --- THE ARTIFACT BOX (For guestbooks, web rings, or hit counters) --- */
.artifact-box {
  width: 90%;
  max-width: 600px; /* Keep it narrow, wide screens weren't the norm */
  margin: 20px auto; /* Center it poorly */
  padding: 15px;
  background-color: #F0F0F0; /* Default gray background */
  border: 8px groove #C0C0C0; /* Classic 3D recessed look */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Heavy drop shadow */
}

/* --- THE ESSENTIAL ANIMATION STYLES (BLINKING TEXT) --- */

/* Keyframes for the infamous blink effect */
@keyframes blink {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

/* Class to apply the blink effect (use on <p>, <span>, or <h1>) */
.blink {
  color: #FFD700; /* Gold/Yellow */
  font-weight: bold;
  /* Use "forwards" to keep it blinking indefinitely */
  animation: blink 0.5s step-start infinite;
}

/* Optional: Styles for a 'New!' GIF placeholder */
.new-tag {
  color: #FF0000;
  background-color: #FFFF00;
  font-weight: bold;
  padding: 2px 5px;
  border: 1px solid black;
  margin-left: 10px;
}

/* --- FOOTER STYLES --- */
footer {
  margin-top: 40px;
  padding: 10px;
  text-align: center;
  border-top: 1px solid #000080;
  font-size: 10px;
  color: #333333;
}