/* -------------- container -------------- */
html {
  overflow-y: scroll;         /* keep scrolling enabled */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE 10+ and legacy Edge */
}
.text {
	background-color: rgb(192, 192, 192);
	width: 300px;
	height: 280px;
	overflow-y: scroll;
    line-height: 2.5;
    text-align: left;
  transform: perspective(90px) rotatey(-3deg);
}
/* -------------- positioning -------------- */
.container {
	position: relative;
}

#monitor {
  display: inline-block; 
}
#monitor {
	position: absolute;
	z-index: 1;
	top: -15px;
	left: 600px;
	pointer-events: none;
	filter: drop-shadow(rgba(0, 0, 0, 0.294) 0.10rem 0.8rem 5px);
}
#intro {
    position: absolute;
    text-align: center;
	z-index: 1;
    rotate: -1deg;
	top: 63px;
	left: 840px;
	pointer-events: auto;
    color: #000000;
    scrollbar-width: none;       
    -ms-overflow-style: none;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
}
#catStatic {
    position: absolute;
	z-index: 1;
	top: 100px;
	left: -300px;
	pointer-events: none;
}
#catAnimated {
    position: absolute;
	z-index: 1;
	top: 100px;
	left: -300px;
	pointer-events: none;
}
#chair {
    position: absolute;
	z-index: 1;
	top: -15px;
	left: -300px;
	pointer-events: none;
}
#table{
    position: absolute;
	z-index: 0;
	top: 340px;
	left: 460px;
	pointer-events: none;
    filter: drop-shadow(rgba(0, 0, 0, 0.294) 0.10rem 0.8rem 5px);
}
/* Update your .text class in CSS to be cleaner: */
.text {
    /* Remove background-color, border, and fixed dimensions if they conflict */
    /* Just keep the positioning properties */
    transform: perspective(90px) rotatey(-3deg);
    line-height: 1.5; /* Adjusted for better readability inside a window */
    text-align: left;
}
/* ==========================================================================
   RETRO CD PLAYER STYLES
   ========================================================================== */

/* 1. Main Window Positioning
   The absolute positioning is required for the JavaScript dragging logic to work.
   Z-index ensures it stays on top of other content. */
#myWindow {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 1000;
    width: 375px;
}

/* Cursor change indicates this area is draggable */
#titleBar {
    cursor: move;
    user-select: none;
}

/* 2. Player Layout
   Flexbox allows the album art to sit perfectly next to the control panel. */
.player-container {
    display: flex; 
    gap: 5px;
    align-items: center;
}

/* Styling the Album Art box with the classic Windows 98 inset look */
.side-image {
    width: 120px;
    height: 120px;
    border: 2px inset #000000;
    background: #c0c0c0;
    flex-shrink: 0;
}

/* Ensures the image fills the box and maintains aspect ratio */
.side-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 3. Button Styles
   Standardizing button layout and image alignment */
/* 3. Button Styles (Boxy Windows 98 Look) */
#prevBtn {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    left: 30px;
    /* Boxy Sizing: Makes them square and uniform */
    min-width: 50px;
    height: 27px;
    padding: 0;

    outline: none;
}
#playPauseBtn {
     position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    left: 30px;
    /* Boxy Sizing: Makes them square and uniform */
    min-width: 50px;
    height: 27px;
    padding: 0;
    
    /* Removes default browser button outline */
    outline: none;
}
#nextBtn {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    left: 30px;
    /* Boxy Sizing: Makes them square and uniform */
    min-width: 50px;
    height: 27px;
    padding: 0;

    
    /* Removes default browser button outline */
    outline: none;
}
/* The "Push" effect: When you click, the colors flip */
button:active {
    border-color: #808080 #ffffff #ffffff #808080;
}

/* Ensures the icon remains centered inside the button box */
button img {
    width: 16px;
    height: 16px;
    pointer-events: none; /* Allows the button to handle the click */
}

/* 4. Progress Bar Styling
   The 'inset' border provides the recessed look. 
   'position: relative' allows the bar to fill the container accurately. */
.progress-indicator {
    width: 100%;
    height: 16px;
    border: 2px inset #808080;
    background: #c0c0c0;
    cursor: pointer;
    margin: 10px 0;
    position: relative;
    box-sizing: border-box; /* Ensures border does not expand div width */
}

/* The actual progress indicator color */
.progress-indicator-bar {
    display: block;
    height: 100%;
    background: #000080; /* Dark blue progress */
    width: 0%;
}

/* 5. Marquee/Title Box 
   Mimics the static, old-school text display areas of 90s software. */
#songTitle {
    background: white; 
    border: 1px inset gray; 
    padding: 2px;
    font-size: 11px;
    margin-bottom: 10px;
    display: block;
    overflow: hidden;
    white-space: nowrap; /* Prevents text wrap */
}
/* Customizing the volume slider size */
#volumeSlider {
    height: 15px;
    vertical-align: middle; /* Keeps it aligned with the 'Volume:' label */
}