body {
    overflow: hidden;
    background-color: #F5F5F5;
}


/* Other CSS rules remain unchanged */

.container {
    display: flex; /* Use flexbox to align children in a row */
    overflow: hidden;
    justify-content: space-evenly; /* Space between columns */
    align-items: center; /* Align items vertically in the center */
    height: 100vh; /* Set the height to fill the viewport */
}

.songContainer {
    display: flex;
    flex-direction: column; /* Arrange items in a column */
    padding-top: 10vh;
    align-items: center;
    padding-bottom: 10vh;
    justify-content: space-evenly; /* Align items at the start */
    align-items: center; /* Center items horizontally */
    width: 15%; /* Set width to take a quarter of the space */
    box-sizing: border-box; /* Include padding in the total width/height */
    padding: 0px 0px; /* Optional: Add padding */
    height: 100%; /* Set height to 100% of the parent container */
    overflow-y: auto; /* Allow vertical scrolling if necessary */
    margin-left: 10vw;
    overflow: visible;
}

.songContainer2 {
    display: flex;
    flex-direction: column; /* Arrange items in a column */
    padding-top: 10vh;
    align-items: center;
    padding-bottom: 10vh;
    justify-content: space-evenly; /* Align items at the start */
    align-items: center; /* Center items horizontally */
    width: 15%; /* Set width to take a quarter of the space */
    box-sizing: border-box; /* Include padding in the total width/height */
    padding: 0px 0px; /* Optional: Add padding */
    height: 100%; /* Set height to 100% of the parent container */
    overflow-y: auto; /* Allow vertical scrolling if necessary */
    margin-right: 10vw;
    overflow: visible;
}

.center-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 38%;
}

.about-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    cursor: pointer;
    z-index: 5000;
}

.about-icon img {
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.clock {
    position: relative;
    width: 100%;
    background-size: contain; /* Scale the image to fit the clock div */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-position: center; /* Center the background image */
    z-index: 10;
}

.cd {
    box-shadow: 0 5px 10px rgba(18, 18, 18, 0.1), 0 15px 40px rgba(38, 41, 53, 0.8);
    z-index: 5;
    width: 100%;
}

.hand {
    position: absolute; /* Position hands absolutely */
    background-color: #222222; /* Color of the hands */
    border-radius: 5px; /* Rounded edges */
    transform-origin: bottom; /* Rotate from the bottom */
    z-index: 11; /* Ensure they are above other elements */
}

.hour {
    width: 5px; /* Width of hour hand */
    height: 30%; /* Height as a percentage of the clock size */
    bottom: 50%; /* Position at the center bottom */
    left: 53%; /* Center it horizontally */
    transform: translateX(-50%) rotate(90deg); /* Adjust rotation as needed */
}

.minute {
    width: 5px; /* Width of minute hand */
    height: 40%; /* Height as a percentage of the clock size */
    bottom: 50%; /* Position at the center bottom */
    left: 53%; /* Center it horizontally */
    transform: translateX(-50%) rotate(180deg); /* Adjust rotation as needed */
}

.temmp {
    width: 3px; /* Width of minute hand */
    height: 45%; /* Height as a percentage of the clock size */
    bottom: 50%; /* Position at the center bottom */
    left: 53%; /* Center it horizontally */
    transform: translateX(-50%) rotate(180deg); /* Adjust rotation as needed */
    opacity: 1;
}

.dot {
    position: absolute; /* Position hands absolutely */
    width: 5%;
    height: 5.5%;
    bottom: 48.1%; /* Position at the center bottom */
    left: 50.7%; /* Center it horizontally */
    background-color: #222222; /* Color of the hands */
    border-radius: 50%;
    z-index: 100;
}


.timeTape {
    position: relative;
    background-size: contain; /* Scale the image to fit the clock div */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-position: center; /* Center the background image */
}

.timeTape img {
    width: 100%;
}

.numb {
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    
    object-fit: contain;
    width: 6.5%; /* Decrease size to 5% or adjust as necessary */
    top: 54%; /* Adjust this value to position vertically as needed */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for centering */
}

.tn {
    width: 5%;
}

/* You can add more specific styles for different .numb images if needed */


.fastForward {
    display: flex;
    justify-content: center; /* Center horizontally */
    /* align-items: center; Center vertically */

    align-items: center;
    width: 38vw;
    height: 10vh;
    background-image: url('./images/SmallTape.png');
    background-size: contain; /* Scale the image to fit the clock div */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-position: center; /* Center the background image */
    margin-right: -2.5vw;

}

.play {
    visibility: hidden;
}

.fastForward img {
    height: 40%;
    transform: translateY(-42%); /* Move the image up by 10 pixels */
    background-size: contain; /* Scale the image to fit the clock div */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-position: center; /* Center the background image */
}


.song {
    position: relative; /* Allows positioning of child elements */
    /* transform: rotate(15deg); */
    background-image: url("./polaroid.png");
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Shadow for depth */
    background-position: center;
    background-size: contain; /* Keep the original size of the polaroid */
    background-repeat: no-repeat;
    width: 19.8vmin; /* Set width to a proportional size based on viewport */
    height: 24vmin; /* Set height to a proportional size based on viewport */
}

.video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2; /* Behind other elements */
    overflow: hidden;
    backdrop-filter: blur(1100px); /* Apply blur effect */
    pointer-events: none;
    opacity: 1;


}

.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);
    pointer-events: auto; /* Prevent interaction with the video */
}


#song-1 {
    transform: rotate(2deg); /* Slight rotation */
}

#song-2 {
    transform: rotate(-3deg); /* Rotate in the opposite direction */
}

#song-3 {
    transform: rotate(4deg); /* Larger rotation */
}

#song-4 {
    transform: rotate(-4deg); /* Rotate in the opposite direction */
}

#song-5 {
    transform: rotate(3deg); /* Slight rotation */
}

#song-6 {
    transform: rotate(-1deg); /* Rotate in the opposite direction */
}



.song img {
    top: 5%;
    left: 10%;
    position: absolute; /* Position the image inside the container */
    width: 80%; /* Image fills 80% of the .song container */
    height: auto; /* Maintain aspect ratio */
}

.songText {
    position: absolute;
    top: 74%; /* Position text relative to the .song container */
    left: 50%;
    width: 80%; /* Text width relative to the song container */
    transform: translateX(-50%); /* Center text */
    font-family: "Mynerve";
    font-size: 1.5vmin; /* Font size scales with viewport size */
    text-align: center; /* Center text alignment */
    line-height: 1.1;
}

.songOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Overlay covers the entire song */
    height: 100%; /* Overlay covers the entire song */
    background-color: rgba(255, 255, 255, 0.25); /* The desired color with opacity */
    z-index: 1; /* Ensure it overlays the content */
}

.background-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Ensure it's behind all other elements */
    background: rgb(36, 36, 36); /* A semi-transparent white background */
    opacity: 0;
    backdrop-filter: blur(1100px); /* Apply blur effect */
    pointer-events: none ;
    overflow: hidden;
}

.song img.halo {
    box-shadow: 0px 0px 100px rgba(0, 204, 255, 0.4), /* Offset for more depth */
                -10px -10px 450px rgba(255,255,255, 0.9);
    box-sizing: border-box;
}



.second {
    top: 50%;
    left: 50%;
    transform: translate(50%, 50%);
}




/* Responsive Styles */
@media (max-width: 800px) {
    body {
        pointer-events: none;
    }


    
    .video-container, .video-background {
        pointer-events: auto; /* Enable pointer events for video container and background */
    }
    


    .container {    
        display: flex; /* Use flexbox to align children */
        flex-direction: column; /* Stack items vertically */
        justify-content: center; /* Center items vertically */
        align-items: center; /* Center items horizontally */
        height: 100vh; /* Set the height to fill the viewport */
        pointer-events: none;
    }
    
    .songContainer {
        display: flex;
        flex-direction: row; /* Show songs in a row */
        padding-top: 5vh;
        align-items: flex-end; /* Center items vertically */
        padding-bottom: 0vh;
        justify-content: space-evenly; /* Space items evenly */
        box-sizing: border-box;
        height: 30vh; /* Allow height to adjust based on content */
        width: 100%; /* Full width */
        overflow-y: hidden; /* Prevent vertical overflow */
        margin-left: 0vw;
        overflow: visible;
    }
        
    .songContainer2 {    
        display: flex;
        flex-direction: row; /* Show songs in a row */
        padding-top: 0vh;
        padding-bottom: 20vh;
        align-items: flex-start; /* Center items vertically */
        justify-content: space-evenly; /* Space items evenly */
        box-sizing: border-box;
        height: 30vh; /* Allow height to adjust based on content */
        width: 100%; /* Full width */
        overflow-y: hidden; /* Prevent vertical overflow */
        margin-left: 0vw;
        margin-right:0vw;
        margin-bottom: 0vh;
        overflow: visible;
    }
    
    .center-container {
        width: 100%; /* Full width on mobile */
        height: 100%;
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
        pointer-events: none;
    }
    .cd {
        box-shadow: none;
    }
    

    .fastForward {
        display: flex;
        justify-content: center; /* Center horizontally */
        /* align-items: center; Center vertically */
    
        align-items: center;
        width: 15vw;
        height: 5vh;
        background-image: url('./images/SmallTape.png');
        background-size: contain; /* Scale the image to fit the clock div */
        background-repeat: no-repeat; /* Prevent the image from repeating */
        background-position: center; /* Center the background image */
        pointer-events: auto;
    
    }
    
    .fastForward img {
        height: 35%; /* Adjust image size */
        transform: translateY(-30%); /* Adjust vertical position */
    }

    .clock {
        display: flex;
        width: 80vmin;
        height: 71vmin; /* Set a responsive height for the clock */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Shadow for depth */
        margin-right: 5vw;
        pointer-events: none;
    }
    .background-blur {
        pointer-events: none;
    }

    .video-container {
        pointer-events: none;
    }
    .video-background {
        pointer-events: auto;
    }

    .timeTape {
        width: 65vw;
        height: 7vh;
        background-image: url('images/TimeTape/nowPlaying.png');
        background-size: contain; /* Scale the image to fit the clock div */
        background-repeat: no-repeat; /* Prevent the image from repeating */
        background-position: center; /* Center the background image */
    }
    
    .song {
        position: relative; /* Allows positioning of child elements */
        background-image: url("./polaroid.png");
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Shadow for depth */
        background-position: center;
        background-size: contain; /* Keep the original size of the polaroid */
        background-repeat: no-repeat;
        width: 22vw; /* Set width for songs to fit in a row */
        height: 26.5vw; /* Let height adjust based on content */
        pointer-events: auto;
    }

    .song img {
        position: absolute; /* Position the image inside the container */
        width: 80%; /* Image fills 80% of the .song container */
        height: auto; /* Maintain aspect ratio */
        top: 5%;
        left: 10%;
        height: auto; /* Maintain aspect ratio */
    
    }
    
    .songText {
        position: absolute;
        top: 74%; /* Position text relative to the .song container */
        left: 50%;
        width: 80%; /* Text width relative to the song container */
        transform: translateX(-50%); /* Center text */
        font-family: "Mynerve";
        font-size: 1.8vw; /* Adjust font size for mobile */
        text-align: center; /* Center text alignment */
    }

    .hour {
        width: 3px;
    }
    .minute {
        width: 3px;
    }
    .temmp {
        width: 1.5px;
    }
        
    .dot {
        position: absolute; /* Position hands absolutely */
        width: 5%;
        height: 5.5%;
        bottom: 47.3%; /* Position at the center bottom */
        left: 50.9%; /* Center it horizontally */
        background-color: #222222; /* Color of the hands */
        border-radius: 50%;
        z-index: 100;
    }        
    .play {
        position: absolute;
        visibility: visible;
        background-size: contain; /* Scale the image to fit the clock div */
        background-repeat: no-repeat; /* Prevent the image from repeating */
        background-position: center; /* Center the background image */
    
        

        z-index: 900;
    }

    .play img {
        width: 30%; /* Adjust image size */
        left: 50%;
        top: 50%;
        transform: translate(130%, 95%);
        opacity: 0;
    }

}