@import url('./details.css');

@font-face {
    font-family: Netflix;
    src: url('../fonts/AvenirNextLTPro-Regular.otf');
    font-weight: 400;
  }

  @font-face {
    font-family: Netflix;
    src: url('../fonts/AvenirNextLTPro-Bold.otf');
    font-weight: 600;
  }


*{
    margin: 0;
    padding: 0;
}

body{
    background-color: black;
    color: white;
    font-family: Netflix;
}


    /* SECTION HEADER */
.header{
    padding: 1em;
    position: relative;
    z-index: 2;
    background-image: linear-gradient(to bottom,black 0% , rgba(0, 0, 0, 0.850) 60% ,transparent 100% );
}
.header-menu ul{
    margin: 24px calc(62px - 1em) 110px calc(62px - 1em);
    display: flex;
    font-size: .9em;
    justify-content: space-between;
}

.header-menu ul li{
    list-style: none;
}

.header-menu ul li > a{
    text-decoration: none;
    color: white;
}


    /* SECTION FEATURED */
.featured{
    margin-top: -120px;
    /* border: solid 1px red; */
    min-height: 70vh;
    position: relative;
    overflow: hidden;
}
.featured video{
    height: 70vh;
}

.featured-description{
    bottom: 0;
    right: 0;
    left: 0;
    position: absolute;
    padding-top: 2em;
    padding-bottom: .3em;
    /* border: 1px solid red; */
    background-image: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.814) 80%, transparent 100%);
}

.featured-description > ul > li > a{
    /* color: white; */
    text-decoration: none;
}

.featured-description img{
    display: block;
    margin: auto;
    margin-bottom: 12px;
}

.featured-description ul{
    display: flex;
    margin: 0 24px;
    padding: .4em 0 .8em 0;
    /* border: solid 1px blue; */
    align-items: center;
    justify-content: space-evenly;
    max-width: 20em;
    margin: auto;
    /* border: 1px solid blue; */
}

.featured-description ul li{
    font-size: .62em;
    list-style: none;
}

.featured-description ul li::before{
    content: "•";
    margin-right: .8em;
}

.featured-description ul li:first-child::before{
    display: none;
}

.featured-links{
    display: flex;
    align-items: center;
    margin: 12px 10%;
    justify-content: space-between;
    max-width: 20em;
    margin: auto;
}

.featured-links button:hover{
    cursor: pointer;
}

.button-primary{
    font-size: .8em;
    display: flex;
    align-items: center;
    padding: .3em 1.6em .3em 1em;
    background-color: white;
    border-radius: 2px;
    border: none;
    font-size: .6em;
    font-weight: 600;
}

.play-icon::before{
    content: '';
    /* border: red solid 1px; */
    display: inline-block;
    margin-bottom: 4px;
    width: 20px;
    height: 20px;
    background-image: url('../images/icons/play.svg');
}

.button-secondary{
    min-width: 4em;
    font-size: .8em;
    background: none;
    color: white;
    border: none;
    font-size: .6em;
    font-weight: 600;
}

.button-secondary::before{
    content: '';
    display: block;
    margin: auto;
    width: 20px;
    height: 20px;
    margin-bottom: 4px;
    /* border: 1px solid yellow; */
}
.plus-icon::before{
    fill: white;
    color: white;
    background-image: url('../images/icons/plus.svg');
}
.info-icon::before{
    background-image: url('../images/icons/info.svg');
}

    /* SECTION MAIN */
.main{
    padding: 1em;
}

/* LIST CONTENT */
.list h2{
    margin-bottom: .5em;
    margin-top: 1em;
    font-weight: 600;
    font-size: 1.2em;
}

.list-content{
    overflow-x: auto;
    display: flex;  
    gap: .5em;
    /* white-space: nowrap; */
}

.list-content::-webkit-scrollbar {
    visibility: hidden;
    display: none;
}

/* .list-item{
    display: inline-block;
} */

.list-item img{
    width: 6em;
    height: 144px;
    border-radius: 2px;
}

    /* SECTION FOOTER */
.footer{
    position: sticky;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: black;
    padding: .8em;
}
.footer ul{
    display: flex;
    list-style: none;
    justify-content: space-evenly;
}

.footer > ul > li >  a{
    color: #686868;
    text-decoration: none;
    transition: 150ms;
}

.footer svg{
    fill: #686868;
    display: block;
    margin: auto;
    transition: 150ms;
}

.footer-list-item:hover a{
    /* color: white; */
}

.footer-list-item:hover :is(svg, a){
    transition: 150ms;
    fill: white;
    color: white;
}


@media (min-width: 640px){
    
    /* SECTION MENU  */
    .list-menu{
        padding: 0 35%;
    }
    .header-menu ul{
        font-size: 1.2em;
    }

    /* SECTION MAIN */
    .main{
        padding: 0 5%;
    }

    /* SECTION FEATURED  */
    .featured{
        /* background-color: red; */
        margin-top: -150px;
        height: 80vh;
        margin-bottom: 2em;
    }

    .featured video{
    height: auto;
    min-width: 100vw;
}

    /* FEATURE DESCRIPTION  */
    .featured-description{
        background-image: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.514) 60%, transparent 100%);
        bottom: 0;
        right: 0;
        left: 0;
        position: absolute;
        z-index: 1;
    }
    .featured-description img{
        width: 25%;
    }
    .featured-description ul{
        max-width: 20em;
        margin: auto;
        padding: 1em 25%;
    }
    .featured-description ul li{
        font-size: 1em;
    }
    .featured-description ul li::before{
        content: "•";
        margin-right: .5em;
        margin-left: .5em;
    }

    .featured-links{
        padding: 0 25%;
        max-width: 25em;
        margin: auto;
    }
 
.button-primary{
    font-size: 1em;
    padding: .2em 1.8em .2em 1.2em;   
}

.play-icon::before{
    width: 35px;
    height: 34px;
    background-image: url('../images/icons/play-w.svg');
}

.button-secondary{
    min-width: 4em;
    font-size: 1em;
}

.button-secondary::before{
    content: '';
    display: block;
    margin: auto;
    width: 35px;
    height: 35px;
    margin-bottom: 4px;
    /* border: 1px solid yellow; */
}
.plus-icon::before{
    fill: white;
    color: white;
    background-image: url('../images/icons/plus-w.svg');
}
.info-icon::before{
    background-image: url('../images/icons/info-w.svg');
}
    /* SECTION MAIN  */
    .main{
        padding: 2em;
    }
    .list-item img{
        width: 12em;
        height: 288px;
        border-radius: 2px;
    }

    .list h2{
        margin-bottom: .8em;
        margin-top: 1.2em;
        font-weight: 600;
        font-size: 1.8em;
    }

    /* SECTION FOOTER  */

    .footer{
        z-index: 1000;
    }
}