/* 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 {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #111; /* Slightly darker than black */
  color: #eee;
  overflow: hidden; /* Hide scrollbars, starfield fills the viewport */
}

header {
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent header */
  padding: 1em;
  text-align: center;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  display: inline;
  margin: 0 1em;
}

nav a {
  color: #eee;
  text-decoration: none;
}

main {
  padding: 2em;
  text-align: center;
}

footer {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 1em;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
}

/* Starfield specific styles - moved from starfield.css for consolidation */
.starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: translateZ(-1px);
}

.star-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.star {
  position: absolute;
  background-color: #fff;
  opacity: 0.5;
  animation: twinkle 2s linear infinite;
  will-change: transform;
  transform: translateZ(0);
}

@keyframes twinkle {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

/* About Page Styles */
.about-page {
  background: linear-gradient(to bottom, #f0f8ff, #e6e6fa); /* Pastel blue/lavender gradient */
  padding: 4em;
  text-align: justify;
  font-size: 1.1em;
  line-height: 1.6;
  color: #333;
  position: relative; /* For cloud layers */
}

.cloud {
  position: absolute;
  width: 200px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: drift 10s linear infinite;
}

.cloud:nth-child(1) {
  top: 10%;
  left: 5%;
  animation-delay: 2s;
}

.cloud:nth-child(2) {
  top: 30%;
  right: 10%;
  animation-delay: 5s;
}

.cloud:nth-child(3) {
  bottom: 15%;
  left: 20%;
  animation-delay: 1s;
}

@keyframes drift {
  0% { transform: translateX(-100px); }
  100% { transform: translateX(100px); }
}

.about-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ddd;
  margin: 20px auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  filter: blur(2px); /* Subtle blur */
}

/** About Page Styles - 2000s Edition 
.about-page {
  background: url("your-tile-texture.gif") repeat; /* Replace with a tiled texture 
  padding: 2em;
  text-align: justify;
  font-size: 1em;
  line-height: 1.4;
  color: #000;
}

h1 {
  font-family: "Comic Sans MS", cursive, sans-serif;
  color: #ff00ff; /* Hot Pink 
  text-decoration: underline;
  text-align: center;
}

.about-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #008000; /* Green 
  margin: 10px auto;
  box-shadow: 2px 2px 4px #ccc;
}

/* Table Layout */
.about-table {
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse;
}

.about-table td {
  padding: 10px;
  border: 1px solid #ccc;
  vertical-align: top;
}

/* Animated GIF (add to the HTML - see below) 
.animated-gif {
  display: inline-block;
  width: 50px;
  height: 50px;
}

/* Subtle Blink Effect (optional - use sparingly) 
.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% { opacity: 0; }
} */