/* lettrage du video */
* {
    margin: 0;
    padding: 10;
    font-family: Times New Roman;
font-size: 20px;
}
.parent {
  position: relative;
  top: 1000;
  left: 0;


}
.image1 {
  position: absolute;
height: 280px;     
width: 200px;
margin: 0
 
  left: 1;
  border: 1px red solid;
}
.images  {
    margin:-3px;
   margin-top: -21px;
height: 42px;     
width: 2220px;
}
/* photo principale */
#object-position-1 {
position:absolute;
     width: 300px;
    height: 35px; 
margin-top: 20px;
margin-left:10px;
}
img {
object-position: left;
width: 810%; 

}
/* photo secondaire */
#object-position-2 {
position:absolute;
height: 350px;     
width: 280px;
margin-top: -320px;
margin-left:-1px;
}
#object-position-A {
position:absolute;
     width: 100px;
    height: 50px; 
margin-top: 12px;
margin-left:380px;
}
#object-position-3 {
position:absolute;
     width: 300px;
    height: 300px; 
margin-top: 300px;
margin-left:23px;
}
/* diferentes plateforme  */
#object-position-4 {
position:absolute;
margin-top: -280px;
margin-left:300px;
}
/* description principale */
desc {
width: 500px;
    height: auto;
color: white;
padding: 5px;
position: absolute;
font-family: times new roman;
font-size: 18px;
    margin: 1px;
    margin-top: -201px;
background-color: black;
border-color: white;
border: 1px solid white;
}
/* description principale */
descb {
width: 490px;
height: 165px;
color: white;
padding: 10px;
position: absolute;
font-family: times new roman;
font-size: 18px;
    margin: 195px;
    margin-top: 6px;
background-color: #552306;
border-color: white;
border: 1px solid white;
}
/* description principale */
descd {

position: relative;
font-family: times new roman;
font-size: 19px;
}

/* description principale */
descA {
 width: 640px;
height: auto;
color: rgb(245, 244, 244);
padding: 3px;
position: absolute;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 18px;
    margin: 0px;
    margin-top: 18px;
margin-left: 39px;
background-color: rgb(83, 7, 19);
border-color: rgb(248, 244, 244);
border: 1px solid white;
}
/* description principale */
desc2 {
color: white;
position: absolute;
font-family: times new roman;
font-size: 20px;
    margin: 1px;
    margin-top: 08px;
}
/* titre principale */
tit {
color:#fee18b;
position: absolute;
font-family: times new roman;
font-size: 20px;
    margin: 10px;
    margin-top: 1px;
}
/* titre principale */
tit2 {
color:#fee18b;
position: absolute;
font-family: times new roman;
font-size: 30px;
    margin: 381px;
    margin-top: 1px;
width: 480px;
    height: auto;
background-color: black;
padding: 3px;
}

.vl {
  border-left: 500px solid white;
  height: 680px;
  position: absolute;
  left: 60.4%;
  margin-left: -3px;
  top: 122;
}
}
body {
    background-color: #195c76;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 24vh;

}

/* lettrage du titre entre les chanson conteneur */
h4 {
font-family: times new roman;
font-size: 23px;
    margin: 0px;
color:white;
}


}
h1 {
font-family: times new roman;
font-size: 18px;
    margin: 0px;
}
h5 {
font-family: times new roman;
font-size: 14px;
    margin: 0px;
}



h3 {
font-family: times new roman;
font-size: 20px;
    margin: 1px;

}

.main {
   display: flex;
    width: 1025px;
    height: 575px;
    border-radius: 10px;
    padding: 0px;
  

/* position du conteneur et largeur complete et background couleur */
position: absolute;
    top: 0%;
    left:0%;
    height: 22%;
    width: 140%;

border: 0px solid black;
border-radius: 0px;
         width: 1020px;
        height: 700px;
background: linear-gradient(#transparent,transparent);
margin-top:1px;
 margin-left: 0px;
   
}
/* conteneur emplacement du conteneur interne */
.video-container {
    width: 5900px;
    height: 697px;
margin-top: 3px;
 background: linear-gradient(black,black);  
    padding: 0px;
    border-radius: 0px;
border-style: solid;
border-color: white;
border: 0px solid white;
 margin-left: 300px;

}

.video-playlist {
    padding: 10px;
}

.video-playlist h2 {
    margin-left: 10px;
}

.video-container iframe {

    width: 400px;
    height:216px;
border-radius: 0px;
margin-left: 40px;
}

.playlist-selector {
  position: absolute;
width: 15px;
    padding: 0px;
    overflow-y: hidden;
    overflow-x: hidden;
    border-radius: 0px;
border: 0px solid black;
border-style: solid;
border-color: black;
scrollbar-width: thin;
scrollbar-color: white white;
margin-top: 3px;
height:697px;
width: 30%;
background: linear-gradient(black,black);
margin-left: -0px;


}
/* largeur interne Titre conteneur plus largeur du cadre photo gris + couleur arriere plan */
.playlist-selector button {
    display: flex;
    align-items: right;
    width: 316px;
    height: auto;
   background-color: transparent;
   border-color: transparent;
margin: 1px;
text-align: start;
border: 0;
cursor: pointer;
color: white;
}

.playlist-selector button:hover {
    background-color: #c32914;
color: white;
}
a {
color: white;
font-family: time new roman;
font-size: 18px;

}
.active {
color: yellow;
background-color: black;
font-family: comic sans ms;
}
/* mouse over link */
a:hover {
  color: white;
background-color: transparent;

  texte-decoration: none;

}

h4 {
    margin: 15px;
}
/* dimension de la photo dans le conteneur */
.playlist-selector button img {
    width: 80px;
    height: auto;
 border: 0px  solid black;
        border-color: black;
margin: 1px;
align-items: left;
    border-radius: 0px 0px  0px 5px;
    margin-right: 5px;
}