* {
    margin: 0;
    padding: 0;
}


body {
    background-color: #ffffff;
    color: #000000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    transition: background 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* Prevent horizontal scroll */
    overflow-y: auto; /* Allow vertical scroll */
    overflow: hidden;
}

.container {
    flex: 1;
    min-height: 100%;
}

/* Background Scroll */
.background-scroll-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* Send background behind other content */
}

.background-scroll {
    display: flex;
    flex-direction: column;
    animation: scrollBackground 50s linear infinite;
    overflow: hidden;
}

.background-scroll img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Make sure images don't stretch */
    flex-shrink: 0;
    opacity: 0.2;
    pointer-events: none;
}

/* Keyframes for seamless infinite scroll */
@keyframes scrollBackground {
    0% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(-10000%);
    }
}


/* Adjustments for mobile screens */
@media screen and (max-width: 768px) {
    .title-container {
        text-align: center;
        margin-top: -0px;
        z-index: 1; /* Lower z-index for title image */
    }

    .studio-subtitle {
        position: relative;
        top: -55px; /* Moves the text up by 10px */
        font-size: 0.85rem;
        color: #525252;
        font-family: 'Libre Baskerville', serif;
        text-align: center;
    }
    .background-scroll img {
        height: auto;
        width: 100%;
        object-fit: contain; /* Ensure images fit naturally */
        margin-bottom: 2vh; /* White space between images */
    }

    .fancy-title {
        font-size: 120px; /* Adjusted font size for mobile */
    }

    .title-image {
        max-width: 100%;
        filter: drop-shadow(0px 5px 10px rgba(34, 34, 34, 0.8));
        position: relative;
        z-index: 1; /* Ensure title image is behind user icons */
    }

    .icon-center-container {
        position: relative;
        z-index: 10; /* Ensure icon container is above title */
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 60px;
        margin-top: 0; /* Set back to original vertical positioning */
        height: auto; /* Adjust height */
    }

    .artist-icon-link {
        display: block;
        width: 130px; /* Ensure the link is the same size as the icon */
        height: 130px; /* Set height to match icon size */
        border-radius: 50%;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    }

    .artist-icon-link:hover {
        transform: scale(1.05);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9);
    }

    .artist-icon {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Adjust buttons */
.bottom-buttons-container {
    bottom: 10px;
    right: 10px;
    gap: 8px;
    display: flex;           /* Use flexbox to lay out buttons */
    position: absolute;      /* Position at the bottom-right corner */
}

.home-btn img, .calendar-btn img, .ascii-btn img {
    width: 40px;             /* Set button image width */
    height: 40px;            /* Set button image height */
}

}

@media screen and (min-width: 769px) {
    .title-image {
        max-width: 600px;   /* Increase max-width on larger screens */
        filter: drop-shadow(0px 5px 10px rgba(34, 34, 34, 0.8));
        position: relative;
        z-index: 1; /* Ensure title image is behind user icons */
    }

    .studio-subtitle {
        position: relative;
        top: -90px; /* Moves the text up by 10px */
        font-size: 0.85rem;
        color: #666;
        font-family: 'Libre Baskerville', serif;
        text-align: center;
    }
    .title-container {
        text-align: center;
        margin-top: -51px;
        z-index: 1; /* Ensure title is behind the user icons */
    }

    .fancy-title {
        font-size: 400px;    /* Increase title font size on larger screens */
    }

    .icon-center-container {
        position: relative;
        z-index: 10; /* Ensure icon container is above title */
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 60px;
        margin-top: -50px; /* Slightly raise the icons */
        height: auto; /* Adjust height */
    }
    

    .artist-icon-link {
        display: block;
        width: 200px; /* Set width explicitly */
        height: 200px; /* Set height explicitly */
        border-radius: 50%;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    }

    .artist-icon-link:hover {
        transform: scale(1.05);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9);
    }

    .artist-icon {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* Bottom Buttons */
.bottom-buttons-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 1000;
}

/* Home Button */
.home-btn, .calendar-btn, .ascii-btn {
    background-color: #ffffff;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.home-btn:hover, .calendar-btn:hover, .ascii-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

/* Image Size and Object Fit */
.home-btn img, .calendar-btn img, .ascii-btn img {
    width: 45px;
    height: 45px;
    object-fit: cover;
}


.fun-message-container {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
}

.fun-message-text {

    font-size: 1.5rem;
    color: #1a1a1a;
    font-family: 'Libre Baskerville', serif;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    padding: 0 15px;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0;
    animation: cringeReveal 1.5s ease-out forwards;
}

@keyframes cringeReveal {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Safari-specific fixes for background scroll animation */
.background-scroll {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    height: 200vh; /* Ensures it has scrollable height */
}

/* Keyframe updated to use vh instead of percentage */
@keyframes scrollBackground {
    0% {
        transform: translateY(0vh);
    }
    100% {
        transform: translateY(-100vh); /* Or -50vh if you're duplicating images */
    }
}

/* Optional: duplicate images for a more seamless loop */
.background-scroll img:last-child {
    margin-top: 0; /* Avoid extra space if duplicating */
}