/*The font color and other styles are defined for the entire web page.*/
*{margin: 0; padding: 0; list-style: none; text-decoration: none; color: white;}

/* This makes the scroll feature smooth.*/
html {scroll-behavior: smooth;}

/* This describes the font type of the web page.*/
body {font-family: Baskerville, "Times New Roman", serif;}

/* This centers the main content.*/
main {width: 100%; max-width: 1000px; margin: 0 auto; padding: 20px 0;}

/* These all describe how the navigation menu is created using Flexbox by centering and arranging the title and navigation links.*/
.header {width: 100%; min-height: 100px; display: flex; align-items: center; background: rgba(30,185,221,0.8);}

.innerheader {width: 100%; max-width: 1000px; height: 100%; display: flex; margin: 0 auto; align-items: center; justify-content: space-between; flex-wrap: wrap;}

/* This makes the header centered.*/
.title {display: flex;}

.title h1 {display: block; font-size: 32px; font-weight: 200; font-variant: small-caps;}

.title h1 span {font-weight: 900;}

/* This makes the navigation links centered and aligned in a row.*/
.navigation {display: flex; align-items: center;}

.navigation li {display: block; padding: 0px 20px;}

.navigation li a {display: block;}

/* This makes sure that the Synopsis section contains its floated image so that it won't spill over into the next section.*/
.synopsis {clear: both;}

/* This describes the dimensions of the Synopsis and Where To Watch images.*/
.officialimage {width: 100%; height: auto; object-fit: cover; object-position: center 20%; display: block;}

/* This describes the how the image will be enlarged when you hover over them.*/
.imagehover {transition: transform 0.3s ease;}
.imagehover:hover {transform: scale(1.1);}

/* This describes how the image in Synopsis is floated left and sized down.*/
.synopsis figure {float: left; width: 25%; margin: 0px 15px 15px 0px;}

/* This describes how the image in Where to Watch is floated right and sized down.*/
.watch figure {float: right; width: 25%; margin: 0px 15px 15px 0px;}

/* This describes how the image captions in Synopsis and Where to Watch are aligned.*/
.synopsis figcaption, .watch figcaption {text-align: center; margin-top: 6px;}

/* This describes the margin spacing for each paragraph.*/
.paragraph {margin-top: 50px;}

/* This describes the background boxes that surround each section.*/
.synopsis, .oldparty, .newparty , .watch {background-color: rgba(30, 185, 221, 0.8); border-radius: 8px; padding: 20px; margin-bottom: 30px; text-align: center; display: flow-root;}

/* This describes the margin spacing for each heading.*/
.synopsis h2, .oldparty h2, .newparty h2, .watch h2 {margin-bottom: 10px;}

/* This describes how the images in the gallery are spaced using CSS Grid.*/
.gallery {display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-gap: 15px; padding: 15px; border-radius: 8px;}

/* This describes how the images will enlarge when you hover over them.*/
.gallery figure {display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.3s ease;}

.gallery figure:hover {transform: scale(1.1);}

/* This describes the image dimensions.*/
.gallery figure img {width: 100%; max-width: 200px; height: 100%; object-fit: cover; display: block; border-radius: 4px;}

/* This describes the image captions alignment.*/
.gallery figcaption {margin-top: 10px; text-align: center;}

/* This describes the font styling for the credits.*/
.credits {font-size: 0.7rem; color: rgba(255, 255, 255, 0.6); margin-top: 2px; font-style: italic;}

/* This describes the styling for the Return to Top link.*/
#return {text-align: center; margin-top: 10px;}

#return a {padding: 8px 20px; display: inline-block; background-color: rgba(30, 185, 221, 0.8); border-radius: 20px;}

/*This describes the color of the link when you hover over the link.*/
a:hover {color: gold;}

/*This describes the sizing for mobile screens. Here, the title and navigation links are shrunk. The Synopsis and Where to Watch images will now be on top of their paragraphs not floated on the side. Additionally, the gallery will be 1 column for ease in viewing.*/
@media screen and (max-width: 480px) {
  /*Sized down*/
	.title h1 {font-size: 20px;}
  
  /*Sized down*/
  .navigation li a {font-size: 14px;}
  
  /*Smaller padding so that nav list items are closer*/
  .navigation li {padding: 5px 8px;}
 	
  /*Margin for bottom only now*/
  .synopsis figure, .watch figure {float: none; width: 100%; margin: 0 0 15px 0;}
  
 	/*Now one column*/
  .gallery {grid-template-columns: 1fr;}
  
  /*Goes from 200px to 220px since more space*/
  .gallery figure img {max-width: 220px;}
  
  /*More padding to not touch edge of screen*/
  main {padding: 15px 10px;}
}