/* ===== BODY ===== */
/* ===== BODY ===== */
body{
  margin:0;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  font-family:Courier, sans-serif;
  text-align:center;
  background-color:#F1E5FF; /* soft lavender background */
  padding: 20px 0; 
  overflow-x:hidden;
  color:#5D4A87;
  box-sizing: border-box;
}

/* ===== STARFIELD BACKGROUND ===== */
.stars, .stars2, .stars3 {
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:-3;
  background-repeat:repeat;
}
.stars{ background-image:url("https://www.transparenttextures.com/patterns/stardust.png"); animation:starScroll 120s linear infinite; opacity:0.4; }
.stars2{ background-image:url("https://www.transparenttextures.com/patterns/stardust.png"); animation:starScroll2 90s linear infinite; opacity:0.3; }
.stars3{ background-image:url("https://www.transparenttextures.com/patterns/stardust.png"); animation:starScroll3 60s linear infinite; opacity:0.2; }

@keyframes starScroll{ from{background-position:0 0;} to{background-position:0 1000px;} }
@keyframes starScroll2{ from{background-position:1000px 0;} to{background-position:0 1000px;} }
@keyframes starScroll3{ from{background-position:0 1000px;} to{background-position:1000px 0;} }

/* ===== FALLING SPARKLES ===== */
.sparkles{ position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:-2; overflow:hidden; }
.sparkle{ position:absolute; width:4px; height:4px; background:#fff; border-radius:50%; opacity:0.8; animation:fall linear infinite, flicker 2s infinite alternate; }
@keyframes fall{ 0%{transform:translateY(-10px) scale(1); opacity:0.8;} 100%{transform:translateY(100vh) scale(0.5); opacity:0;} }
@keyframes flicker{ 0%{opacity:0.5;} 50%{opacity:1;} 100%{opacity:0.6;} }

/* ===== CONTAINER ===== */
.container{
  width:95%;
  max-width:900px;
  display:flex;
  gap:10px;
  box-shadow:0 0 20px #F1E5FF;
  background:transparent;
  position:relative;
  z-index:1;
  margin:20px auto;
  border-radius:8px;
  flex-wrap: nowrap;       /* desktop/tablet side by side */
  justify-content:center;   /* center horizontally */
  box-sizing: border-box;
}

/* ===== SIDEBAR ===== */
.sidebar{
  flex:1 1 220px;
  min-width:180px;
  background:#FAF7FF;
  border:3px solid #5D4A87;
  text-align:center;
  padding:12px;
  color:#5D4A87;
  border-radius:6px;
  box-sizing: border-box;
}

/* ===== MAIN CONTENT ===== */
.main{
  flex:2 1 500px;
  padding:12px;
  background:#FAF7FF;
  border:3px solid #5D4A87;
  text-align:center;
  border-radius:6px;
  box-sizing: border-box;
}

/* ===== VIDEO SECTION ===== */
.video-section{ 
  display:flex; 
  justify-content:center; 
  position:relative; 
  width:100%; 
  max-width:480px; 
  padding-top:56.25%; /* 16:9 aspect ratio */
  margin:auto; 
}
.video-section iframe{ 
  position:absolute; 
  top:0; left:0; 
  width:100%; 
  height:100%; 
  border-radius:4px; 
}

/* ===== DIVIDER ===== */
.divider{
  height:2px;
  background:#5D4A87;
  margin:18px 0;
}

/* ===== BOTTOM SECTION ===== */
.bottom-section{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:20px;
  margin-top:20px;
  flex-wrap: nowrap;
}

/* ===== UPCOMING SHOWS ===== */
.shows{
  flex:1 1 150px;
  padding:0;
  text-align:center;
}
.shows h3{ margin-top:0; margin-bottom:8px; }
.shows ul{ list-style:none; padding:0; margin:0 auto; }
.shows li{ margin:6px 0; }

/* ===== COOL LINKS ===== */
.links{
  flex:1 1 150px;
  text-align:center;
  padding-left:15px;
  border-left:2px dotted #5D4A87;
  box-sizing: border-box;
}
.links-inner{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  height:100%;
}
.links h3{ margin-top:0; margin-bottom:8px; }

/* ===== ICON GRID ===== */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 32px); /* exactly 3 columns */
  column-gap: 12px; /* horizontal spacing */
  row-gap: 12px;    /* vertical spacing */
  justify-content: center;
  margin-top: 12px;
}
.icon-grid img{ width:32px; height:32px; object-fit:contain; display:block; transition: transform 0.2s; }
.icon-grid img:hover{ transform: scale(1.15); } /* subtle hover effect */

/* ===== IMAGES ===== */
img{ display:block; margin:auto; }

/* ===== RESPONSIVE MOBILE ===== */
@media (max-width:600px){
  .container{ flex-wrap: wrap; }
  .bottom-section{ flex-direction:column; align-items:center; gap:15px; }
  .links{ border-left:none; border-top:2px dotted #5D4A87; padding-left:0; padding-top:12px; width:80%; }
  .links-inner{ justify-content:flex-start; }
  .icon-grid{ column-gap:6px; row-gap:6px; }
}