/* General body styles */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: white;
    overflow: hidden;
}

/* Scene container */
.scene {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* Stickman (GIF) centered on screen */
.stickman {
    position: absolute;
    left: 50%;
    top: 68%;
    transform: translate(-50%, -50%);
    width: 200px;  /* Increase width */
    height: auto;  /* Maintain aspect ratio */
    z-index: 2;
}

/* Scrolling image container for the looping effect */
.scrolling-image-container {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%; /* Set to 100% of the viewport width */
    height: 100%;
    overflow: hidden;
}

/* The actual scrolling image that repeats */
.scrolling-image {
    background: url('inspo/loopbg.png') repeat-x; /* Use your uploaded image */
    height: 100%; /* Make the image take up the full height */
    width: 200%; /* Make it 200% of the viewport width to create the seamless scrolling effect */
    animation: slide 10s linear infinite; /* Slide animation for the image */
}

/* Keyframes to move the background from left to right */
@keyframes slide {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0%); /* Move the background by half of its width */
    }
}

/* Media container for play/pause and back buttons */
#media {
    display: flex;
    flex-direction: column; /* Stack the buttons vertically */
    align-items: center;
    gap: 20px; /* Space between buttons */
}

/* Play/Pause button styling */
.play-pause-btn {
    background-color: white;
    color: black;
    border: 2px solid black;
    padding: 15px 30px;
    font-size: 2rem;
    width: 80px; /* Fixed width */
    height: 80px; /* Fixed height */
    border-radius: 50%; /* Circular button */
    cursor: pointer;
    display: flex; /* Flexbox for centering the symbol */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover effect for the play/pause button */
.play-pause-btn:hover {
    background-color: #f0f0f0;
    transform: scale(1.05);
}

/* Back to Homepage button styling */
.back-home-btn {
    background-color: white;
    color: black;
    border: 2px solid black;
    padding: 15px 30px;
    font-size: 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;

}

/* Hover effect for the back button */
.back-home-btn:hover {
    background-color: #f0f0f0;
    transform: scale(1.05);
}