/* DESIGN NOTES	

fontfamily	- 

#1B8FE2		Vivid Blue     = Background
#215AAB		Dark Blue		   = Illustrated Components / link hover / Element backgrounds
#000000		Black          = Text
#333333   Grey           = Links
#FFFFFF		White     		 = Text and Background
#FEDA23   Yellow         = Buttons / Link clicks
---------------------------------------------------*/
/* Meyers Reset*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*---------------------- End of reset-------------------------- */
/*-----------------Navigation-------------------------------------*/
nav {
  display: flex;
  justify-content: center;
  height: auto;
  margin: 5px;
  padding: 5px;
  font-weight: bold;
  font-size: 1.25em;
}


.menu ul {
  display: none;
}

.menu li {
  text-align: center;
  display: inline-block;
  padding: 10px;
  margin-right: 50px;
}

a:link {
  color: #333333;
  text-decoration: none;
}

a:visited {
  color: #333333;
}

a:hover {
  color: #215AAB;
  text-decoration: none;
}

a:active {
  color: #FEDA23;
  text-decoration: none;
}

/*----------------- Page design --------------------------------------------------*/
body {
  background: #ffffff;
  color: #000000;
  font-size: 1em;
  font-family: 'Be Vietnam Pro', 'Nunito', 'Quicksand', 'Asap', sans-serif;
}

main {
  max-width: 1920px;
  min-width: 320px;
}

/*--------------------Footer-------------------------*/
footer {
  background-color: #1b8fe250;
  display: flex;
  position: sticky;
  width: auto;
  padding: 10px 50px 10px 50px;
}

.footerinfo {
  line-height: 1.5em;
  width: 100%;
  padding: 0px 150px;
  grid-template-columns: auto auto;
  align-content: center;
  justify-content: space-evenly;
  justify-items: center;
  align-items: flex-start;
  gap: 30px;
}

/*-----------------------------Typography-------------------------------*/
h1,h2,h3,h4,h5 {
  font-family: 'Amatic SC', 'Delicious Handrawn', 'Indie Flower', 'Patrick Hand', cursive;
  font-weight: 900;
}

h1 {
  font-size: 4em;
  padding: 10px 0;
}

h2 {
  font-size: 3em;
}

h3 {
  font-size: 2.75em;
  font-weight: 900;
  margin: 20px 0 0 0;
}

h4 {
  font-size: 2em;
}

h5 {
  font-size: 2em;
  margin-bottom: 15px;
}

p {
  font-size: 1.25em;
  line-height: 1.5em;
  margin: 1.2em 0;
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

ol {
  margin: 0 0 1.2em 1.2em;
  list-style: decimal;
}

/*----------------------Page Components------------------*/
a.button {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 1.25em;
  font-weight: 600;
  padding: 10px 25px;
  border-style: none;
  border-radius: 5px;
  background-color: #FEDA23;
  color: #333333;
  box-shadow: 1px 2px 1px #1d1d1d45;
  cursor: pointer;
}

a.button:hover {
  color: #383838;
}

a.button:active {
  color: #215AAB;
  text-decoration: none;
  box-shadow: 1px 2px 1px #fff;
}

hr {
  margin: 0px;
  border: 0;
  height: 25px;
  background: url("images/divider.png") 0 0;
  background-size: 600px 25px;
}

/*========================Page Design=====================================*/
/*------------------Feature section------------------------*/
#hometitle {
  padding-top: 50px;
  color: #ffffff;
  font-size: 4em;
  animation: heading1 3s ease 0s 1 normal forwards;
}

@keyframes heading1 {
  0% {
     opacity: 0;
  }

  100% {
     opacity: 1;
  }
}

#movietitle {
  color: #ffffff;
  font-size: 6em;
  font-weight: 700;
  padding: 50px;
  margin-left: 200px;
  animation: heading2 3s ease 0s 1 normal forwards;
}

@keyframes heading2 {
  0% {
     opacity: 0;
  }

  50% {
     opacity: 0;
  }

  100% {
     opacity: 1;
  }
}

#feature {
  background: #1B8FE2;
  padding: 0px 20vh;
}

#featuretext {
  font-size: 1.5em;
  color: #ffffff;
  float: right;
  display: block;
  margin: 10px 20px;
  height: 100px;
}

#mainbanner {
  width: 66%;
  margin: 0px;
}

/*---------Animated elements-----------*/
#basketball {
  margin-top: 100px;
  width: 150px;
  height: auto;
  display: block;
  animation: bounce 3s ease 3s 1 normal forwards;
}

@keyframes bounce {

  0%,  20%,  50%,  80%,  100% {
     transform: translateY(0);
  }

  40% {
     transform: translateY(-60px);
  }

  60% {
     transform: translateY(-30px);
  }
}

#hearts {
  position: absolute;
  top: 150px;
  right: 0;
  bottom: 0;
  left: 750px;
  width: 50px;
  height: auto;
  animation: shake 3s ease 0.5s 1 normal forwards;
}


@keyframes shake {
  0% {
     transform: rotate(0deg);
  }
  50% {
     transform: rotate(0deg);
  }
  60% {
     transform: rotate(15deg);
  }
  70% {
     transform: rotate(-10deg);
  }
  80% {
     transform: rotate(5deg);
  }
  90% {
     transform: rotate(-5deg);
  }
  100% {
     transform: rotate(0deg);
  }
}

/*------ section 2 of home page -----------*/
#section2 {
  height: fit-content;
  text-align: center;
  background-image: url("images/wave.svg"), url("images/balloon.png"), url("images/bball.png");
  background-repeat: no-repeat;
  background-position: bottom, top 50px right, top 75px left 75px;
  background-size: cover, 15%, 15%;
  padding: 0px 5vw;
}


#featureimg {
  margin: 0px;
  width: 33%;
}


#line1 {
  position: absolute;
  top: 1150px;
  right: 500px;
  bottom: 0;
  left: 0;
}

#line2 {
  position: absolute;
  top: 1400px;
  right: 1150px;
  bottom: 0;
  left: 0;
}

#blurb {
  color: #000;
  display: block;
  float: right;
  text-align: left;
  margin: 100px 50px 0 0;
  width: 400px;
  height: 100px;
}

/*------ section 3 of home page -----------*/
#section3 {
  text-align: center;
  height: 400px;
  background-image: url("images/"), url("images/paperplane.png"), url("images/glasses.png"), url("images/guitar.png");
  background-repeat: no-repeat;
  background-position: center, top 15px left, bottom left, bottom 70px right;
  background-size: contain, 25%, 25%, 25%;
  padding: 200px 5vw 0px 5vw;
}


#cast {
  display: grid;
  grid-template-columns: auto auto auto;
  align-content: center;
  justify-content: space-around;
  justify-items: center;
  align-items: center;
  gap: 90px;
  margin: 50px auto;
}

#crew {
  display: grid;
  grid-template-columns: auto auto;
  align-content: center;
  justify-content: space-around;
  justify-items: center;
  align-items: center;
  gap: 90px;
  margin: 50px auto;
}

figure {
  padding: 10px;
  border: 3px solid #000;
}

figcaption {

  padding-top: 5px;
  text-align: center;
  font-size: 1em;
}

/*--------------------Generic Section-------------------------*/

.basic {
  min-height: 500px;
  padding: 50px 10vw 50px 10vw;
  background-image: url(images/paperbg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/*================Showtimes page=============================*/
/*----------Showtime time table------------*/
#showtimetable {
  display: flex;
  justify-content: flex-start;
  font-size: 1.25em;
  border-bottom: #333333;
  margin-bottom: 50px;
}

.showtime-item {
  color: #fff;
  padding: 10px;
  margin-right: 10px;
  background-color: #215AAB;
  border-radius: 7px;
}

#filmposter {
  display: block;
  float: right;
  padding: 10px;
}

/*-------------Ticket selector----------------*/
#tickettable {
  display: block;
  border: #215AAB solid 5px;
  border-radius: 10px;
  background-color: #fff;
}

.ticketinfo {
  font-size: 1.5em;
  text-align: left;
  display: grid;
  grid-template-columns: 100px 100px 150px 100px;
  gap: 10px;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

.minus {
  color: #fff;
  background-color: #b5b5b5;
  border-radius: 20px;
  border-color: #b5b5b5;
  cursor: pointer;
  border-style: solid;
}

.plus {
  color: #fff;
  background-color: #215AAB;
  border-radius: 10px;
  border-color: #215AAB;
  cursor: pointer;
  border-style: solid;

}

input {
  font-family: 'Be Vietnam Pro', 'Nunito', 'Quicksand', 'Asap', sans-serif;
  font-size: 0.75em;
  border: #000 solid 2px;
}

/*------------ Venue Details--------------*/
#venueinfo {
  width: 100%;
  margin: 50px 0px;
  height: 500px;
}

iframe {
  float: right;
}

#venuedetails {
  float: left;
  padding: 10px;
}

/*====================== Synopsis Page ========================*/
#filmframe1 {
  display: block;
  float: right;
  margin-left: 25px;
  margin-top: 25px;
  border: #215AAB solid 5px;
}

#filmframe2 {
  display: block;
  float: left;
  margin-right: 25px;
  margin-top: 25px;
  border: #215AAB solid 5px;
}

/*====================== Media Queries========================*/
/*-------------Basic page components-----------------------*/

@media (max-width: 850px) {
  main {
     margin: 0 auto;
  }
}

@media (max-width: 550px) {
  nav {
     font-size: 1em;
  }
}

@media (max-width: 550px) {
  .menu li {
     padding: 10px;
     margin: 0;
  }
}

@media (max-width: 850px) {
  h1 {
     margin-top: 10px;
     font-size: 2.5em;
     text-align: center;
  }
}

@media (max-width: 850px) {
  h2 {
     margin-top: 10px;
     font-size: 2em;
     text-align: center;
  }
}

@media (max-width: 850px) {
  .basic {
     min-height: fit-content;
     background-image: url(images/paperbg.png);
     background-repeat: repeat-y;
     background-position: center;
     background-size: contain;
  }
}

@media (max-width: 960px) {
  footer {
     padding: 0px 5px;
     flex-wrap: wrap;
     justify-content: center;
  }
}

@media (max-width: 400px) {
  footer {
     padding: 0px 5px;
     flex-wrap: wrap;
     justify-content: center;
  }
}

@media (max-width: 960px) {
  .footerinfo {
     line-height: 1.5em;
     padding: 0px 5px;
     width: auto;
  }
}

@media (max-width: 400px) {
  .footerinfo {
     line-height: 1.5em;
     padding: 0px 5px;
     width: auto;
  }
}

/*--------------Homepage-------------*/
@media (max-width: 1560px) {
  #hometitle {
     padding-top: 25px;
     font-size: 3em;
  }
}

@media (max-width: 850px) {
  #hometitle {
     padding: 0px;
     margin-top: 10px;
     font-size: 2.5em;
     text-align: center;
  }
}

@media (max-width: 1536px) {
  #movietitle {
     padding: 10px;
     margin: 25px;
     margin-left: 200px;
     font-size: 5em;
  }
}

@media (max-width: 850px) {
  #movietitle {
     padding: 10px;
     margin: 50px;
     font-size: 3em;
     text-align: center;
  }
}

@media (max-width: 850px) {
  h3 {
     font-size: 2.5em;
     text-align: center;
     line-height: 1em;
     margin-bottom: 15px;
  }
}

@media (max-width: 1200px) {
  #feature {
     padding: 20px;
  }
}

@media (max-width: 1536px) {
  #featuretext {
     font-size: 1em;
  }
}

@media (max-width: 850px) {
  #featuretext {
     float: none;
     display: flex;
     flex-wrap: nowrap;
     flex-direction: column;
     align-items: center;
     margin: 0 auto;
     margin-top: 25px;
  }
}

@media (max-width: 1400px) {
  #basketball {
     display: none;
  }
}

@media (max-width: 1920px) {
  #hearts {
     position: absolute;
     top: 225px;
     right: 0;
     bottom: 0;
     left: 925px;
     width: 50px;
     height: auto;
  }
}

@media (max-width: 1536px) {
  #hearts {
     position: absolute;
     top: 150px;
     right: 0;
     bottom: 0;
     left: 750px;
     width: 50px;
     height: auto;
  }
}

@media (max-width: 1024px) {
  #hearts {
     display: none;
  }
}

@media (max-width: 850px) {
  #mainbanner {
     width: 100%;
     margin-top: 50px;
  }
}

@media (max-width: 850px) {
  #section2 {
     padding: 10px;
     background-position: bottom, top 330px right, top 330px left;
     background-size: cover, 25%, 25%;

  }
}

@media (max-width: 850px) {
  #featureimg {
     width: 66%;
     margin-top: 5px;
  }
}

@media (max-width: 1536px) {
  #line1 {
     position: absolute;
     top: 900px;
     right: 500px;
     bottom: 0;
     left: 0;
  }
}

@media (max-width: 1536px) {
  #line2 {
     position: absolute;
     top: 1125px;
     right: 1150px;
     bottom: 0;
     left: 0;
  }
}

@media (max-width: 1480px) {
  #line1 {
     display: none;
  }
}

@media (max-width: 1480px) {
  #line2 {
     display: none;
  }
}

@media (max-width: 850px) {
  #blurb {
     width: auto;
     text-align: center;
     margin: 50px 25px;
  }
}

@media (max-width: 400px) {
  #blurb {
     text-align: center;
     margin: 5px 5px 150px 0;
  }
}

@media (max-width: 850px) {
  #section3 {
     height: 300px;
     background-repeat: no-repeat;
     background-position: center, top 15px left, bottom left, bottom 50px right;
     background-size: contain, 50%, 30%, 30%;
     padding: 150px 5vw 0px 5vw;
  }
}

@media (max-width: 1050px) {
  #cast {
     grid-template-columns: 1fr;
     gap: 20px;
  }
}

@media (max-width: 1050px) {
  #crew {
     grid-template-columns: 1fr;
     gap: 20px;
  }
}
/*--------------Showtime Page-------------*/

@media (max-width: 850px) {
  .showtime-item {
     font-size: 0.75em;
  }
}

@media (max-width: 1080px) {
  #filmposter {
     padding: 5px;
  }
}

@media (max-width: 850px) {
  #filmposter {
     float: none;
     margin: 0 auto;
     padding: 5px;
  }
}

@media (max-width: 1500px) {
  #venueinfo {
     width: 800px;
     margin: 0 auto;
     margin-bottom: 275px;
  }

  iframe {
     width: 800px;
     float: none;
  }

  #venuedetails {
     margin: 0 auto;
  }
}

@media (max-width: 1080px) {
  #venuetinfo {
     width: 600px;
  }

  iframe {
     width: 550px;
     float: none;
  }
}

@media (max-width: 850px) {
  #venueinfo {
     width: 500px;
     margin-bottom: 300px;

  }

  iframe {
     width: 500px;
     margin: 5px;
  }

  #venuedetails {
     margin: 0 auto;
  }
}

@media (max-width: 600px) {
  #venueinfo {
     width: 300px;
     margin-bottom: 100px;

  }

  iframe {
     width: 250px;
     height: auto;
     margin: 5px;
  }

  #venuedetails {
     margin: 0 auto;
  }
}

@media (max-width: 650px) {
  .ticketinfo {
     font-size: 1.5em;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 10px;
  }
}

@media (max-width: 480px) {
  .ticketinfo {
     font-size: 1em;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 10px;
  }
}
/*--------------Synopsis Page-------------*/
@media (max-width: 1000px) {
  #filmframe1 {
     width: 80vw;
     display: block;
     float: none;
     margin: 25px 0;
  }

  #filmframe2 {
     width: 80vw;
     display: block;
     float: none;
     margin: 25px 0;
  }
}