/* General */
* { box-sizing: border-box; }

:root {
  --purple-light-1: #FBFAFB;
  --purple-light-2: #EEEAF2;
  --purple-medium-1: #AA83C8;
  --purple-medium-2: #8B48BF;
  --purple-medium-3: #5C218A;
  --purple-dark-1: #3E0F64;
  --purple-dark-2: #2A0646;


  --yellow: #EECC75;
  --green: #CAD297;
  --green-dark:#6c8a21;
  --aqua: #B7EAC5;
  --lightBlue: #A2EEE5;
  --darkBlue: #8EA2EA;
  --red: #F09D9D;
  --grey-blue: #618cbe;


  --font-family-titles: 'Raleway', sans-serif;
  --font-family-text: 'Red Hat Display', sans-serif;
  --font-weight-title1: 800;
  --font-weight-title2: 700;
  --font-weight-text1: 400;
  --font-weight-text2: 500;
}

html {
  background-color:var(--black-dark);
}

body {
  background-image: url(/img/movies-background.jpg);
  color: var(--purple-light-1);
  font-family: var(--font-family-text);
  font-weight: var(--font-weight-text1);
  font-size: 16px;
  margin: 4px 0 0 0;
  padding: 0;
  width: 57rem;
}

h1, h2, h3 {
  margin: 0;
  padding: 0;
}

h1, h2 {
  font-size: 24px;
  color:var(--purple-light-1);
  font-family: var(--font-family-titles);
  font-weight: var(--font-weight-title1);
  margin: 0;
  padding: 0;
}
h2 {
    font-size: 18px;
    color: var(--purple-light-1);
    font-weight: var(--font-weight-title2);
  }
  
  h3 {
    color: var(--purple-light-1);
    font-weight: var(--font-weight-text2);
    font-size: 16px;
  }
  
  input {
    background-color: transparent;
    color: #ffffff40;
    border: 1px  solid;
    font-size: 16px;
    padding-left: 16px;
  }
  
  input::placeholder {
    color: #ffffff40;
    font-family: var(--font-family-text);
  }
  
  button {
    background-color: transparent;
    border: none;
    color: #ffffff40;
    font-weight: var(--font-weight-text2);
    font-size: 14px;
    cursor: pointer;
  }
  
  /* Shared */
  .header-container, .trendingPreview-header, .categoriesPreview-container {
    padding: 0 24px;
  }
  
  .trendingPreview-container, .categoriesPreview-container, footer {
    margin-top: 48px;
  }
  
  .trendingPreview-header, .categoriesPreview-title {
    margin-bottom: 24px;
  }
  
  .movie-container {
    cursor: pointer;
  }
  
  .movie-img {
    border-radius: 8px;
  }
  
  .categoriesPreview-list, .categories-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex-wrap: wrap;
  }
  
  
  /* Header */

   
  .nav-menu ul {
    list-style: none;
    display: flex;
    align-items: baseline;
    margin-left: 300px;
    justify-content: space-evenly;
    margin-bottom: 50px;
   
  }

  .nav-menu ul li a {
    color: var(--purple-light-1);
    text-decoration: none;
    font-size: 20px;
  }


  .header-container--long {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 100%, rgba(0, 0, 0, 0) 29.17%);
    background-size: cover !important;
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
  }
  
  .header-container--categoryView {
    background: linear-gradient(180deg, rgba(238, 204, 117, 0.5) 0%, rgba(238, 204, 117, 0) 72.92%);
  } 
  
  .header-title {
    margin-bottom: 16px;
    font-size: 37px;
  }
  
  .header-arrow {
    font-weight: var(--font-weight-text2);
    font-size: 36px;
    margin-bottom: 16px;
    cursor: pointer;
    display: inline-block;
  }
  .header-arrow--white {
    color: var(--purple-light-1);
  }
  
  .header-searchForm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38%;
    flex-wrap: nowrap;
    margin-left: 585px;
    margin-top: -82px;
  }
  
  .header-searchForm input {
    border-radius: 16px;
    position: relative;
    left: 10%;
    height: 32px;
  }

  .header-searchForm button {
    position: relative;
    margin-right: 45px;
    left: -8px;
  }
  

  /* Trending */
  .trendingPreview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .trendingPreview-title {
    font-size: 18px;
  
  }
  
  .trendingPreview-btn {
    border-radius: 8px;
    height: 1.4rem;
    margin-left: 80vw;
  }
  
  .trendingPreview-movieList {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    height: 241px;
    padding-left: 24px;
    padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  
  .trendingPreview-movieList::-webkit-scrollbar {
    width: 8px; 
    background-color: transparent; 
  }
  
  .trendingPreview-movieList::-webkit-scrollbar-thumb {
    background-color: transparent; 
  }
  
  .trendingPreview-movieList::-webkit-scrollbar-thumb:hover {
    background-color: transparent; 
  }
  .trendingPreview-movieList .movie-container {
    display: inline-block;
    margin-right: 8px;
  }
  
  .trendingPreview-movieList .movie-container .movie-img {
    height: 225px;
    min-height: 225px;
    max-height: 225px;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
  }
  
  /* Action movie list */
  .actionPreview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .actionPreview-title {
    font-size: 18px;
    margin-left: 24px;
    margin-bottom: 24px;
    margin-top: 24px;
  }
  
  .actionPreview-btn {
    border-radius: 8px;
    height: 1.4rem;
    margin-left: 80vw;
 
  }
  
  .actionPreview-movieList {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    height: 241px;
    padding-left: 24px;
    padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  
  .actionPreview-movieList::-webkit-scrollbar {
    width: 8px; 
    background-color: transparent; 
  }
  
  .actionPreview-movieList::-webkit-scrollbar-thumb {
    background-color: transparent; 
  }
  
  .actionPreview-movieList::-webkit-scrollbar-thumb:hover {
    background-color: transparent; 
  }
  .actionPreview-movieList .movie-container {
    display: inline-block;
    margin-right: 8px;
  }
  
  .actionPreview-movieList .movie-container .movie-img {
    height: 225px;
    min-height: 225px;
    max-height: 225px;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
  }
  
  /* Adventure movie list */
  .adventurePreview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .adventurePreview-title {
    font-size: 18px;
    margin-left: 24px;
    margin-bottom: 24px;
    margin-top: 24px;
  }
  
  .adventurePreview-btn {
    border-radius: 8px;
    height: 1.4rem;
    margin-left: 80vw;
 
  }
  
  .adventurePreview-movieList {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    height: 241px;
    padding-left: 24px;
    padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  
  .adventurePreview-movieList::-webkit-scrollbar {
    width: 8px; 
    background-color: transparent; 
  }
  
  .adventurePreview-movieList::-webkit-scrollbar-thumb {
    background-color: transparent; 
  }
  
  .adventurePreview-movieList::-webkit-scrollbar-thumb:hover {
    background-color: transparent; 
  }
  .adventurePreview-movieList .movie-container {
    display: inline-block;
    margin-right: 8px;
  }
  
  .adventurePreview-movieList .movie-container .movie-img {
    height: 225px;
    min-height: 225px;
    max-height: 225px;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
  }
  
  /* Animation movie list */
  .animationPreview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .animationPreview-title {
    font-size: 18px;
    margin-left: 24px;
    margin-bottom: 24px;
    margin-top: 24px;
  }
  
  .animationPreview-btn {
    border-radius: 8px;
    height: 1.4rem;
    margin-left: 80vw;
 
  }
  
  .animationPreview-movieList {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    height: 241px;
    padding-left: 24px;
    padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  
  .animationPreview-movieList::-webkit-scrollbar {
    width: 8px; 
    background-color: transparent; 
  }
  
  .animationPreview-movieList::-webkit-scrollbar-thumb {
    background-color: transparent; 
  }
  
  .animationPreview-movieList::-webkit-scrollbar-thumb:hover {
    background-color: transparent; 
  }
  .animationPreview-movieList .movie-container {
    display: inline-block;
    margin-right: 8px;
  }
  
  .animationPreview-movieList .movie-container .movie-img {
    height: 225px;
    min-height: 225px;
    max-height: 225px;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
  }
  
  /* Comedy movie list */
  .comedyPreview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .comedyPreview-title {
    font-size: 18px;
    margin-left: 24px;
    margin-bottom: 24px;
    margin-top: 24px;
  }
  
  .comedyPreview-btn {
    border-radius: 8px;
    height: 1.4rem;
    margin-left: 80vw;
 
  }
  
  .comedyPreview-movieList {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    height: 241px;
    padding-left: 24px;
    padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  
  .comedyPreview-movieList::-webkit-scrollbar {
    width: 8px; 
    background-color: transparent; 
  }
  
  .comedyPreview-movieList::-webkit-scrollbar-thumb {
    background-color: transparent; 
  }
  
  .comedyPreview-movieList::-webkit-scrollbar-thumb:hover {
    background-color: transparent; 
  }
  .comedyPreview-movieList .movie-container {
    display: inline-block;
    margin-right: 8px;
  }
  
  .comedyPreview-movieList .movie-container .movie-img {
    height: 225px;
    min-height: 225px;
    max-height: 225px;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
  }

/* Comedy movie list */
  .comedyPreview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .comedyPreview-title {
    font-size: 18px;
    margin-left: 24px;
    margin-bottom: 24px;
    margin-top: 24px;
  }
  
  .comedyPreview-btn {
    border-radius: 8px;
    height: 1.4rem;
    margin-left: 80vw;
 
  }
  
  .comedyPreview-movieList {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    height: 241px;
    padding-left: 24px;
    padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  
  .comedyPreview-movieList::-webkit-scrollbar {
    width: 8px; 
    background-color: transparent; 
  }
  
  .comedyPreview-movieList::-webkit-scrollbar-thumb {
    background-color: transparent; 
  }
  
  .comedyPreview-movieList::-webkit-scrollbar-thumb:hover {
    background-color: transparent; 
  }
  .comedyPreview-movieList .movie-container {
    display: inline-block;
    margin-right: 8px;
  }
  
  .comedyPreview-movieList .movie-container .movie-img {
    height: 225px;
    min-height: 225px;
    max-height: 225px;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
  }


  /* Crime movie list */
  .crimePreview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .crimePreview-title {
    font-size: 18px;
    margin-left: 24px;
    margin-bottom: 24px;
    margin-top: 24px;
  }
  
  .crimePreview-btn {
    border-radius: 8px;
    height: 1.4rem;
    margin-left: 80vw;
 
  }
  
  .crimePreview-movieList {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    height: 241px;
    padding-left: 24px;
    padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  
  .crimePreview-movieList::-webkit-scrollbar {
    width: 8px; 
    background-color: transparent; 
  }
  
  .crimePreview-movieList::-webkit-scrollbar-thumb {
    background-color: transparent; 
  }
  
  .crimePreview-movieList::-webkit-scrollbar-thumb:hover {
    background-color: transparent; 
  }
  .crimePreview-movieList .movie-container {
    display: inline-block;
    margin-right: 8px;
  }
  
  .crimePreview-movieList .movie-container .movie-img {
    height: 225px;
    min-height: 225px;
    max-height: 225px;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
  }


  /* Drama movie list */
  .dramaPreview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .dramaPreview-title {
    font-size: 18px;
    margin-left: 24px;
    margin-bottom: 24px;
    margin-top: 24px;
  }
  
  .dramaPreview-btn {
    border-radius: 8px;
    height: 1.4rem;
    margin-left: 80vw;
 
  }
  
  .dramaPreview-movieList {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    height: 241px;
    padding-left: 24px;
    padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  
  .dramaPreview-movieList::-webkit-scrollbar {
    width: 8px; 
    background-color: transparent; 
  }
  
  .dramaPreview-movieList::-webkit-scrollbar-thumb {
    background-color: transparent; 
  }
  
  .dramaPreview-movieList::-webkit-scrollbar-thumb:hover {
    background-color: transparent; 
  }
  .dramaPreview-movieList .movie-container {
    display: inline-block;
    margin-right: 8px;
  }
  
  .dramaPreview-movieList .movie-container .movie-img {
    height: 225px;
    min-height: 225px;
    max-height: 225px;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
  }

  /* family movie list */
  .familyPreview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .familyPreview-title {
    font-size: 18px;
    margin-left: 24px;
    margin-bottom: 24px;
    margin-top: 24px;
  }
  
  .familyPreview-btn {
    border-radius: 8px;
    height: 1.4rem;
    margin-left: 80vw;
 
  }
  
  .familyPreview-movieList {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    height: 241px;
    padding-left: 24px;
    padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  
  .familyPreview-movieList::-webkit-scrollbar {
    width: 8px; 
    background-color: transparent; 
  }
  
  .familyPreview-movieList::-webkit-scrollbar-thumb {
    background-color: transparent; 
  }
  
  .familyPreview-movieList::-webkit-scrollbar-thumb:hover {
    background-color: transparent; 
  }
  .familyPreview-movieList .movie-container {
    display: inline-block;
    margin-right: 8px;
  }
  
  .familyPreview-movieList .movie-container .movie-img {
    height: 225px;
    min-height: 225px;
    max-height: 225px;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
  }


  /* Categories */
  .category-container {
    width: 45%;
  }

  .category-title {
    display: flex;
    margin-bottom: 8px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: var(--grey-blue);
    border-radius: 6px;
    width: 97%;
    height: 39px;
    align-items: center;
  }
  @media only screen and (min-width: 820px ) {
    .category-container {
      width: 26%;
    }
    
  }
  .category-title::before {
    content: '••••';
    color: transparent;
    background-color: var(--idColor);
    border-radius: 8px;
    margin-right: 8px;
    width: 8px;
    height: 8px;
  }
/*   #id28 { --idColor: var(--yellow); }
  #id12 { --idColor: var(--red); }
  #id16 { --idColor: var(--green); }
  #id35 { --idColor: var(--lightBlue); }
  #id80 { --idColor: var(--darkBlue); }
  #id99 { --idColor: var(--purple-dark-1); }
  #id18 { --idColor: var(--purple-medium-1); }
  #id10751 { --idColor: var(--yellow); }
  #id14 { --idColor: var(--red); }
  #id36 { --idColor: var(--green); }
  #id27 { --idColor: var(--lightBlue); }
  #id10402 { --idColor: var(--darkBlue); }
  #id9648 { --idColor: var(--purple-dark-1); }
  #id10749 { --idColor: var(--purple-medium-1); }
  #id878 { --idColor: var(--yellow); }
  #id10770 { --idColor: var(--red); }
  #id53 { --idColor: var(--green); }
  #id10752 { --idColor: var(--lightBlue); }
  #id37 { --idColor: var(--darkBlue); }
   */
  
  /* Generic List (search, trending & category) */
  .genericList-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 32px 24px;
  }
  
  .genericList-container .movie-container {
    display: inline-block;
    width: 40.5%;
    margin-top: 4%;
  }
  
  .genericList-container .movie-img {
    width: 100%;
  }
  
  
  /* Movie Detail */
  .movieDetail-container {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: 32px 24px;
    margin-top: -3rem;
    z-index: 1;
    position: absolute;
    background-color: var(--black-dark);
  }
  
  .movieDetail-title {
    display: inline-block;
    width: 80%;
    margin: 0 0 16px 0;
    padding: 0;
  }
  .movieDetail-releasedate {
    display: flex;
    justify-content: flex-end;
    margin-top: -21px;
    font-size: 19px;
  }
  .movieDetail-score {
    display: flex;
    width: 18%;
    font-weight: var(--font-weight-title2);
    margin-top: 26px;
    margin-bottom: 16px;
    font-size: 42px;
  }
  .movieDetail-score::before {
    content: '★';
    color: var(--yellow);
    padding-right: 4px;
  }
  
  .movieDetail-description {
    margin: 0 0 24px 0;
  }
  
  .relatedMovies-container {
    margin-top: 24px;
    height: 216px;
  }
  
  .relatedMovies-title {
    margin-bottom: 16px;
  }
  
  .relatedMovies-scrollContainer {
    position: absolute;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    width: calc(100vw - 24px);
    padding-bottom: 16px;
  }
  
  .relatedMovies-scrollContainer .movie-container {
    display: inline-block;
    margin-right: 8px;
  }
  
  .relatedMovies-scrollContainer .movie-img {
    width: 125px;
    min-width: 125px;
    max-width: 125px;
    height: 187.5px;
    min-height: 187.5px;
    max-height: 187.5px;
  }
  /* Footer */
  footer {
    background-color: var(--grey-blue);
    color: var(--purple-light-2);
    text-align: center;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Navigation */
  .inactive {
    display: none;
  }

  @media only screen and (min-width: 820px ) {
    body {
      width: 85rem;
    }
    .header-searchForm input {
      left: 20rem;
    }
    .header-searchForm button {
      left: 18rem;
    }
    
  }