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

@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
body {
  background-image: 
    radial-gradient(circle at 100px 50px, #5f6a44 50px, transparent 51px),
    linear-gradient(#5f6a44, #5f6a44),
    linear-gradient(#f1f3e9, #f1f3e9);

  /* This locks the scallops 300px from the right edge */
  background-position: right 300px top, right, left;
  background-repeat: repeat-y, no-repeat, no-repeat;
  
  /* This makes the dark green strip exactly 300px wide */
  background-size: 100px 100px, 300px 100%, 100% 100%;
  
  background-attachment: fixed;
  margin: 0;
  padding-top: 60px; /* Gives space for your new marquee */
    font-family: 'Nanum Pen Script', cursive; 
  font-size: 26px; 
  color: #5f6a44;
  height: 100vh;
}

/* 1. THE BIG CONTAINER */
.container {
    display: flex;         /* This turns on the side-by-side mode */
    align-items: flex-start;   /* This centers everything vertically */
    justify-content: space-between; /* This puts space between the bio and photo */
    padding: 40px 2%;
    max-width: 1100px;     /* Keeps the site from getting too wide on big screens */
    margin: 0 auto;        /* Centers the whole container on the page */
}

/* 2. THE BIO SECTION */
#bio {
    flex: 0 1 600px;               /* Tells the bio to take up available space */
    text-align: left;
    margin-left: 0; 
   margin-bottom: 60px; /* Pushes the polaroids away from the bottom of the bio */
  max-width: 600px;
  margin: 0 auto 100px auto; /* 100px bottom margin to force a gap */
  display: block; /* Ensures it acts like a solid block */
  position: relative;
}

#polaroid-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px; /* This creates a guaranteed 80px gap between every photo */
  margin-top: 50px; 
}
   #bio {
    /* The Underlay & Rounding */
  background-color: rgba(157, 174, 114, 0.6); /* White with 70% transparency */
  filter: blur(.05px); /* This blurs the background slightly for a "glass" look */
  padding: 30px;
  border-radius: 25px; /* Makes the edges nice and round */
  
  /* Cartoon Outline */
  border: 4px solid #9DAE72; 
  box-shadow: 8px 8px 0px rgba(157, 174, 114, 0.4);
}

/* 3. THE POLAROID SECTION */
/* 3. THE POLAROID SECTION */
.polaroid {
  position: relative; 
  background-color: #E4D8D0;
  /* Shrank the 80px bottom to 50px to make the 'chin' smaller */
  padding: 40px 40px 0px 40px; 
  transform: rotate(3deg);
  border: 4px solid #AB9C9C;
  box-shadow: 8px 8px 0px rgba(94, 75, 86, 0.2);
  border-radius: 10px;
  margin-top: 20px;
  margin-bottom: 80px; /* Keeps photos from crowding each other */
}

.polaroid img {
  /* CHANGE THIS NUMBER to resize the whole thing! */
  max-width: 200px; 
  display: block;
  border-radius: 2px;
}
.polaroid .caption {
    text-align: center;
    font-family: 'Nanum Pen Script', sans-serif; /* A handwritten feel for the caption */
    margin-top: 15px;
    color: #8D7668;
}

.polaroid {
  transition: transform 0.3s ease; /* Makes the movement smooth */
}

.polaroid:hover {
  transform: rotate(0deg) scale(1.05); /* Straightens and zooms slightly */
  z-index: 20; /* Brings it to the front */
}


header {
  display: flex;
  justify-content: center; /* This pushes the content to the center horizontally */
  padding: 20px 0;
}

#music-player {
  width: 100%;
  max-width: 600px; /* This keeps the player from stretching too wide */
  text-align: center;
}

.likes-dislikes {
    border: 2px solid #9DAE72; /* Matches your bio border */
    border-radius: 15px;
    overflow: hidden;
    margin-top: 20px;
}

.chart-row {
    display: flex;
}

.header-row {
    background-color: #9DAE72; /* Solid color for the top of the chart */
    color: white;
    font-weight: bold;
}

.column-label, .likes-list, .dislikes-list {
    flex: 1;
    padding: 10px;
    text-align: center;
}

/* This adds the vertical line in the middle */
.likes-list {
    border-right: 2px solid #9DAE72;
}

.tape {
  width: 100px;
  height: 30px;
  background-color: rgba(189, 168, 156, 0.4); /* Cute semi-transparent pink */
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  z-index: 10;
  
  /* This gives it that "ripped paper" texture on the edges */
  box-shadow: inset 2px 0 0 rgba(0,0,0,0.05), inset -2px 0 0 rgba(0,0,0,0.05);
  border-left: 2px dashed rgba(255,255,255,0.5);
  border-right: 2px dashed rgba(255,255,255,0.5);
}

/* We need to add this to your existing .polaroid class so the tape stays attached */
.polaroid {
  position: relative; 
}

.music-container {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%;
  height: 40px;
  /* Matches your Polaroid paper color */
  background-color: #fcfaf8; 
  /* Matches your theme green */
  color: #8D7668; 
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Nanum Pen Script', cursive;
  z-index: 9999;
  /* Adds a thin line that matches the polaroid border */
  border-bottom: 2px solid #ddd; 
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.scrolling-text {
  display: inline-block;
  animation: scroll-text 20s linear infinite; /* 20s makes it slow and chill */
}

.scrolling-text span {
  padding-right: 50px; /* Space between song titles */
}

@keyframes scroll-text {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}