/* 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 {

  color: black;
  font-family: Verdana;
  cursor:url('puppy.png'),auto;
}
  
/* 1. Setup the container size */
.pattern-overlay-container {
  position: relative;
  width: 800px;
  height: 700px;
}

/* 2. Make the base image fill the container */
.base-image {
  width: 100%;
  height: 100%;
  display: block;
}

/* 3. Create the repeating top layer */
.pattern-overlay-container::after {
  content: "";               /* Required for pseudoelements to appear */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;                /* Forces it to sit on top of the image */
  
  /* The repeating image logic */
  background-image: url('Fluttershy.jpg'); 
  background-repeat: repeat-x; /* Options: repeat, repeat-x (horizontal), repeat-y (vertical) */
  background-position:top left;
  background-size:200px 70px;/* Optional: forces the repeating tile to be a specific size */
  
  pointer-events: none;      /* Optional: allows users to click the photo underneath it */
}

body {
  margin: 0;
  padding: 0;
}

.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow-x: auto;
}

/* Forces the HTML image to stay pinned behind everything */
.hero-section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Acts like background-size: cover */
  z-index: -1;       /* Sends the image behind everything else in the container */
}

/* Text containers just need normal styling */
.text-box {
  position: relative; /* Keeps it on top of the negative z-index image */
  background: white;
  margin: 20px auto;
  padding: 20px;
  max-width: 600px;
}


.profile-pic {
    float: left;
    margin-right: 10px;
    margin-bottom: 5px;
    border-radius: 5px; /* Optional: rounds image corners */
}

.your-text-container {
    width: 400px;
    height: 500px;
    background-color: #ffffff;
    border: 1px solid #000;
    padding: 15px;
    overflow-y: auto; /* Adds a scrollbar if the playlist/text exceeds the box height */
}

.music-container {
    width: 350px;       /* Set your desired width */
    height: 180px;      /* Set your desired height */
    padding: 10px;      /* Adds breathing room around the player */
    box-sizing: border-box; 
    
    /* Centers the player inside this container */
    display: flex;
    justify-content: center;
    align-items: center;
}

.player {
    width: 100%;       /* Fills 100% of the parent's width */
    height: 100%;      /* Fills 100% of the parent's height */
    box-sizing: border-box;
    border: black solid 1px;
    border-width: 1px 0px 0px 1px;
    /* margin-left: auto; (Remove this) */
    /* margin-right: auto; (Remove this) */
}

/* Container Box Layout */
.playlist-container {
    width: 300px;             /* Adjust this width to match your website design */
    padding: 10px;
    border: 2px solid #000;   /* Optional border to see the container boundaries */
    box-sizing: border-box;
    
    display: flex;            /* Turns on flexible alignment */
    flex-direction: column;   /* Stacks title, text, and player vertically */
    gap: 8px;                 /* Replaces ugly <br> tags with clean, even spacing */
}

/* Title Styling */
.title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: bold;
}

/* Player Adjustments */
.player {
    width: 100%;              /* Forces player to match the exact container width */
    box-sizing: border-box;
    border: black solid 1px;
    border-width: 1px 0px 0px 1px;
}