/*The background color, font type, and font color are defined for the entire web page*/
body {
  background-color: rgb(22, 100, 245);
  font-family:garamond;
  color:black;
}  

/*These describe the characteristics of the title banner*/
#title {width: 750px; padding: 20px; margin-right: auto; margin-left: auto; margin-top: 2px; margin-bottom: 10px; background-color: rgba(255, 255, 255, 0.75); font-size: 72px; z-index: 999; text-align: center; border-radius: 15px;}

/*These describe the characteristics of the navigation banner*/
#navigationBar {width: 750px; padding: 20px; margin-right: auto; margin-left: auto; margin-top: 15px; background-color: rgba(255, 255, 255, 0.75); border-radius: 15px; display: flex; list-style-type: none; justify-content: space-between;}

/*These describe the characteristics of the combined banner*/
#mainContent {width: 750px; padding: 20px; margin-right: auto; margin-left: auto; margin-top: 10px; background-color: rgba(255, 255, 255, 0.75); border-radius: 15px;}
#video {width: 350px; height: auto; object-fit: cover; object-position: center 20%; display: block; margin: 0 auto;}
#fishCaption {margin-top: 10px; text-align: center;}
/*The list-style-image decribes the type of custom gradient in place of bullet points*/
#listofpets, #listofpets ul, #listOfFunFacts {list-style-image: linear-gradient(to right, gold, blue); padding-left: 20px;}

/*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;}