body {
    background-image: url('edited-watercolor-rainbow-background.jpg');
    background-size: cover; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-color: #F3ECE5;
    font-family: testfont;
    margin:0;
}

@font-face {
    font-family: testfont;
    src: url("AmericanCaptain-MdEY.otf") format("opentype");
}

#startButtons button{
    transition: transform 0.05s;
}
#startButtons button:active {
    transform: scale(0.9);
}

#exit{
    transition: transform 0.05s;
}
#exit:active {
    transform: scale(0.9);
}

#restart{
    transition: transform 0.05s;
}
#restart:active {
    transform: scale(0.9);
}

#randomButton {
    position: absolute;
    background-color: transparent; 
    z-index: 3;
    opacity: 0.8;
    border-radius: 50%;
    color: #F3ECE5; 
    border: none;
    display: none;
    transition: background-color 0.3s, transform 0.1s;
}

/* Add a click effect */
#randomButton:active {
    transform: scale(0.75);
}

#animalpics {
    width: inherit;
    height: inherit;
}

#fakeButton {
    position: absolute;
    opacity: 0.8;
    background-color: transparent;
    z-index: 3;
    border-radius: 50%; 
    color: #F3ECE5; 
    border: none;
    display: none;
}

/* Define the keyframes for the vibration effect */
@keyframes vibration {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-2px, -2px); }
    20% { transform: translate(2px, 2px); }
    30% { transform: translate(-2px, -2px); }
    40% { transform: translate(2px, 2px); }
    50% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    70% { transform: translate(-2px, -2px); }
    80% { transform: translate(2px, 2px); }
    90% { transform: translate(-2px, -2px); }
    100% { transform: translate(0, 0); }
}

/* Apply the vibration animation to the button when clicked */
#fakeButton:active {
    animation: vibration 0.3s ease infinite; /* Adjust the duration and easing as needed */
}

#game {
    display: none;
}

#timer {
    color: #438186;
    text-align: center;
    position: sticky;
}

#gameplayAverage {
    text-align: center;
    position: sticky;
}

#colorText {
    text-align: center;
    position: sticky;
    z-index: 3;
}

#winScreen {
    display: none;
    background-color: #438186;
    position: fixed;
    font-size: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 10px;
    z-index: 2; 
}