style.css

/* Styles for the body element */
body {
    text-align: center; /* Center aligns the text content within the body */
    font-family: Arial, sans-serif; /* Sets the font-family for the text */
    margin: 0; /* Removes margin around the body */
    padding: 0; /* Removes padding around the body */
    height: 100vh; /* Sets the height of the body to 100% of the viewport height */
    display: flex; /* Displays the body content as a flex container */
    align-items: center; /* Centers the content vertically */
    justify-content: center; /* Centers the content horizontally */
    background-color: #3498db; /* Sets the background color to a blue shade */
    transition: background-color 0.5s ease; /* Applies a smooth transition effect for background color changes */
}

/* Styles for the button element */
button {
    padding: 10px 20px; /* Adds padding to the button content */
    font-size: 16px; /* Sets the font size of the button text */
    cursor: pointer; /* Changes the cursor to a pointer on hover */
    border: none; /* Removes the button border */
    background-color: #2c3e50; /* Sets the background color of the button to a dark blue shade */
    color: #fff; /* Sets the text color of the button to white */
    border-radius: 5px; /* Adds rounded corners to the button */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow effect to the button */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Applies smooth transition effects for background color and transform changes */
}

/* Styles for the button element when hovered */
button:hover {
    background-color: #34495e; /* Changes the background color of the button to a darker shade on hover */
    transform: scale(1.1); /* Enlarges the button slightly on hover */
}

/* CSS Animation keyframes for scaling and fading effect */
@keyframes scaleAndFade {
    0% {
        transform: scale(1); /* Initial scale value for the animation */
        opacity: 1; /* Initial opacity value for the animation */
    }
    50% {
        transform: scale(1.2); /* Midway scale value for the animation */
        opacity: 0.8; /* Midway opacity value for the animation */
    }
    100% {
        transform: scale(1); /* Final scale value for the animation */
        opacity: 1; /* Final opacity value for the animation */
    }
}

/* Class for applying the scaling and fading animation */
.change-background-animation {
    animation: scaleAndFade 0.5s ease; /* Applies the defined keyframe animation with a 0.5s duration and ease timing function */
}