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

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

/* Body + background vibe */
body {
  background: #e8e0f7; /* soft pastel lavender / y2k feel */
  font-family: "Verdana", sans-serif;
  color: #333;
  line-height: 1.4;
}

#container {
  width: 900px;
  margin: 40px auto;
  background: #fff;
  border: 2px solid #000;
  padding: 20px;
}

/* Header */
header {
  text-align: center;
  margin-bottom: 30px;
}

h1 {
  font-size: 3rem;
  font-family: "Comic Sans MS", cursive, sans-serif;
  color: #6a1b9a;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}

.subtitle {
  font-size: 1.2rem;
  color: #5e35b1;
  margin-top: 8px;
}

/* Navigation */
nav ul {
  list-style-type: none;
  margin-top: 20px;
}

nav ul li {
  display: inline-block;
  margin: 0 12px;
}

nav ul li a {
  text-decoration: none;
  color: #4a148c;
  font-weight: bold;
  padding: 4px 8px;
  border: 1px solid #4a148c;
  border-radius: 4px;
}

nav ul li a:hover {
  background: #4a148c;
  color: #fff;
}

/* Content boxes (profile-style) */
.box {
  border: 2px dashed #8e24aa;
  padding: 15px;
  margin-bottom: 30px;
  background: #f3e5f5;
}

/* Listography lists */
.listography {
  list-style-type: circle;
  margin-left: 20px;
}

.listography li {
  margin-bottom: 10px;
}

/* Links list */
.links-list {
  list-style-type: square;
  margin-left: 20px;
}

.links-list li {
  margin-bottom: 8px;
}

.links-list a {
  text-decoration: none;
  color: #283593;
}

.links-list a:hover {
  text-decoration: underline;
}

/* Guestbook iframe fallback styling */
iframe {
  border: 1px solid #8e24aa;
  background: #fff;
}

/* Footer */
footer {
  text-align: center;
  margin-top: 40px;
  font-size: 0.9rem;
  color: #6a1b9a;
}

/* Optional: blinkie / gif accent */
header::after {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background: url("blinkie.gif") no-repeat center center;
  margin: 20px auto 0 auto;
}