/* 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." */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

body {
  background-color: #75190b;
}


body {
  color: black;
  font-family: 'Special Elite', cursive;
}

.top-box {
  position: relative;
  margin-top: 35px;
  background-color: #ad93ac;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  overflow: visible;
  
}

/* Top + bottom lace */
.top-box::before,
.top-box::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 70px;
  background-image: url('https://file.garden/aE9_rMxjRipMysc_/download__14_-removebg-preview%20(1).png');
  background-repeat: repeat-x;
  background-size: auto 100%;   /* preserves lace height */
  background-position: 0 center;
  pointer-events: none;
  z-index: 2;  /* ensures lace shows above background */
}

/* Top lace */
.top-box::before {
  top: 0;
  transform: translateY(-50%);
}

/* Bottom lace */
.top-box::after {
  bottom: 0;
  transform: rotate(180deg) translateY(-50%);
}

    
/* Album container */
.album {
  position: relative;
  width: 300px;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  background-color: #ad93ac;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  margin-top: 15px;
}

.album-inner {
  position: relative; /* ensures absolute children are positioned relative to this */
  height: 350px;      /* match the album image height */
  margin-top: 15px;
}

/* Song list slides out from album */
.album-inner .song-list {
  position: absolute;
  top: 0;
  left: 100%;
  width: 200px;
  height: 340px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  overflow-y: auto;
  transform: translateX(-20px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
  z-index: 1;
}

/* Slide the song list fully out on hover */
.album:hover .song-list {
  transform: translateX(0);
  opacity: 1;
}

/* Song list items spacing */
.song-list li {
  padding-top: 5px;
  padding-bottom: 6px;
}




/* Top navigation bar */
body.index-page .topnav {
  width: 100%;                 /* full width */
  height: 60px;                /* fixed height */
  background-color: black;     /* navbar background color */
  border: 2px solid white;     /* optional border */
  border-radius: 10px;         /* rounded corners */
  padding: 10px;               /* spacing inside navbar */
  box-sizing: border-box;      /* includes padding in height/width */
  
  position: relative;          /* allows z-index to work */
  z-index: 9999;               /* ensures navbar is above other elements */
  
  display: flex;               /* makes links align horizontally */
  align-items: center;         /* vertically center links */
  justify-content: flex-start; /* links aligned to left */
}

body.discography-page .topnav {
  width: 100%;                 /* full width */
  height: 60px;                /* fixed height */
  background-color: #ba91b3;
  border: 2px solid white;     /* optional border */
  border-radius: 10px;         /* rounded corners */
  padding: 10px;               /* spacing inside navbar */
  box-sizing: border-box;      /* includes padding in height/width */
  
  position: relative;          /* allows z-index to work */
  z-index: 9999;               /* ensures navbar is above other elements */
  
  display: flex;               /* makes links align horizontally */
  align-items: center;         /* vertically center links */
  justify-content: flex-start; /* links aligned to left */
}

.topnav a {
  text-align: center;
  padding: 14px 16px;  /* vertical | horizontal */
  text-decoration: none;
  font-size: 20px;
}


.image-container {
    /* Establishes positioning context for the overlay image */
   
    float: right;
    /* Adjust width as needed */
    width: 545px; 
}

.background-img {
    /* Ensures the background image fills the container */
    width: 370px;
    padding: 15px 25px;
    
    float: right;
    /* Prevents the background image from moving out of flow */
    display: block; 
}

.overlay-img {
    /* Positions the overlay image relative to the container */
    position: absolute;
    /* Adjust these values to place the image exactly where you want it */
    float: right;
    /* Adjust the size of the overlay image */
    width: 500px; 
    height: 550px;
}




.info-box1 {
  position: absolute;
  width: 900px;
  height: 340px;
  margin-top: 440px;
  margin-left: 600px;
  background-color: #ad93ac ;
  border-radius: 10px;
  border: 4px solid white;
  padding: 20px;
  box-sizing: border-box;
  overflow: visible;
  
}

.info-box2 {
  position: absolute;
  width: 900px;
  height: 340px;
  margin-top: 785px;
  margin-left: 600px;
  background-color: #ad93ac ;
  border-radius: 10px;
  border: 4px solid white;
  padding: 20px;
  box-sizing: border-box;
  overflow: visible;
  
}

.info-box3 {
  position: absolute;
  width: 900px;
  height: 340px;
  margin-top: 1190px;
  margin-left: 600px;
  background-color: #ad93ac ;
  border-radius: 10px;
  border: 4px solid white;
  padding: 20px;
  box-sizing: border-box;
  overflow: visible;
  
}

.info-box4 {
  position: absolute;
  width: 900px;
  height: 340px;
  margin-top: 1595px;
  margin-left: 600px;
  background-color: #ad93ac ;
  border-radius: 10px;
  border: 4px solid white;
  padding: 20px;
  box-sizing: border-box;
  overflow: visible;
  
}

.info-box5 {
  position: absolute;
  width: 900px;
  height: 340px;
  margin-top: 1995px;
  margin-left: 600px;
  background-color: #ad93ac ;
  border-radius: 10px;
  border: 4px solid white;
  padding: 20px;
  box-sizing: border-box;
  overflow: visible;
  
}

.info-box6 {
  position: absolute;
  width: 900px;
  height: 340px;
  margin-top: 2395px;
  margin-left: 600px;
  background-color: #ad93ac ;
  border-radius: 10px;
  border: 4px solid white;
  padding: 20px;
  box-sizing: border-box;
  overflow: visible;
  
}

.info-box7 {
  position: absolute;
  width: 900px;
  height: 340px;
  margin-top: 2795px;
  margin-left: 600px;
  background-color: #ad93ac ;
  border-radius: 10px;
  border: 4px solid white;
  padding: 20px;
  box-sizing: border-box;
  overflow: visible;
  
}


.spaced-lines {
    /* A value of 1.5 is standard and easy to read */
    line-height: 1.5;
}

.spaced-lines2 {
    /* A value of 1.5 is standard and easy to read */
    line-height: 2.0;
}