/* =============================
   Custom header font (Fontspring-style)
   ============================= */
@font-face {
  font-family: "SiteHeader";
  src: url("fonts/Gento-Dream/GentoDream.eot");
  src: url("fonts/Gento-Dream/GentoDream.eot?#iefix") format("embedded-opentype"),
       url("fonts/Gento-Dream/GentoDream.woff2") format("woff2"),
       url("fonts/Gento-Dream/GentoDream.woff") format("woff"),
       url("fonts/Gento-Dream/GentoDream.ttf") format("truetype"),
       url("fonts/Gento-Dream/GentoDream.svg#SiteHeader") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* =============================
   Global theme
   ============================= */
html, body { height: 100%; }

body {
  margin: 0;
  color: #ffffff;
  background: #000000 url("/gifs/outerspacebackground.gif") repeat fixed;
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
}

a:link,
a:visited { color: #9ad0ff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* =============================
   Core sections / typography
   ============================= */
.centered { text-align: center; padding: 2rem 1rem; }
.next { padding: 1rem; }

h1 {
  margin: 0 0 1rem;
  font-family: "SiteHeader", "Courier New", monospace;
  font-size: 42px;
  letter-spacing: 0.5px;
  color: cyan;
  
  
}

/* Blog post titles */
blog-post-title {
  font-family: "GentoDream", serif;
  font-size: 32px;
  color: cyan;
  margin: 1rem 0;
}

/* GIF above blog title */
.blog-gif img {
  display: block;
  margin: 0 auto 1rem;  /* centers + space below */
  max-width: 400px;     /* size control; adjust as you like */
  height: auto;
}


/* =============================
   Intro (photo + bio) centered block
   with a sidebar docked to its left
   ============================= */

/* Wraps the intro and establishes a positioning context */
.intro-wrap {
  position: relative;
  max-width: 60ch;     /* controls bio line length */
  margin: 0 auto;      /* centers the whole intro block */
}

/* Sidebar “floats” to the left of the centered intro block */
.intro-wrap .sidebar {
  position: absolute;
  right: 100%;         /* place immediately to the left of intro-wrap */
  margin-right: 16px;  /* gap between sidebar and intro */
  width: 250px;
  padding: 1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
}

.sidebar h2 {
  margin-top: 0;
  font-size: 20px;
  color: cyan;
}

.post-list a {
  display: block;
  margin-bottom: .5rem;
  color: #9ad0ff;
  text-decoration: none;
}
.post-list a:hover { text-decoration: underline; }

/* The intro content itself (centered inside the wrap) */
.intro { text-align: center; }

.intro img {
  width: 320px;        /* adjust to taste */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 1rem;
}

.intro p {
  max-width: 60ch;
  margin: 0.5rem auto 1.25rem;
  text-align: center;
}

/* =============================
   Music section
   ============================= */
.music-line {
  margin: 1rem 0 0.5rem;
  display: inline-block;
}
.music-line img { vertical-align: middle; }

.music-button img {
  display: block;
  margin: 0.5rem auto 1.5rem;
  height: auto;
  max-width: 90vw;
}

/* =============================
   (Optional) generic two-column layout
   for other pages that still use it
   ============================= */
.layout {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.content { flex: 1; padding: 1rem; }

/* =============================
   “Coming next” list spacing
   ============================= */
.next p { margin: 0 0 0.5rem; }
.next ul { margin: 0.25rem 0 1.5rem 1.25rem; }


/* Blog post styling */
.blog-post {
  background: rgba(0, 0, 0, 0.85);  /* black backdrop, slightly transparent */
  padding: 2rem;
  border-radius: 8px;
  max-width: 60ch;                  /* keep text narrow */
  margin: 0 auto 2rem;              /* center horizontally + spacing below */
  text-align: left;                 /* left-align text for readability */
  line-height: 1.6;
}

.blog-post p {
  margin: 0 0 1.25rem;
}
/* Rainbow gradient text for the music section header */
.rainbow-text { color: #9ad0ff; }

/* Animated gradient clipped to text (no unprefixed background-clip) */
.rainbow-text {
  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  background-size: 200% auto;
  -webkit-background-clip: text;     /* use ONLY the prefixed version */
  -webkit-text-fill-color: transparent;
  animation: rainbow-shift 5s linear infinite;
   font-size: 28px;       /* adjust to taste */
  font-weight: bold;     /* optional */
}

@keyframes rainbow-shift {
  0%   { background-position: 0% center; }
  100% { background-position: 100% center; }
}

/* Bottom Gifs */
.ufo-gif img {
  display: block;
  margin: 1.5rem auto; /* centers the GIF and adds spacing */
  max-width: 550px;    /* shrink if it's too large, adjust as needed */
  height: auto;
}

.ufo-caption {
  color: limegreen;
  text-align: center;
  font-size: 20px;   /* adjust size as you like */
  margin-top: 0.5rem;
}

.blog-gif img {
  display: block;
  margin: 0 auto 1rem; /* centers the gif and adds spacing below */
  max-width: 400px;    /* adjust size */
  height: auto;
}