/* Set background color for whole page */
body {
    background-color: orange;
}

/* Element Selector for <h1> */
h1 {
    color: darkblue;       /* Change text color */
    text-align: center;    /* Center the heading */
    font-family: Arial, sans-serif; /* Set font */
}

/* Element Selector for <p> */
p {
    font-size: 16px;       /* Set font size */
    color: #333333;        /* Dark gray color for text */
    line-height: 1.5;      /* Add space between lines */
    text-align: justify;   /* Justify text alignment */
}

/* Class Selector for styling the image container */
.jello-layout {
    text-align: center;    /* Center the image */
    margin-top: 20px;      /* Add space above the image */
    animation: jello 1s ease-in-out infinite; /* Apply Jello effect */
}

/* ID Selector for styling the footer section */
#footer {
    text-align: center;    /* Center the footer text */
    font-size: 14px;       /* Smaller font size */
    margin-top: 30px;      /* Add space above the footer */
    color: gray;           /* Set footer text color */
}

/* Keyframes for Jello Layout animation */
@keyframes jello {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1) rotate(-5deg);
    }
    50% {
        transform: scale(1) rotate(5deg);
    }
    75% {
        transform: scale(1.1) rotate(-5deg);
    }
    100% {
        transform: scale(1);
    }
}