@font-face {
    font-family: "Actor";
    src: url('../Actor-Font/Actor-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
}

path:hover{

fill: #eeff00;
}

html {
    background-color: #17082A;

}

html{
    font-family: Actor;

}

article{
    background-color: #210F37;
    margin: 5vw 5vw 5vw 5vw;
    border-radius: 8vw;
    padding: 4vw 0vw 8vw 8vw  ;
    box-sizing: border-box; 

}
h1{
    font-size: 6.1vw;
    color: #fff;
    margin-bottom: 1.3vw;
    font-weight: normal;
    font-style: normal;
    letter-spacing: 0.07vw;



}
p{
    color: rgba(255, 255, 255, 0.7);;
    font-size: 5.4vw;
    -webkit-text-stroke: .04vw black; 
    padding-right: 5vw;
    font-style: normal;
    font-weight: normal;
    letter-spacing: 0.08vw;

}
h2{
    color: #ECBBDA;
    font-size: 4vw;
    background-color: rgba(255, 255, 255, .1);
    backface-visibility:unset;
    border-radius: 3vw;
    text-align: center;
    padding:2vw 8vw 2vw 8vw ;
    width: auto;
    margin-right: 2vw;
    margin-bottom: .5vw;
    font-style: normal;
    font-weight: normal;
    letter-spacing: 0.2vw;


}

.Director h2{
    width: 30vw;
}


.Cast{
    margin-top: 10vw;
}
.Genre{
    margin-top: 10vw;

}
.Cast-List{
    display: flex;
    flex-wrap: wrap;

}
.Genre-List{
    display: flex;
    flex-wrap: wrap;

}

.Director div{
    margin-top: 3vw;

}
a{
    color:#ECBBDA;
}
a:hover{
    color:#eeff00;

}

.Back-icon{
    margin: 10vw 10vw 0vw 10vw;
}


button {
    background-color: Transparent;
    border: none;
}

svg {
    margin-top: 1vw;
}

@media (min-width: 600px) and (max-width: 999px) {

    article{
        margin: 0vw 5vw 5vw 5vw;
        padding: 4vw 0vw 8vw 8vw  ;
        box-sizing: border-box; 
    }
    h1{
        font-size: 5vw;
        margin-bottom: 1.3vw;
        font-weight: normal;
    
    
    }
    p{
        font-size: 3.5vw;
        padding-right: 5vw;
    }
    h2{
        font-size: 3vw;

        margin-right: 2vw;
        padding:2vw 6vw 2vw 6vw ;

    }

    
    .Director h2{
        width: 15vw;
        margin-top: 1.3vw;

    }

    svg {
        margin-top: -3vw;
    }
  }

@media (min-width: 320px) and (max-width: 548px), (max-width: 375px), (max-width: 768px) {
    svg {
        margin-top: -2vw;
    }
}

@media (max-width: 768px)
{
    .Director h2{
        width: 25vw;
    }
}

@media  (min-width: 1024px) and (max-width: 1366px)
{
    article{
        margin: -3vw 5vw 5vw 5vw;
        padding: 4vw 0vw 8vw 8vw  ;
        box-sizing: border-box; 
        border-radius: 5vw;
        
    }
    h1{
        font-size: 5vw;
        margin-bottom: 1.3vw;
        font-weight: normal;
    
    
    }
    p{
        font-size: 3.5vw;
        padding-right: 5vw;
    }
    h2{
        font-size: 3vw;
        border-radius: 2.5vw;

        margin-right: 2vw;
        padding:2vw 6vw 2vw 6vw ;

    }

    
    .Director h2{
        width: 20vw;
        margin-top: 1.3vw;

    }

    svg {
        margin-top: -6vw;
    }
  }
}

@media (min-width: 1000px) {
    article{
        margin: -2vw 5vw 5vw 5vw;
        padding: 4vw 0vw 8vw 8vw  ;
        box-sizing: border-box; 
        border-radius: 2vw;
    }
    h1{
        font-size: 4vw;
        margin-bottom: 1.3vw;
        font-weight: normal;
    }
    p{
        font-size: 2.5vw;
        padding-right: 5vw;
    }
    h2{
        font-size: 2vw;

        margin-right: 2vw;
        padding:2vw 6vw 2vw 6vw ;

    }

    .Director {
        margin-top: 2vw;
    }
    .Cast{
        margin-top: 2vw;
    }
    .Genre{
        margin-top: 2vw;
    
    }
    
    .Director h2{
        width: 15vw;
    }

    svg {
        margin-top: -5vw;
    }

  }