/*The font color is defined for the entire web page.*/
body {color:black; text-align: center; }

/*This div class prevents overflow between div blocks.*/
.div { display: flow-root;}

/*The font type, font color, and background color of the styled block are defined. The background color is a radial gradient of different shades of purple.*/
#styling {font-family: verdana, "Times New Roman", serif; color: purple; background: radial-gradient(rgba(75,0,75,0.5), violet);}

/*This image class describes the characteristics of both images. Float left is used here.*/ 
.image {float: left; width: 25%; height: auto; object-fit: cover; object-position: center 20%; display: block; margin: 0px 15px 15px 0px; align-items: center; clear: both;}

/*This describes how the second picture becomes larger when you hover over it.*/
#bombay2:hover {width: 500px;}

/*This caption class describe the characteristics of both image captions.*/
.caption {float: left; width: 25%; clear: left;}

/*This describes how the second caption has a wavy underline.*/
#bombayCaption2 {text-decoration: underline; text-decoration-style: wavy;}

/*The font size and font variant are defined for the header.*/
#header {font-size: 64px; margin-top: 10px; font-variant: small-caps;}

/*The font weight, font style, and inset border are defined for the paragraph.*/
#paragraph {font-weight: bold; font-style: italic; margin-left: 50px; margin-top: -20px; border: 5px purple inset;}

/*This list class describes the characteristics of both lists and sets the list style type as none.*/ 
.list {margin-top: 40px; border-radius: 15px; display: flex; list-style-type: none; justify-content: center; gap: 30px;}

/*The transformation is rotating 90 degrees when you hover over the word.*/ 
#transform {transition: transform 1s linear;}
#transform:hover {transform: rotate(90deg);}

/*The transition is transitioning the font color from purple to gold.*/ 
#transition {transition: color 0.5s ease;}
#transition:hover {color: gold;}

/*The animation is constantly changing size in a loop.*/ 
@keyframes pulse {0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); }}
#animation {animation: pulse 3s ease-in-out infinite;}