*, *::before, 
*::after { 
    box-sizing: border-box; 
    } 

html, body {
    background-color: #2f2f2f;
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
}

.page-layout{
    background-color: #121212;
    margin: 3em auto;
    width: 100%;
    min-height: auto;
    max-width: 550px;
    position: relative;
   
}

/*header*/
div.header {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
        url("images/vids-unsplash.jpg");
    background-size: cover; 
    background-position: center;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #FFFFFF;
  
}

h1{
    font-size: 2.67rem;
    font-weight: 800;
}

.page-link{
    font-size: .875;
    font-weight: 700;
    margin-top: 2em;
    color: #fff; 
}


/*main*/
.start-screen,
#start-screen{
    padding: 12em 0 20em 0;
    text-align: center;
    vertical-align: center;
}

.start-screen,
.main-h2{
    font-size: 1.125rem;
    font-weight: 700; 
    color: #787878;
}

.film-icon{
    font-size: 6.375em;
    color:  #3E3E3F;
}
 

.index{
    font-size: 1.125rem;
    font-weight: 700;
    color:  #3E3E3F;
}

/*search bar*/
.search-icon {
    position: absolute;
    margin-left: .4em;
    color: #9CA3AF; 
}


.search-container {
    display: flex;
    align-items: center;
    position: relative;
    top: -1.5em;
    width: 21em;
    height: 2.375em;
    margin: 0 auto; 
}


.search-btn {
  background-color:#4B4B4B;
  height: 97%;
  padding: 0 1em;
  border: 1px solid #4B4B4B;
  color: #FFFFFF;
  font-size: .875rem;
  font-weight: 500;
}


.search {
  background-color: #3E3E3F;
  width: 100%;
  padding: 0.5em 0.5em 0.5em 2em; 
  border: 2px solid  #3E3E3F;        
  outline: none;
  font-size:.875rem;
  font-weight: 500;
  color: #A5A5A5;
} 

/*movie-container index.html*/

#movie-container{
    padding-top: 2em; 
    color: #FFFFFF;
}

.fullMovie-info {
  display: flex;
  gap: 1rem;
  margin: 0 1em 2em 2rem;
  border-bottom: 1px solid #4B4B4B;
  padding-bottom: 1rem;
 
}

.poster {
  width: 100px;
  height: 160px; 
  object-fit: cover; 
  flex-shrink: 0; /* don’t let flex shrink it */
}


.title{
    font-size: 1.125rem;
    font-weight: 500;
}

.title-rating{
    display: flex;
    gap: .5em;  
}

.star-rating{
    font-size: .75rem;
    color: #FEC654;
    padding-left: 1em;
}

.title-wrapper{
    display: flex;
    align-items: center; 
}

.movie-details{
    display: flex;
    gap: 1.5em;
    
}

.plot{
    font-size: .875rem;
    font-weight: 400;
    color: #A5A5A5;
    text-align: left;
    margin-top: .5em;  
}

span{
    font-size: .75rem;
    font-weight: 400;
}

/*watchlist html*/

.plus-icon{
    color: #fff;
    cursor: pointer;
}

.plus-icon:active {
  background-color: #3e8e41; /* Darker green */
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


.minus-icon{
  font-size: .8rem;
  color: #fff;
  padding-left: .2em;
  
}