@import url('https://fonts.googleapis.com/css?family=Special+Elite');

/* Global */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* CSS variables */
:root {
  --blue: #77c4d3;
  --dark: #201f1f;
  --light: #f9ede3;
  --green: #1e6157;
  --yellow: rgba(246, 247, 146, 0.9);
  --red: #ea2e49;
}

/* Utilities */
.hide {
  display: none;
}

html {
  background: #baf9f9;
  padding: 5%;
}

body {
  background: var(--blue);
  color: var(--dark);
  font-family: 'Poppins', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.page-wrapper {
  z-index: 2;
  position: relative;
}

/* Header */
header {
  text-align: center;
  margin-top: -45px;
}

header .banner {
  background-color: var(--yellow);
  font-size: 1.3em;
  font-weight: bold;
  padding: 0.75em 1em;
  transform: rotate(-2deg);
  margin-top: -15px;
}

/* Sidebar with search form & search history */
aside {
  background-color: var(--yellow);
  padding: 5%;
  min-height: 75%;
  margin-top: 5em;
}

#search-button {
  transition: 0.5s;
  background: linear-gradient(90deg, var(--c1, #eeaeca), var(--c2, #94bbe9) 51%, var(--c1, #eeaeca)) var(--x, 0)/ 200%;
  border: 0;
  color: rgb(73, 7, 132);
  font-family: 'Special Elite', cursive;
  font-size: larger;
  box-shadow: 0 0 20px #eee;
}

#search-button:hover {
  --x: 100%;
}

input[type=text] {
  background-color: white;
  background-image: url('../images/icons8-search-20.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}

.search-history-btn:hover {
  background: var(--blue);
}

/* Headings */
h1 {
  background: #ea2e49;
  color: #fff;
  display: inline-block;
  padding: 0.5em 1em;
}

h2 {
  font-size: 4em;
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.2em;
  text-align: center;
  margin-bottom: .5em;
}

h3 {
  background: #ea2e49;
  color: #fff;
  display: inline-block;
  padding: 30px;
}

#movie-info {
  padding: 50px;
}

/* Movie section - Title, Poster image, release date, runtime, genre, overview & quote */
#movie-data {
  color: #333;
  margin-right: 0;
  padding: 5% 0% 5% 5%;
}

.movie-poster {
  width: 50%;
}

.overview {
  font-weight: 300;
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.5em;
  padding: 0.5em 0;
  text-align: center;
  margin: 2em 0;
}

#movie-quote {
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  margin: 10px -90px 50px 0;
  padding: 5% 15%;
  font-size: 4em;
  font-family: 'Special Elite', cursive;
}

#movie-quote p {
  font-weight: 100;
  font-size: 2rem;
  max-width: 600px;
  line-height: 1.4;
  position: relative;
  margin: 0;
  padding: .5rem .5rem .5rem 5.5rem;
}

#movie-quote p:before,
#movie-quote p:after {
  position: absolute;
  color: var(--red);
  font-size: 8rem;
  width: 4rem;
  height: 4rem;
}

#movie-quote p:before {
  content: '“';
  left: -1rem;
  top: -2rem;
}

#movie-quote p:after {
  content: '”';
  right: -3rem;
  bottom: 1rem;
}

/* YouTube video */
#youtube-trailer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-frame {
  margin-left: 8px
}

/* Other films carousel */
#carousel-header {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.carousel-poster {
  /*max-width: 20%;
  max-height: auto;*/
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 65%;
}

/* Footer */
footer {
  background-color: var(--yellow);
}

footer p {
  margin-bottom: 0;
}

footer a {
  color: var(--blue);
}

footer a:hover {
  color: #ccb5f0;
}


/* Search history accordion */
.accordion {
  display: none;
}

.search-accordion {
  transition: 0.5s;
  background: linear-gradient(90deg, var(--c1, #eeaeca), var(--c2, #94bbe9) 51%, var(--c1, #eeaeca)) var(--x, 0)/ 200%;
  padding: 0;
  margin: 0;
  text-align: right;
  /* Align text to the right */
  color: rgb(73, 7, 132);
  box-shadow: 0 0 20px #eee;
  font-family: 'Poppins', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.accordion-button {
  padding-left: 10px;
  /* Adjust the left padding to move the arrow to the left */
  margin: 0;
  /* Remove default margin */
  padding-right: 20px;
}

.accordion-item {
  margin: 0;
  /* Remove default margin */
}

.accordion-body {
  padding: 5px;
  /* Adjust padding for less space above and below the text */
  background: rgba(204, 181, 240, 0.9);
}

/* Add purple sidebar as pseudo-element as for presentation only */
.page-wrapper::after {
  content: '';
  background: rgba(204, 181, 240, 0.9);
  bottom: 0;
  left: 0;
  position: fixed;
  top: 0;
  width: 30%;
  z-index: -1;
}

/* Media queries */
@media (max-width: 1018px) {
  #history2 {
    display: none;
  }

  .accordion {
    display: block !important;
  }
}

@media only screen and (max-width: 1000px) {
  header {
    margin-top: 0;
    position: absolute;
    top: -20px;
    left: 20%;
  }

  header h1 {
    font-size: 2em;
    width: 100%;
  }

  aside {
    margin-top: 7em;
  }

  h2 {
    font-size: 3em;
    ;
  }

  .page-wrapper::after {
    display: none;
  }

  #movie-quote {
    margin: 0;
  }

  #movie-quote p {
    padding: 5%;
  }

  #movie-quote p:before {
    left: -4rem;
  }

  #movie-info {
    padding: 10px;
  }

  .row {
    justify-content: center;
  }
}

@media only screen and (max-width: 768px) {
  header {
    top: -20px;
    left: 0;
  }

  header h1 {
    font-size: 1.5em;
  }

  .page-wrapper::after {
    display: none;
  }

  .video-frame {
    width: 448px;
    height: 273px;
  }

  #movie-info {
    padding: 0px;
  }

  #movie-data {
    text-align: center;
  }

  .movie-poster {
    width: 100%;
    padding-bottom: 20px;
  }
}

@media only screen and (max-width: 576px) {
  header {
    top: -20px;
    left: 0;
  }

  header h1 {
    font-size: 1.5em;
  }

  aside {
    width: 100%;
  }

  .video-frame {
    width: 403.2px;
    height: 245.7px;
  }

}

@media (max-width: 576px) {
  .video-frame {
    width: 403.2px;
    height: 245.7px;
  }
}

@media (max-width: 500px) {
  .video-frame {
    width: 362px;
    height: 221px;
  }
}

@media (max-width: 450px) {
  .video-frame {
    width: 289px;
    height: 176px;
  }

  aside {
    width: 100%;
  }

  header h1 {
    font-size: 1.3em;
  }

  header .banner {
    font-size: 1.2em;
  }

  #carousel-header {
    flex-wrap: wrap;
  }
}

@media (max-width: 430px) {

  /* .video-frame {
    width: 260px;
    height: 158px;
  } */
  #youtube-trailer {
    padding: 0% !important;
  }

  h3 {
    padding: 10px;
  }

  #movie-quote p {
    font-size: 1.5rem;
  }

  .overview {
    font-weight: 200;
  }

  #movie-quote {
    margin-bottom: 40px;
  }
}

@media (max-width: 370px) {
  header h1 {
    font-size: 1.1em;
  }

  header .banner {
    font-size: 1em;
  }

  .video-frame {
    width: 260px;
    height: 158px;
  }

  h2 {
    font-size: 1.3rem;
  }

  #movie-info {
    padding: 0;
  }
}

@media (max-width: 338px) {
  header .banner {
    flex-wrap: wrap;
  }

  header h1 {
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

  .video-frame {
    width: 234px;
    height: 142px;
  }
}

@media (max-width: 316px) {
  .video-frame {
    width: 210.6px;
    height: 127.8px;
  }
}

@media (max-width: 316px) {
  .video-frame {
    width: 210.6px;
    height: 127.8px;
  }
}