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

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

@font-face {
    font-family: Netflix;
    src: url('../../fonts/AvenirNextLTPro-Demi.otf');
    font-weight: 500;
    font-style: normal;
}

body {
    background: black;
    color: white;
    margin: 0;
    font-family: Netflix;
    padding-bottom: 75px;
}

a {
    color: white;
    text-decoration: none;   
}

.header svg{
    fill: white;
    padding: 1.5em 0 .6em 1.2em;
}

.featured-img img{
    width: 100vw
}

.movie-info {
    /* border: 1px solid red; */
    padding: 0 4vw;
    color: #6e6e6e;
}

.movie-notitle {
    padding: 3vw 0;
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: center;
}

.movie-info h2 {
    font-size: 7.7vw;
    margin: 3vw 0 0 0;
    color: white;
}

.coincidence {
    color: #70CE73;
    font-weight: Bold;
    padding-right: 1em;
}

.rate {
    font-weight: Bold;
    color: white;
    background: #4d4d4d;
    border: none;
    border-radius: 2.5px;
    padding: .9vw 1.05vw;
}

.definition {
    font-weight: 500;
    color:  #bababa;
    border: 1px solid #6e6e6e;
    border-radius: 3px;
    padding: .7vw .7vw .1vw .7vw;
}

.button {
    background: white;
    display: inline-block;
    width: 100%;
    border-radius: 5px;
    justify-content: center;
    padding: 1vw 0 2.5vw 0;
    text-align: center;
    margin: 2vw 0;
    border: 0;
    font-size: 1em;
    cursor: pointer;
}

.button a {
    color: black;
    font-weight: Bold;
}

.button a svg{
    fill: black;
    position: relative;
    top: 7px;
}

.play {
    background: white;
}

.download {
    background: #2b2b2b;
}

.download a {
    color: white;
}

.download a svg {
    fill: white;
}

.movie-description {
    color: white;
    line-height: 2;
    padding: 1.4em 0;
    font-size: 1em;
}

.movie-extra-description {
    line-height: 1.4;
    padding: 2em 0 0 0;
    color: #6e6e6e;
    font-size: 0.9em;
}

.movie-buttons {
    list-style: none;
    padding: 0;
    margin: 0 0 .5em 0;
}

.movie-button {
    display: inline-block;
    text-align: center;
    padding: 0.5em;
}

.movie-button a svg {
    display: block;
    margin: auto;
}

.movie-button a {
    color: #6e6e6e;
    font-weight: Bold;
    font-size: 0.75em;
}

.movie-button path{
    fill: white;
    display: block;
}


.similar h3 {
    color: white;
    font-size: 1.3em;
    margin: .7em 0;
    border: none;
    border-top: 5px solid #D22F26;
    display: inline-block;
    padding-top: .6em;
}

.similar {
    /* border: 1px solid red; */
    margin: 0 4vw;
    color: #6e6e6e;
}

.list-content {
    /* border: 1px solid red; */
    white-space: nowrap;
    overflow-x: auto;
}

.list-item {
    display: inline-block;
    margin-left: .5em;
}

.list-item a img {
    width: 8em;
    
}

.list-item:first-child {
    margin-left: 0;
}
.footer {
    /* border: 1px solid red; */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: black;
    padding: 1em 0 0;
}

.tab-list {
    /* border: 1px solid green; */
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    list-style: none;
    color: #6e6e6e;
    padding-bottom: 1em;
}

.tab-list a{
    color: #6e6e6e;
}

.tab-item {
    /* border: 1px solid red; */
    text-align: center;
    font-size: .9em
}

.tab-item svg {
    display: block;
    margin: auto;
}

.tab-item path {
    fill: #6e6e6e;
    transition: .2s;
}

/* .tab-item:hover :is(path,span){
    fill: white;
    color: white;
} */

.tab-item:hover path, .tab-item:hover span{
    fill: white;
    color: white;
}