* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #222;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Aligns to the top of the page */
    height: 100vh;
    color: white;
    overflow-y: auto; /* Allows the whole page to be scrollable */
    padding: 20px; /* Add some padding for the container */
}

.container {
    display: flex;
    flex-direction: column; /* Stack image and buttons vertically */
    align-items: center; /* Center everything */
    gap: 20px; /* Space between the image and buttons */
}

.jukebox-image {
    width: 100%; /* Adjust width as per your preference */
    max-width: 300px; /* Max width for the image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: rounded corners for the image */
}

.jukebox-container {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 15px; /* Space between buttons */
    width: auto; /* Allow the container to adjust based on its content */
    max-height: none; /* Remove the height restriction */
    overflow: hidden; /* Prevent overflow within the container */
}

.jukebox-btn {
    background: linear-gradient(145deg, #ff6b81, #ff3d6d); /* Retro gradient */
    color: white;
    font-size: 16px; /* Smaller font size */
    font-weight: bold;
    padding: 12px 20px; /* Adjust padding to make room for text */
    border: 2px solid #ff3d6d; /* Retro border color */
    border-radius: 10px; /* Slightly smaller border radius */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Smaller shadow */
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none; /* Remove default underline for links */
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    
    display: inline-flex; /* Makes the button adjust based on its content */
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* Prevent text from wrapping */
    white-space: nowrap;
    
    /* Make sure the width and height are determined by the content */
    width: auto; /* Adjust width based on text */
    height: auto; /* Adjust height based on padding and content */
    min-width: 150px; /* Optional: ensures the button has a minimum width */
    max-width: 100%; /* Ensures the width is limited to the container's width */
}

.jukebox-btn:before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.5); /* Smaller glow effect */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.jukebox-btn:hover {
    background: linear-gradient(145deg, #ff5a72, #ff295f);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.jukebox-btn:hover::before {
    opacity: 1;
}

.jukebox-btn:active {
    transform: translateY(1px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
}

.jukebox-btn:focus {
    outline: none;
}