body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    animation: rainbow-animation 10s infinite;
}

.content {
    width: 80%; /* Adjust width as needed */
}

.adventure-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 20px; /* Centers the image and adds space below */
}

input[type="text"] {
    width: 100%; /* Makes input box wider */
    padding: 15px; /* Makes input box taller */
    margin-bottom: 20px; /* Adds space below the input box */
}

button {
    padding: 10px 20px;
    font-size: 1.2em;
}

body {
    animation: rainbow-animation 10s infinite;
}

@keyframes rainbow-animation {
    0% { background-color: red; }
    14% { background-color: orange; }
    28% { background-color: yellow; }
    42% { background-color: green; }
    56% { background-color: blue; }
    70% { background-color: indigo; }
    84% { background-color: violet; }
    100% { background-color: red; }
}
.adventure-image {
    width: 50%; /* Adjust this value to change the width */
    height: auto; /* This will maintain the aspect ratio */
    display: block;
    margin-left: auto;
    margin-right: auto; /* These two lines center the image horizontally */
}

#audio-player {
    position: fixed;
    top: 10px;
    left: 0;
    width: 100%;
    bottom: auto;
}