html {
    scroll-behavior: smooth;
}
body {
    background-color: rgb(255, 255, 255);
    margin: 0;
    padding: 0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}
search-results {
    position: absolute;
    background-color: #00000043;
    color: #fff;
    width: 20vw;
    border-radius: 1vw;
    font-size: 1vw;
    font-family: "Bebas Neue", sans-serif;
  }
  
  .search-results .click-movie {
    margin: 20px;
    text-align: left;
  }
  
  .search-results .click-people {
    margin: 20px;
    text-align: left;
  }
/* *********** HEADER ******************/


.header_background {
    background-color: rgb(0, 0, 0);
    position: fixed;
    width: 100%;
    margin-top: -7rem;
    overflow: scroll;
    
}

.birth_date , .tag{font-weight: bolder;
}

.tag {
    font-size: 1.5rem;
}

main {
    margin-top: 7rem;
}

.top-section{
    background-color: black;
}
.logo {
    padding: 1rem;
    
}


.options {
    text-align: right;
    padding: 1rem;    
}

.options img {
    margin-top: 0.5rem;
}
.searchBar {
    padding-top: 2rem;
}

.searchBar input[type="text"]{
padding: 0.5rem;    
border-radius: 2rem;
}


/*  *********** SLICK SLIDER ******************/


.slick-dots {
    bottom: -2.0rem;
}
.slick-dots li button::before {
    color: red;
    opacity: 1;
}

.slick-dots li.slick-active button:before
{
    opacity: 1;
    color: yellow;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 40px;
    line-height: 1;

    opacity: 1.0;
    color: red;
    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -2.0rem;
    z-index: 20000000;
}


.slick-next
{
    left: -2.0rem;
    z-index: 20000000;
}

/* *********** FOOTER ******************/


#footer {
    background-color: black;
    padding-top: 3rem;
    text-align: center;
    border-top: 10px solid rgba(255, 0, 0, 0.919);
    border-bottom: 1px solid grey;
}

.footerLogo img {
    width: 10%;
}
.footerOptions {
    padding-top: 1rem;

}
.footerOptions p {
    color: white;
    display: inline;
    margin: 0.6rem;
}

.socialIcons {
    padding-top: 1rem;
    padding-bottom: 1rem;
}


.socialIcons img {
    margin:  0.5rem;
}

.copyrightText {
    text-align: center;
    display: block;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    padding: 0.5rem;   
    margin: 0;
}


/* *********** SPlASH PAGE ******************/

.splash {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    height: auto;
    width:5.0rem;
}

.movie {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    height: auto;
    width:5.0rem;
}

.people {
    background-color: rgb(255, 255, 255);
    color: black;
    height: auto;
    width:5.0rem;
}



.mainLogoBack{
    background-color: rgb(0, 0, 0);
    text-align: center;
    
    
}
.mainLogo {
    text-align: center;
    padding-top: 2rem;
    width: auto;
    margin-bottom: 4rem;
}

.mainLogo img {
    width: 25%;
}


.featureImage img  { 
    margin-top: -2rem;    
    width: 100%;
    margin-bottom: 3rem;
}

/* .featureText {
    padding: 2rem;
    color: rgb(0, 0, 0);
    font-size: 1.2rem;
    text-align: justify;
    padding-bottom: 3rem;
    
} */


.latestHeading {
    height: 5.0rem;    
    width: auto;
    margin-bottom: 4rem;    
}
.latestHeading h1 {
    border-bottom: 2px solid black;
    font-size: 3rem;
    color: rgb(0, 0, 0);
    font-weight: bolder;
}

.quickLinks {
    text-align: center;
    width: 0.4rem;
    padding: 0.6rem;
    
    margin-bottom: 2rem;

}

.quickLinks button {
    background-color: rgb(0, 0, 0);
    padding: 1rem;
    margin: 0 1rem 1rem 0;
    font-weight: bold;    

}

.quickLinks a {
    text-decoration: none;
    font-size: 0.9rem;
    color: rgb(255, 255, 255);
}
.quickLinks  .reverse  {
    background-color: #ff0000;    
}

.quickLinks  .reverse  a {
    color: #ffffff;    
}

.movie-row1 {
    height: 20.0rem;
    text-align: center;
    margin:auto;
}

.movie-row1 img {
    width: 85%;
}
.movie-row2 {
    height: 20.0rem;
    text-align: center;
    margin:auto;
}


.movieList p, .movieList-2 p {
    font-weight: bold;
    font-size: 1rem;
    padding: 1.2rem;
    padding-top: 0.3rem;
}


.movieList, .movieList-2 {
    text-align: center;
    padding-bottom: 3rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid rgb(185, 185, 185);
}

.hideAll {
    display: none;
}

/* *********** MOVIE PAGE ******************/

.previewMovie img {
    width: 100%;       
}

.movieSectionTop {
    padding-bottom: 2rem;
}
.posterMovie img {
    height: 80%;
    box-shadow: 0 0 20px black;
    margin-top: 2rem;
   
}

.posterHeading h2 {
    max-width: 50rem;
    width: auto;
    padding: 5rem ;
    padding-bottom: 1rem;
    font-size: 4.5rem;
    text-transform: uppercase;
    font-weight: bolder;
    margin: 0;
}

.posterHeading img {
    width: 4rem;
    margin-left: 6rem;
    
}


.movieText  {
    text-align: justify;
    padding: 0rem 2.1rem 0 2.1rem;
    
    margin-bottom: 0;
    font-size: 1.5rem;
}

.movieSpec {
    font-weight: bold;
    margin-top: 0;
    padding: 2.1rem;
    font-size: 1.4rem;
}

.headingSectionContainer {
    border-bottom: 1px solid gray;
    
    margin-bottom: 1rem;

}
.headingSection {
    font-size: 2rem;
    font-weight: bolder;
}

.actorList-1{
    text-align: center;
    margin: 0;
    padding: 0 0.5rem;
    
}
.actorList-1 img, .extraMovies img{
    margin-bottom: 0.2rem;
    
}

.actorList-1 p {
    margin: 0rem 1rem 0 1rem;
    padding: 0 1rem 0 1rem;    
}

.related-People {
    margin-bottom: 2rem;
}

.actorList-1 span {
    line-height: 0rem;
}

.visualList {
    text-align: center;
    margin: 0;
    margin-bottom: 2rem;
    padding: 0;
    
}
.visualList img {
    padding: 0.5rem 0.5rem;
    
}


.extraMovies {
    text-align: center;
    margin: 0;
    padding: 0;
    
}
.extramovie-row {
    height: 20.0rem;
    text-align: center;
    margin:auto;
}

.extramovie-row img {
    width: 40%;
}

.extraMovies img {
    
    margin-bottom: 0.2rem;

}
.extraMovies p{
    margin: 0rem 1rem 1rem 0;
    padding: 0 1rem 0 1rem;
    font-size: 1rem;
    font-weight: bold;
}


span {
    font-weight: lighter;
    font-size: 1.2rem;
    padding-bottom: 0rem;
}




@media only screen and (max-width: 650px) {
    .posterHeading h2 {
        font-size: 1rem;

    }
  }


  @media only screen and (max-width: 540px) {
    .posterHeading h2 {
        margin: 0;
        font-size: 1.8rem;
        text-align: center;
    }

    .posterMovie {
        
        text-align: center;
        margin: 0 auto;
        margin-left: 0;
        
    }

    .posterMovie img {
        height: 40%;
    }

    .movieText {
        margin-top: -20rem;
        font-size: 1rem;
    }

    .actorDescription {
        font-size: 1rem;
    }

    .actorImage img {
        height: 200px;
        
    }
  }



/* *********** People PAGE ******************/





.headingSectionName{
    padding-top: 1rem;
    font-size: 2rem;
    font-weight: bolder;
}
.actorImage{
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}
.actorDescription{
    padding: 0 1rem 2rem 3rem;
    text-align: justify;
    font-size: 1.2rem;
    line-height: 1rem;
}

.relatedMovies {
    text-align: center;
    margin: 0;
    padding: 0;
}

.relatedMovies img {
    margin-bottom: 0.2rem;

}
.relatedMovies p{
    margin: 0rem 1rem 2rem;
    padding: 0 1rem 0 1rem;
    font-size: 1rem;
    font-weight: bold;
}