#loadingSpinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    margin-bottom: -300px;
}

#loadingSpinner img {
    width: 200px; /* Adjust the size of the loading spinner */
}

h1 {
    color: #5b3bac;
    font-family: Futura,Trebuchet MS,Arial,sans-serif; 
    font-size: 42px;
}

h2 {
    color: #94225b;
    font-size: 40px;
    font-family: Futura,Trebuchet MS,Arial,sans-serif; 
}

body {
    background-color: #f6ebc7;
    color: #4d372d;
    text-align: center;
}

#animalImage {
    height: 300px;
    width: auto;
    border: 10px solid transparent; /* Set border to transparent initially */
    border-radius: 50px;
}

p {
    font-size: 1.2em;
    margin: 12px 0;
    font-family: Futura,Trebuchet MS,Arial,sans-serif; 
    font-weight: bold;

}

p.animal-fact {
    white-space: pre-line;
    max-width: 400px;
    font-size: 20px;
    margin: 10px auto; /* Updated to center the paragraph */
    font-family: Futura,Trebuchet MS,Arial,sans-serif; 
    font-weight: bold;
    text-align: center;
}


p.animal-name {
    font-size: 30px;
    font-weight: bold;
    font-family: Futura,Trebuchet MS,Arial,sans-serif; 
}

.another-button {
    font-family: Futura,Trebuchet MS,Arial,sans-serif; 
    font-size: 20px;
    padding: 10px;
    background-color: #ffd8bf;
    border: solid 6px rgb(224, 149, 235);
    border-radius: 10px;
    cursor: pointer;
    margin: 10px;
    color: rgb(72, 58, 19);
}

.animal-button {
    font-family: Futura,Trebuchet MS,Arial,sans-serif; 
    background-color: #e7b6e1; /* Choose your desired color for animal buttons */
    color: rgb(68, 66, 66); /* Text color for better visibility */
    border: solid 8px rgb(255, 255, 255);
    font-size: 20px;
    font-weight: bold;
    border-radius: 20px;
    padding: 5px 15px 5px 15px;
    cursor: pointer;
    margin: 5px 5px 5px 5px;
}

.boring-button {
    font-family: Futura,Trebuchet MS,Arial,sans-serif; 
    background-color: #c4d8de; /* Choose your desired color for animal buttons */
    color: rgb(68, 65, 65); /* Text color for better visibility */
    border-radius: 10px;
    padding: 10px 20px;
    border: solid 6px rgb(224, 149, 235);
    font-size: 14px;
    cursor: pointer;
    margin: 10px;
}

.button-container {
    margin-top: 5px; /* Adjust the margin as needed */
}


/* Media query for screens with a maximum width of 600px (adjust as needed) */
@media only screen and (max-width: 600px) {
    h1 {
        font-size: 24px; /* Adjust the font size for smaller screens */
    }

    h2 {
        font-size: 20px; /* Adjust the font size for smaller screens */
    }

    /* Example: Make buttons touch-friendly */
    .boring-button, .another-button, .animal-button {
        padding: 5px;
        margin: 5px;
    }

    p.animal-fact {
        white-space: pre-line;
        max-width: 400px;
        font-size: 14px;
        margin: 10px auto; /* Updated to center the paragraph */
        text-align: center;
        font-weight: normal;
    }
    
    /* Well Done, Oooh try again */
    p.animal-name {
        font-size: 14px;
        font-weight: bold;
    }
}