body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #fff; }
@keyframes changeColorAndSize {
    0% { background-color: #e91e63; font-size: 14px; }
    50% { background-color: #9c27b0; font-size: 24px; }
    100% { background-color: #e91e63; font-size: 14px; }
}
.banner {
    width: 100%;
    padding: 20px;
    text-align: center;
    color: white;
    font-weight: bold;
    animation: changeColorAndSize 4s infinite;
    margin-bottom: 40px;
}
.boxes-container { display: flex; justify-content: space-around; align-items: center; }
.box { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.box1 { border: 3px solid red; }
.box1 img { width: 100%; height: 100%; object-fit: cover; }
@keyframes changeImage {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}
.box1 img { animation: changeImage 3s infinite; }
.box2 { border: 2px dashed #03a9f4; border-radius: 30px; background: #00e5ff; color: #ffeb3b; }
.box3 { border: 2px dotted #00bcd4; border-radius: 30px; background: #00e5ff; color: #ffeb3b; }
.box4 { background: #00838f; color: #ffeb3b; }
@keyframes rotateClockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.box4 { animation: rotateClockwise 5s linear infinite; }