/*The font color and background color is defined for the entire web page.*/
body {color:black; text-align: center; background: rgba(30,185,221,0.8);}

/*This wrapper class prevents overflow between blocks. It defines the font color, max width, and secondary background color. Padding is used here as well.*/
.wrapper {font-family: verdana, "Times New Roman", serif; color: darkblue; display: flow-root; margin: 0 auto; max-width: 600px; background: rgba(30,90,221,0.8); border-radius: 30px; padding: 10px;}

/*This card class defines the background card color, border width, and border color.*/
.card {background: white; padding: 10px; border: 5px blue inset;}

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

/*This navigationBar class defines the bottom margin length.*/
.navigationBar {margin-bottom: 30px;}

/*This navigationBar class defines the list style type and uses Flexbox to arrange the links horizontally.*/
.navigationBar ul {margin-top: 10px; list-style-type: none; justify-content: center; gap: 50px; display: flex;}

/*This paragraph class defines the font weight and font style.*/
.paragraph {font-weight: bold; font-style: italic; margin-bottom: 30px;}

/*This describes margin spacing.*/
#p1 {margin-bottom: 15px;}
#p2, #p3 {margin-bottom: 5px;}

/*This paragraph class uses Flexbox to arrange the cards horizontally.*/
.sidebyside {display: flex; gap: 20px; margin-bottom: 30px;}

/*This image class describes the characteristics of the image. 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; border: 5px blue inset; transition: color 0.5s ease, width 0.3s ease;}

/*This caption class describe the characteristics of the image caption.*/
.caption {float: left; width: 21%; margin-bottom: 30px; clear: left; transition: color 0.5s ease, width 0.3s ease;}

/*This describes how both the image and caption become larger when you hover over it. It will also change border color to gold.*/
#figure:hover .image {width: 300px; border-color: gold;}
#figure:hover .caption {width: 300px; border-color: gold;}

/*This describes how the paragraph stays to the right of the image.*/
#p4 {margin-top: 100px; display: flex;}

/*This describes how the paragraph stays to the bottom of the image.*/
#email {margin-bottom: 30px; clear: left;}

/*These describe the colors of the links when you view the link on the page, visit the link, or hover over the link*/
a:link {color: darkblue;}
a:visited {color: purple;}
a:hover {color: orange;}