@import url('https://fonts.googleapis.com/css2?family=Armata&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

@font-face {
     font-family: 'Graphique pro';
     src: url(font/Graphique\ Pro\ Next\ Solid.otf);
}
@font-face {
     font-family:'Magic sound';
     src: url(font/Magic\ Sound\ 2.ttf);
}
@font-face {
     font-family: 'Aweber';
     src: url(font/Aweber\ Black.otf);
}

:root{
     /* colors */
     --Background:#121517;
     --Turquoise:#88BDB8;
     --Pale-blue:#F2F8F7;
     --Blue:#c4e4e0;
     --Bright-fushia:#C14679;
     --Grey:#C7BFBE;
     --Dark-grey:rgb(78, 73, 76);

     /* gradient */
     --Gradient:radial-gradient(circle, rgba(27,32,36,1) 0%, rgba(199,191,190,1) 100%);

     /* fonts */
     --Title1:'Aweber';
     --Title2:'Graphique pro';
     --Body:'Armata';
}

/* GENERAL */ 

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

body{
     background-color: var(--Background);
     color: var(--Pale-blue);
     font-family: var(--Body);
     font-size: 16px;
}

main{ 
     display: flex;
     flex-direction: column;
     align-items: center;
}

section{
     display: flex;
     flex-direction: column;
     align-self: center;
     width: 75%;
}

/* NAV BAR */

header{
     position: sticky;
     padding:2vw;
     border-bottom: 1px solid var(--Turquoise);
}

#navbar{
     display: flex;
     flex-direction: row;
     list-style: none;
     justify-content: space-between;
     align-items: baseline;
}

#logo{
     width: 190px;
     padding: 30px 10px 0 35px;
}

#favListBtn{
     width: 35px;
     padding-right: 50px;
}

/* HOME PAGE / UPDATES */ 

#searchSection{
     padding: 20px;
     margin: 90px 0 10px;
}

#searchSection form{
     display: flex;
     flex-direction: row;
     justify-content: center;
     gap: 5px;
     width: 100%;
}

.search-entry{
     color: var(--Background);
     font-style: italic;
     padding: 15px 10px 15px 15px;
     width: 30%;
     font-family: var(--Body);
     font-size: 12px;
}

.search-entry:focus{
     font-size: 14px;
     border: 3px solid var(--Turquoise);
     outline: none;
     font-style: normal;
     content: '';
}

.search-btn{
     font-family: var(--Body);
     font-size: 13px;
     font-weight: 700;
     letter-spacing: 1px;
     text-transform:uppercase;
     padding: 10px 15px;
     width: 7.5%;
     background: var(--Turquoise);
     color: var(--Background);
     border: 1.5px outset var(--Pale-blue);
}


#updates{
     margin: 20px 0 90px;
     padding: 20px 0 0 0;
     display: flex;
     flex-direction: column;
     align-items: center;
}

#updates h2{
     justify-self: center;
     font-family: var(--Title2);
     font-size: 50px;
     padding: 0 10px 30px 10px;
}

#showName{
     font-family: var(--Title1);
     text-align: center;
}

#carousel{
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 550px;
     height: 750px;
     background-size: cover;
}
.genreList{
     list-style-type: none;
}



/* RESULTS */ 

#resultPage{
     display: none;
}

#resultPage h2{
     font-size: 30px;
     font-family: var(--Title2);
     padding: 10px 0 30px;
     justify-self:center;
}

#containerResults{
     font-family: var(--Body);
     padding: 35px 60px;
}

.overlay{
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 50% 60%;
}

.oneResult{
     padding: 40px 40px 30px 35px;
     margin: 10px 0 30px;
     backdrop-filter: blur(3px);
     background-color: rgba(27,32,36,0.7);
     display: grid;
     grid-template-columns: 25% 65% 10%;
     grid-template-rows: 20% 25% 35% 20%;
     grid-column-gap: 0px;
     grid-row-gap: 0px;

     grid-template-areas: 
     "img title rating"
     "img genres ."
     "img summary summary"
     "img . fav";
}
     
.showImg{
     grid-area: img;
     border: 1px outset var(--Pale-blue);
     filter: grayscale(22%) blur(0.5px); 
}

.showTitle{
     grid-area: title;
     font-family: var(--Title2);
     font-size: 40px;
     text-shadow: 2px 2px 1px var(--Pale-blue);
     color: #88BDB8;
     letter-spacing: 1.75px;
     padding-left: 30px;
     }

.showGenres{
     grid-area: genres;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
     list-style: none;
     margin-left: 25px;
}

.showGenres li{
     color:rgb(242, 248, 247, 0.7);
     background-color: rgba(21, 20, 21, 0.5);
     border-radius: 3px;
     padding: 10px 15px;
     margin-right: 12.5px;
     font-size: 11px;
     text-transform: uppercase;
 }

 .showRating{
     grid-area: rating;
     justify-self: flex-end;
     align-self: center;
     padding-top: 5px;
     font-family: var(--Title2);
     font-size: 30px;
     color: var(--Turquoise);
     text-shadow: 0.75px 0.75px 0.5px var(--Pale-blue);
}

 .showSummary, .showSummary p{ 
     grid-area: summary;
     margin: 0 10px 0 15px;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 4;
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: justify;
     font-size: 14px;
}


.btnOptions{ 
     grid-area:fav;
     /* height: 35px;
     background-color: #121517;
     align-self: flex-end;
     justify-self: flex-end; */
} 


/* SHOW DETAILS */

#showDetails{
     font-family: var(--Body);
     padding: 0 60px;
     margin: 30px 0;
     border-right: 0.5px solid #F2F8F7;
     border-left: 0.5px solid #F2F8F7;
}

.profileTitle{
     font-family: var(--Title2);
     font-size: 50px;
     text-shadow: 2px 2px 1px var(--Pale-blue);
     color: #88BDB8;
     letter-spacing: 1.75px;
     text-align: center;
     padding: 55px 0 35px;
}

.containerInfos{
     height: auto;
     font-family: var(--Body);
     font-size: 14px;
     margin: 35px 5px;
     padding-bottom: 20px;

     display: grid;
     grid-template-columns: 35% 55% 10%;
     grid-template-rows: 15% 35% 15% 35%;
     grid-column-gap: 25px;
     grid-row-gap: 0px;

     grid-template-areas:
     "img genres rating"
     "img from ."
     "img link ."
     "img summary ."
}

.containerInfos span{
     font-family: var(--Title1);
     color:var(--Blue);
     letter-spacing: 1px;
}

.profileImg{
     grid-area: img;
     border: 1px outset var(--Pale-blue);
     filter: grayscale(22%) blur(0.5px);
}
.profileImg:hover{
     border: 1px outset var(--Pale-blue);
     filter: none;
}

.officialLink{
     grid-area: link;
     text-decoration: none;
     color: var(--Blue);
     font-family: var(--Title1);
}

.profileRating{
     grid-area: rating;
     justify-self: flex-end;
     align-self: flex-start;
     padding-top: 5px;
     font-family: var(--Title2);
     font-size: 40px;
     color: var(--Turquoise);
     text-shadow: 0.75px 0.75px 0.5px var(--Pale-blue);
}

.infosListGenres{
     grid-area: genres;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
     list-style: none;
     margin-top: 10px;
}

.infosListGenres li{
     color:rgb(242, 248, 247, 0.6);
     background-color: rgb(196, 228, 224, 0.8);
     border-radius: 3px;
     padding: 10px 15px;
     margin-right: 15px;
     font-size: 11px;
     text-transform: uppercase;
}

.profileFrom{
     grid-area: from;
     list-style: none;
     justify-items: flex-start;
     text-transform: uppercase;
     font-size: 14px;
}
.profileFrom p{
     font-size: 12px;
}

.profileSummary{
     grid-area: summary;
     align-self: center;
}


/* CONTAINER CAST & SEASONS */

.containerCastSeasons{
     height: fit-content;
     border: 1px solid var(--Pale-blue);
     padding: 10px;

     display: grid;
     grid-template-columns: 20% 25% 5% 30% 20%;
     grid-template-rows:  1/3 1/3 1/3;
     grid-column-gap: 0px;
     grid-row-gap: 0px;

     grid-template-areas:
     "cast . . boxSeasons boxSeasons"
     ". moreBtn1 . boxSeasons boxSeasons"
     ". . . . seasons";
}

.pCast{
     grid-area:cast;
}

.pSeasons{
     grid-area: seasons;
     justify-self: flex-end;
}

.pCast, .pSeasons{
     font-family: var(--Title1);
     font-size: 16px;
     padding: 10px;
     letter-spacing: 1px;
     color: var(--Blue);
}

.moreBtn1{
     grid-area: moreBtn1;
     background-color: transparent;
     border: 1px solid white;
     width: 25%;
}

.boxQuickviewSeasons{  
     padding: 25px 30px 20px 5px;

     grid-area: boxSeasons;
     display: grid;
     grid-template-columns: 33% 33% 33%;
     grid-template-rows:  repeat(auto, 1fr);
     grid-column-gap: 0.5px;
     grid-row-gap: 0px;
}

.quickviewSeason{
    padding: 10px;
    margin: 10px;
    text-align: center;
    background-color: var(--Turquoise);
}

.quickviewSeason:hover{
     color: var(--Turquoise);
     background-color: var(--Pale-blue);
}

/* CONTAINER CASTING */

.containerCasting{
     background-color: white;
}

.hide{
     display: none;
}