body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
text-align: center;
}
h1 {
margin-top: 50px;
color: #333;
}
.game-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 50px;
}
.button-container {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.button {
width: 100px;
height: 50px;
margin: 0 10px;
border-radius: 5px;
box-shadow: 0 2px 0 #888;
background-color: #DDD;
transition: all 0.1s ease-in-out;
}
.button:active {
box-shadow: none;
transform: translateY(2px);
}
#green-button {
background-color: #1DC72F;
}
#red-button {
background-color: #E53434;
}
.result-container {
display: flex;
flex-direction: column;
align-items: center;
}
.result {
font-size: 30px;
margin-bottom: 20px;
}
#correct {
color: #1DC72F;
}
#incorrect {
color: #E53434;
}
#percentage {
color: #333;
}

Button Guessing Game

Instructions: Try to predict which button will light up next, one red and one green. Click on the button you
think will light up next. A large green bold word across a large section above the game will represent the
notification of a correct answer. A large red word Saying Incorrect, will show the user they picked incorrectly.
A tally of correct guesses and incorrect guesses will be kept track of below the game. Good luck!