@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap'); 
 
 button {
    border-radius: 15px;
    border: 1px solid plum;
    cursor: pointer;
    color: purple;
    font-weight: 600;
    font-size: 50px;
    padding: 30px;
    position: relative;
    margin: 2%;
  }


  #wellerman {
    position: absolute;
    left: 2%;
    margin-left: 1px !important; 
    top: 10%;
}

#drunk {
    position: absolute;
    right: 2%;
    margin-right: 1px !important; 
    top: 10%;
}

#man-down {
    position: absolute;
    left: 2%;
    margin-left: 1px !important; 
    top: 32%;
}

#leave-her {
    position: absolute;
    right: 2%;
    margin-right: 1px !important; 
    top: 32%;
}

#shanty1 {
    position: absolute;
    left: 2%;
    margin-left: 1px !important; 
    bottom: 1%;
}

#shanty2 {
    position: absolute;
    right: 2%;
    margin-right: 1px !important;
    bottom: 1%;
}

div.volume-slider {
    position: absolute;
    bottom: auto; /* Remove the fixed bottom positioning */
    bottom: 2%;
    left: 50%; /* Position the div at 50% from the left */
    transform: translate(-50%, -50%); /* Center the div horizontally and vertically */
    font-size: 50px;
    font-family: 'Courier New', Courier, monospace;
    text-align: center; /* Ensure content inside the div is centered */
}

h1 {
    text-align: center;
    font-size: 38px;
    font-family: "Geist Mono", monospace;
}

#image-container {
    position: absolute;
    top: 50%; /* Position the container at the vertical center */
    left: 50%; /* Position the container at the horizontal center */
    width: 100%; /* Full width of the parent container */
    height: 100%; /* Full height of the parent container */
    -webkit-user-drag: none;
}

#moving-image {
    position: absolute;
    width: 50%; /* Use percentage for responsiveness */
    height: auto;
    display: none; /* Initially hidden */
    animation: move-around 5s ease-in-out infinite; /* Apply the animation */
    -webkit-user-drag: none;

}

/* Keyframes for movement */
@keyframes move-around {
    0% {
        transform: translate(-50%, -50%) translate(0, 0); /* Centered at 0,0 */
    }
    25% {
        transform: translate(-50%, -50%) translate(5%, -5%); /* Move 5% to the right and upwards */
    }
    50% {
        transform: translate(-50%, -50%) translate(-5%, 5%); /* Move 5% to the left and downwards */
    }
    75% {
        transform: translate(-50%, -50%) translate(3%, 3%); /* Move slightly to the right and down */
    }
    100% {
        transform: translate(-50%, -50%) translate(0, 0); /* Return to the center */
    }
}

html {
    overflow: hidden;

}