@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@500&display=swap');
body {
   /* position: fixed; */
    background-image: url("./day.png");
    background-repeat:repeat;
    background-size: 80%;
    background-position: top;
    scrollbar-color: white black;

}

header {
  display: flex;
    margin: 0 auto;
    max-width: 880px; 
    height: 139px;
    margin-top: 200px;
    margin-right: 250px;
    
}

#ampoule {
  position: relative;
  width: 23px;
  top: -761px;
  right: -1252px;
}
#np_recent_tracks {
  font-family: 'Mitr', sans-serif;
  font-size: 16px;
  color: white;
  text-align: left;
  margin-top: 20px;
}
.historique {
  margin-left: -303px;
}
.volume {
  position: absolute;
  margin-top: -444px;
  margin-left: 400px;
}


.volumeClub {
  position: absolute;
  left: 372px;
  top: 479px;
  width: 20px;
  height: 250px;

}
#vinylePlay {
  background-image: url("./gif0.png");
  width: 250px;
  height: 200px;
  background-repeat: no-repeat;
  background-size: 190px;
  background-position: left, bottom;
  position: absolute;
  z-index: 99;
  margin-left: 28px;
  margin-top: 11px;
}

#bouton
{
  transform: rotate(-8deg);
  position: absolute;
  border-radius: 20px;
  width: 70px;
  height: 70px;
  margin-top: 66px;
  margin-left: 61px;
}

.frequence70s {
  background-image: url("./logo2.png");
  width: 312px;
  height: 58px;
  background-repeat: no-repeat;
  background-size: 300px;
  margin-left: 204px;
  margin-top: 39px;
  position: absolute;
  z-index: 99;
}

.online{
  margin-top: 101px;
  position: relative;
  margin-left: 115px;
  font-family: 'Mitr', sans-serif;
  font-size: 14px;
  border-radius: 20px;
  color: rgb(0, 0, 0);
  padding: 5px;
  background-color: rgb(255, 255, 255);
  width: 848px;
  bottom: 0;
}
#main {
  margin-top: -6px;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1.5em 1em;
  width: 821px;
  height: 635px;
  max-width: 90%;
  border-radius: 25px;
  position: static;
  z-index: 0;
  margin-left: 477px;
  text-align: center;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  font-size: 15px;
  color: white;
}

.card {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-top: 38px;
}
#whoAmI {
  font-family: 'Mitr', sans-serif;
letter-spacing: 0.02em;
font-size: 15px;
color: white;
}

.button {

background-image: linear-gradient(to right, #000, #000);
border-radius: 1.5em;
transition: opacity 300ms;
border: none;
padding: 7px;
right: 0;
font-family: 'Mitr', sans-serif;
letter-spacing: 0.02em;
position: absolute;
cursor: pointer;
margin-top: -202px;
margin-right: 303px;
font-size: 12px;
}

#knowMore {
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 8.5em;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: #e37046;
  border-color: coral;
}
#whoAreWe {
  position: absolute;
  z-index: 99;
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 5.5em;
  transition: opacity 300ms;
  border: none;
  padding: 5px;
  right: 0;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 12px;
  top: 56px;
  left: 666px;
  display: block;
  width: 127px;
  margin-left: 293px;
  margin-top: 200px;
  }

  .block {
    width: 746px;
    height: 194px;
    background-color: #000;
    border-radius: 25px;
    padding: 22px;
  }
#songList {
    position: relative;
    z-index: 2;
    background-image: linear-gradient(to right, #000, #000);
    border-radius: 5.5em;
    transition: opacity 300ms;
    border: none;
    padding: 5px;
    right: 0;
    font-family: 'Mitr', sans-serif;
    letter-spacing: 0.05em;
    cursor: pointer;
    font-size: 12px;
    top: 56px;
    left: 724px;
    display: block;
    width: 100px;

    }

a:link, a:visited
{
    color: white;
    text-decoration: none;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top:0;
  display: flex;
  justify-content: left;
  transition: .5s;
  z-index: 99;

}
.modal:target {
visibility: visible;
opacity: 1;
}
#modal_content0 {
  z-index: 99;
  position: relative;
  margin-top: 333px;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1.5em 1em;
  width: 820px;
  height: 558px;
  max-width: 90%;
  border-radius: 25px;
  margin-left: 104px;
}
#modal_content {
  z-index: 99;
  position: relative;
  margin-top: 332px;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1.5em 1em;
  width: 820px;
  height: 1051px;
  max-width: 90%;
  border-radius: 25px;
  margin-left: 106px;
}

#modal_select {
  z-index: 99;
  position: relative;
  margin-top: 406px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 757px;
  height: 801px;
  border-radius: 25px;
  margin-left: 14px;
}
#modal_select2 {
  z-index: 99;
  position: relative;
  margin-top: 409px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 791px;
  height: 725px;
  border-radius: 25px;
  margin-left: -208px;
}
#modal_select3 {
  z-index: 99;
  position: relative;
  margin-top: 409px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 756px;
  height: 783px;
  border-radius: 25px;
  margin-left: -397px;
}
#modal_select4 {
  z-index: 99;
  position: relative;
  margin-top: 409px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 756px;
  height: 1137px;
  border-radius: 25px;
  margin-left: -602px;
}


#modal_close {
  position: absolute;
  right:15px;
  top: 15px;
  text-decoration: none;
  color: grey;
  font-size: 100px;
}
#modal_close2 {
  position: absolute;
  right:15px;
  top: 15px;
  text-decoration: none;
  color: grey;
  font-size: 100px;
  
}
#modal_close3 {
  position: absolute;
  right: 22px;
  top: -46px;
  color: rgb(0, 0, 0);
  font-size: 100px;
}

#modal_close4 {
  position: absolute;
  right: 22px;
  top: -46px;
  color: rgb(0, 0, 0);
  font-size: 100px;
}
#modal_close5 {
  position: absolute;
  right: 22px;
  top: -46px;
  color: rgb(0, 0, 0);
  font-size: 100px;
}
#modal_close6 {
  position: absolute;
  right: 22px;
  top: -46px;
  color: rgb(0, 0, 0);
  font-size: 100px;
}
.pochette {
  display: block;
  width: 125px;
  height: 246px;
}
.info {
  display: block;
  margin-top: -251px;
  margin-left: 266px;
  text-align: left;
  font-size: 12.5px;
}

.info2 {
  display: block;
  margin-top: -222px;
  margin-left: 266px;
  text-align: left;
  font-size: 12.5px;
}
.info3 {
  display: block;
  margin-top: -253px;
  margin-left: 266px;
  text-align: left;
  font-size: 12.5px;
}
.info4 {
  display: block;
  margin-top: -248px;
  margin-left: 266px;
  text-align: left;
  font-size: 12.5px;

}
.details {
  display: block;
  margin-top: 30px;
  margin-left: 0px;
  text-align: justify;
  font-size: 13px;
  background-color: black;
  padding: 20px;
  border-radius: 20px;
}


.lesPochettes {
  width:150px;
  border-radius:10px;
}
.pixOfSelection {
  width: 278px;
}

.lesNewsFrequence70s {
  display: block;
  margin-top: 7px;
  margin-left: 16px;
  text-align: center;
  font-size: 13px;
  background-color: black;
  padding: 20px;
  border-radius: 20px;
  height: 241px;
  width: 748px;
}
.actu {
  font-size: 12px;
  padding: 5px;
  text-align: left; 
  display:flex;
  justify-content:flex-start;
}

.agendapochette {
  width: 100px;
}

#agendapochettedetails {
  padding: 20px;
}

@media screen and (max-width: 1518px) and (min-width: 1400px) { 
  
  body {
    /* position: fixed; */
    background-image: url("./day.png");
    background-repeat: repeat;
    background-size: 112%;
    background-position: top;
    scrollbar-color: white black;
  }


#ampoule {

  position: relative;
  width: 23px;
  top: -640px;
  right: -1113px;

}
  header {
    display: flex;
      margin: 0 auto;
      max-width: 880px; 
      height: 139px;
      margin-top: 200px;
      margin-right: 250px;
      
  }
  
  
  #volumeslider {
    position: absolute;
    margin-top: -100px;
    left: -230px;
  }
  
  .volumeClub {
    position: absolute;
    left: 372px;
    top: 479px;
    width: 20px;
    height: 250px;
  
  }
  #vinylePlay {
    background-image: url("./gif0.png");
    width: 250px;
    height: 200px;
    background-repeat: no-repeat;
    background-size: 190px;
    background-position: left, bottom;
    position: STATIC;
    z-index: 99;
    margin-left: -1108px;
    margin-top: 11px;
  }
  
  #bouton
  {
    transform: rotate(-8deg);
    position: absolute;
    border-radius: 20px;
    width: 70px;
    height: 70px;
    margin-top: 66px;
    margin-left: 61px;
  }
  
  .frequence70s {
    background-image: url("./logo2.png");
    width: 312px;
    height: 58px;
    background-repeat: no-repeat;
    background-size: 300px;
    margin-left: 72px;
    margin-top: 39px;
    position: absolute;
    z-index: 99;
  }
  
  .online{
    margin-top: 98px;
    position: relative;
    margin-left: -47px;
    font-family: 'Mitr', sans-serif;
    font-size: 16px;
    border-radius: 20px;
    color: rgb(0, 0, 0);
    padding: 5px;
    background-color: rgb(255, 255, 255);
    width: 905px;
    bottom: 0;
  }
  #main {
    margin-top: -6px;
    background-color: rgb(0, 0, 0, 0.5);
    padding: 1.5em 1em;
    width: 821px;
    height: 513px;
    max-width: 90%;
    border-radius: 25px;
    position: static;
    z-index: 0;
    margin-left: 274px;
    text-align: center;
    font-family: 'Mitr', sans-serif;
    letter-spacing: 0.02em;
    font-size: 15px;
    color: white;
  }
  
  .card {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-top: 38px;
  }
  #whoAmI {
    font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  font-size: 15px;
  color: white;
  }
  
  .button {
  
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 1.5em;
  transition: opacity 300ms;
  border: none;
  padding: 7px;
  right: 0;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  position: absolute;
  cursor: pointer;
  margin-top: -202px;
  margin-right: 303px;
  font-size: 12px;
  }
  
  #knowMore {
    background-image: linear-gradient(to right, #000, #000);
    border-radius: 8.5em;
    font-family: 'Mitr', sans-serif;
    letter-spacing: 0.05em;
    font-size: 12px;
    color: #e37046;
    border-color: coral;
  }
  #whoAreWe {
    position: RELATIVE;
    z-index: 99;
    background-image: linear-gradient(to right, #000, #000);
    border-radius: 5.5em;
    transition: opacity 300ms;
    border: none;
    padding: 5px;
    right: 0;
    font-family: 'Mitr', sans-serif;
    letter-spacing: 0.05em;
    cursor: pointer;
    font-size: 12px;
    top: -144px;
    left: 716px;
    display: block;
    width: 124px;
    margin-left: -136px;
    margin-top: 200px;
    }
  
    .block {
      width: 746px;
      height: 194px;
      background-color: #000;
      border-radius: 25px;
      padding: 22px;
    }
  #songList {
    position: relative;
    z-index: 2;
    background-image: linear-gradient(to right, #000, #000);
    border-radius: 5.5em;
    transition: opacity 300ms;
    border: none;
    padding: 5px;
    right: 0;
    font-family: 'Mitr', sans-serif;
    letter-spacing: 0.05em;
    cursor: pointer;
    font-size: 12px;
    top: 57px;
    left: 461px;
    display: block;
    width: 100px;
  
      }
  
  a:link, a:visited
  {
      color: white;
      text-decoration: none;
  }
  
  .modal {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top:0;
    display: flex;
    justify-content: left;
    transition: .5s;
    z-index: 99;
  
  }
  .modal:target {
  visibility: visible;
  opacity: 1;
  }
  #modal_content {
    z-index: 99;
    position: relative;
    margin-top: 333px;
    background-color: rgb(0, 0, 0, 0.5);
    padding: 1.5em 1em;
    width: 820px;
    height: 553px;
    max-width: 90%;
    border-radius: 25px;
    margin-left: 42px;
  }
  #modal_content0 {
    z-index: 99;
    position: relative;
    margin-top: 333px;
    background-color: rgb(0, 0, 0, 0.5);
    padding: 1.5em 1em;
    width: 820px;
    height: 553px;
    max-width: 90%;
    border-radius: 25px;
    margin-left: 42px;
  }
  #modal_select {
    z-index: 99;
    position: relative;
    margin-top: 406px;
    background: linear-gradient( #3b2b5b,#702719, #d54a2e);
    padding: 1.5em 1em;
    width: 757px;
    height: 685px;
    border-radius: 25px;
    margin-left: 14px;
  }
  #modal_select2 {
    z-index: 99;
    position: relative;
    margin-top: 409px;
    background: linear-gradient( #3b2b5b,#702719, #d54a2e);
    padding: 1.5em 1em;
    width: 791px;
    height: 1019px;
    border-radius: 25px;
    margin-left: -208px;
  }
  #modal_select3 {
    z-index: 99;
    position: relative;
    margin-top: 409px;
    background: linear-gradient( #3b2b5b,#702719, #d54a2e);
    padding: 1.5em 1em;
    width: 756px;
    height: 783px;
    border-radius: 25px;
    margin-left: -397px;
  }
  #modal_select4 {
    z-index: 99;
    position: relative;
    margin-top: 409px;
    background: linear-gradient( #3b2b5b,#702719, #d54a2e);
    padding: 1.5em 1em;
    width: 756px;
    height: 729px;
    border-radius: 25px;
    margin-left: -602px;
  }
  
  
  #modal_close {
    position: absolute;
    right:15px;
    top: 15px;
    text-decoration: none;
    color: grey;
    font-size: 100px;
  }
  #modal_close2 {
    position: absolute;
    right:15px;
    top: 15px;
    text-decoration: none;
    color: grey;
    font-size: 100px;
    
  }
  #modal_close3 {
    position: absolute;
    right: 22px;
    top: -46px;
    color: rgb(0, 0, 0);
    font-size: 100px;
  }
  
  #modal_close4 {
    position: absolute;
    right: 22px;
    top: -46px;
    color: rgb(0, 0, 0);
    font-size: 100px;
  }
  #modal_close5 {
    position: absolute;
    right: 22px;
    top: -46px;
    color: rgb(0, 0, 0);
    font-size: 100px;
  }
  #modal_close6 {
    position: absolute;
    right: 22px;
    top: -46px;
    color: rgb(0, 0, 0);
    font-size: 100px;
  }
  .pochette {
    display: block;
    width: 125px;
    height: 246px;
  }
  .info {
    display: block;
    margin-top: -202px;
    margin-left: 266px;
    text-align: left;
    font-size: 12.5px;
  }
  
  .info2 {
    display: block;
    margin-top: -241px;
    margin-left: 266px;
    text-align: left;
    font-size: 12.5px;
  }
  .info3 {
    display: block;
    margin-top: -253px;
    margin-left: 266px;
    text-align: left;
    font-size: 12.5px;
  }
  .info4 {
    display: block;
    margin-top: -229px;
    margin-left: 266px;
    text-align: left;
    font-size: 12.5px;
  
  }
  .details {
    display: block;
    margin-top: 30px;
    margin-left: 0px;
    text-align: justify;
    font-size: 13px;
    background-color: black;
    padding: 20px;
    border-radius: 20px;
  }
  
  
  .lesPochettes {
    width:150px;
    border-radius:10px;
  }
  .pixOfSelection {
    width: 278px;
  }
  .lesNewsFrequence70s {
    display: block;
    margin-top: 7px;
    margin-left: 16px;
    text-align: left;;
    font-size: 13px;
    background-color: black;
    padding: 20px;
    border-radius: 20px;
    height: 126px;
    width: 748px;
  }
  .actu {
    font-size: 12px;
    padding: 5px;
    text-align: left; 
    display:flex;
    justify-content:flex-start;
  }
  
  .agendapochette {
    width: 100px;
  }
  
  #agendapochettedetails {
    padding: 20px;
  }
  
  }

@media screen and (max-width: 1400px) and (min-width: 1290px) { 
  
  body {
    /* position: fixed; */
    background-image: url("./day.png");
    background-repeat: repeat;
    background-size: 80%;
    background-position: top;
    scrollbar-color: white black;
  }
  #ampoule {
    position: relative;
    width: 23px;
    top: -741px;
    right: -1126px;
  }
  header {
    display: flex;
      margin: 0 auto;
      max-width: 880px; 
      height: 139px;
      margin-top: 200px;
      margin-right: 250px;
      
  }
  
  
  #volumeslider {
    position: absolute;
    margin-top: -100px;
    left: -230px;
  }
  
  .volumeClub {
    position: absolute;
    left: 372px;
    top: 479px;
    width: 20px;
    height: 250px;
  
  }
  #vinylePlay {
    background-image: url("./gif0.png");
    width: 250px;
    height: 200px;
    background-repeat: no-repeat;
    background-size: 190px;
    background-position: left, bottom;
    position: absolute;
    z-index: 99;
    margin-left: -100px;
    margin-top: 11px;
  }
  
  #bouton
  {
    transform: rotate(-8deg);
    position: absolute;
    border-radius: 20px;
    width: 70px;
    height: 70px;
    margin-top: 66px;
    margin-left: 61px;
  }
  
  .frequence70s {
    background-image: url("./logo2.png");
    width: 312px;
    height: 58px;
    background-repeat: no-repeat;
    background-size: 300px;
    margin-left: 89px;
    margin-top: 39px;
    position: absolute;
    z-index: 99;
  }
  
  .online{
    margin-top: 98px;
    position: relative;
    margin-left: -440px;
    font-family: 'Mitr', sans-serif;
    font-size: 16px;
    border-radius: 20px;
    color: rgb(0, 0, 0);
    padding: 5px;
    background-color: rgb(255, 255, 255);
    width: 883px;
    bottom: 0;
  }
  #main {
    margin-top: -6px;
    background-color: rgb(0, 0, 0, 0.5);
    padding: 1.5em 1em;
    width: 821px;
    height: 613px;
    max-width: 90%;
    border-radius: 25px;
    position: static;
    z-index: 0;
    margin-left: 274px;
    text-align: center;
    font-family: 'Mitr', sans-serif;
    letter-spacing: 0.02em;
    font-size: 15px;
    color: white;
  }
  
  .card {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-top: 38px;
  }
  #whoAmI {
    font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  font-size: 15px;
  color: white;
  }
  
  .button {
  
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 1.5em;
  transition: opacity 300ms;
  border: none;
  padding: 7px;
  right: 0;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  position: absolute;
  cursor: pointer;
  margin-top: -202px;
  margin-right: 303px;
  font-size: 12px;
  }
  
  #knowMore {
    background-image: linear-gradient(to right, #000, #000);
    border-radius: 8.5em;
    font-family: 'Mitr', sans-serif;
    letter-spacing: 0.05em;
    font-size: 12px;
    color: #e37046;
    border-color: coral;
  }
  #whoAreWe {
    position: relative;
    z-index: 99;
    background-image: linear-gradient(to right, #000, #000);
    border-radius: 5.5em;
    transition: opacity 300ms;
    border: none;
    padding: 5px;
    right: 0;
    font-family: 'Mitr', sans-serif;
    letter-spacing: 0.05em;
    cursor: pointer;
    font-size: 12px;
    top: -143px;
    left: 400px;
    display: block;
    width: 127px;
    margin-left: 288px;
    margin-top: 200px;
    }
  
    .block {
      width: 746px;
      height: 194px;
      background-color: #000;
      border-radius: 25px;
      padding: 22px;
    }
  #songList {
    position: relative;
    z-index: 2;
    background-image: linear-gradient(to right, #000, #000);
    border-radius: 5.5em;
    transition: opacity 300ms;
    border: none;
    padding: 5px;
    right: 0;
    font-family: 'Mitr', sans-serif;
    letter-spacing: 0.05em;
    cursor: pointer;
    font-size: 12px;
    top: 58px;
    left: 126px;
    display: block;
    width: 100px;
  
      }
  
  a:link, a:visited
  {
      color: white;
      text-decoration: none;
  }
  
  .modal {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top:0;
    display: flex;
    justify-content: left;
    transition: .5s;
    z-index: 99;
  
  }
  .modal:target {
  visibility: visible;
  opacity: 1;
  }
  #modal_content {
    z-index: 99;
    position: relative;
    margin-top: 333px;
    background-color: rgb(0, 0, 0, 0.5);
    padding: 1.5em 1em;
    width: 820px;
    height: 553px;
    max-width: 90%;
    border-radius: 25px;
    margin-left: 42px;
  }
  #modal_content0 {
    z-index: 99;
    position: relative;
    margin-top: 333px;
    background-color: rgb(0, 0, 0, 0.5);
    padding: 1.5em 1em;
    width: 820px;
    height: 553px;
    max-width: 90%;
    border-radius: 25px;
    margin-left: 42px;
  }
  #modal_select {
    z-index: 99;
    position: relative;
    margin-top: 406px;
    background: linear-gradient( #3b2b5b,#702719, #d54a2e);
    padding: 1.5em 1em;
    width: 757px;
    height: 685px;
    border-radius: 25px;
    margin-left: 14px;
  }
  #modal_select2 {
    z-index: 99;
    position: relative;
    margin-top: 409px;
    background: linear-gradient( #3b2b5b,#702719, #d54a2e);
    padding: 1.5em 1em;
    width: 791px;
    height: 1019px;
    border-radius: 25px;
    margin-left: -208px;
  }
  #modal_select3 {
    z-index: 99;
    position: relative;
    margin-top: 409px;
    background: linear-gradient( #3b2b5b,#702719, #d54a2e);
    padding: 1.5em 1em;
    width: 756px;
    height: 783px;
    border-radius: 25px;
    margin-left: -397px;
  }
  #modal_select4 {
    z-index: 99;
    position: relative;
    margin-top: 409px;
    background: linear-gradient( #3b2b5b,#702719, #d54a2e);
    padding: 1.5em 1em;
    width: 756px;
    height: 729px;
    border-radius: 25px;
    margin-left: -602px;
  }
  
  
  #modal_close {
    position: absolute;
    right:15px;
    top: 15px;
    text-decoration: none;
    color: grey;
    font-size: 100px;
  }
  #modal_close2 {
    position: absolute;
    right:15px;
    top: 15px;
    text-decoration: none;
    color: grey;
    font-size: 100px;
    
  }
  #modal_close3 {
    position: absolute;
    right: 22px;
    top: -46px;
    color: rgb(0, 0, 0);
    font-size: 100px;
  }
  
  #modal_close4 {
    position: absolute;
    right: 22px;
    top: -46px;
    color: rgb(0, 0, 0);
    font-size: 100px;
  }
  #modal_close5 {
    position: absolute;
    right: 22px;
    top: -46px;
    color: rgb(0, 0, 0);
    font-size: 100px;
  }
  #modal_close6 {
    position: absolute;
    right: 22px;
    top: -46px;
    color: rgb(0, 0, 0);
    font-size: 100px;
  }
  .pochette {
    display: block;
    width: 125px;
    height: 246px;
  }
  .info {
    display: block;
    margin-top: -202px;
    margin-left: 266px;
    text-align: left;
    font-size: 12.5px;
  }
  
  .info2 {
    display: block;
    margin-top: -241px;
    margin-left: 266px;
    text-align: left;
    font-size: 12.5px;
  }
  .info3 {
    display: block;
    margin-top: -253px;
    margin-left: 266px;
    text-align: left;
    font-size: 12.5px;
  }
  .info4 {
    display: block;
    margin-top: -229px;
    margin-left: 266px;
    text-align: left;
    font-size: 12.5px;
  
  }
  .details {
    display: block;
    margin-top: 30px;
    margin-left: 0px;
    text-align: justify;
    font-size: 13px;
    background-color: black;
    padding: 20px;
    border-radius: 20px;
  }
  
  
  .lesPochettes {
    width:150px;
    border-radius:10px;
  }
  .pixOfSelection {
    width: 278px;
  }
  .lesNewsFrequence70s {
    display: block;
    margin-top: 7px;
    margin-left: 16px;
    font-size: 13px;
    background-color: black;
    padding: 20px;
    border-radius: 20px;
    height: 231px;
    width: 748px;
  }
  .actu {
    font-size: 12px;
    padding: 5px;
    text-align: left; 
    display:flex;
    justify-content:flex-start;
  }
  
  .agendapochette {
    width: 100px;
  }
  
  #agendapochettedetails {
    padding: 20px;
  }
  
  }

@media screen and (max-width: 1290px) and (min-width: 1240px) { 
  
body {
  /* position: fixed; */
  background-image: url("./day.png");
  background-repeat: repeat;
  background-size: 91%;
  background-position: top;
  scrollbar-color: white black;
}
#ampoule {
  position: relative;
  width: 23px;
  top: -721px;
  right: -1096px;
}
header {
  display: flex;
    margin: 0 auto;
    max-width: 880px; 
    height: 139px;
    margin-top: 200px;
    margin-right: 250px;
    
}


#volumeslider {
  position: absolute;
  margin-top: -100px;
  left: -230px;
}

.volumeClub {
  position: absolute;
  left: 372px;
  top: 479px;
  width: 20px;
  height: 250px;

}
#vinylePlay {
  background-image: url("./gif0.png");
  width: 250px;
  height: 200px;
  background-repeat: no-repeat;
  background-size: 190px;
  background-position: left, bottom;
  position: absolute;
  z-index: 99;
  margin-left: 28px;
  margin-top: 11px;
}

#bouton
{
  transform: rotate(-8deg);
  position: absolute;
  border-radius: 20px;
  width: 70px;
  height: 70px;
  margin-top: 66px;
  margin-left: 61px;
}

.frequence70s {
  background-image: url("./logo2.png");
  width: 312px;
  height: 58px;
  background-repeat: no-repeat;
  background-size: 300px;
  margin-left: 204px;
  margin-top: 39px;
  position: absolute;
  z-index: 99;
}

.online{
  margin-top: 98px;
  position: relative;
  margin-left: 115px;
  font-family: 'Mitr', sans-serif;
  font-size: 16px;
  border-radius: 20px;
  color: rgb(0, 0, 0);
  padding: 5px;
  background-color: rgb(255, 255, 255);
  width: 725px;
  bottom: 0;
}
#main {
  margin-top: -6px;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1.5em 1em;
  width: 821px;
  height: 596px;
  max-width: 90%;
  border-radius: 25px;
  position: static;
  z-index: 0;
  margin-left: 243px;
  text-align: center;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  font-size: 15px;
  color: white;
}

.card {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-top: 38px;
}
#whoAmI {
  font-family: 'Mitr', sans-serif;
letter-spacing: 0.02em;
font-size: 15px;
color: white;
}

.button {

background-image: linear-gradient(to right, #000, #000);
border-radius: 1.5em;
transition: opacity 300ms;
border: none;
padding: 7px;
right: 0;
font-family: 'Mitr', sans-serif;
letter-spacing: 0.02em;
position: absolute;
cursor: pointer;
margin-top: -202px;
margin-right: 303px;
font-size: 12px;
}

#knowMore {
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 8.5em;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: #e37046;
  border-color: coral;
}
#whoAreWe {
  position: absolute;
  z-index: 99;
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 5.5em;
  transition: opacity 300ms;
  border: none;
  padding: 5px;
  right: 0;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 12px;
  top: 56px;
  left: 666px;
  display: block;
  width: 127px;
  margin-left: 293px;
  margin-top: 200px;
  }

  .block {
    width: 746px;
    height: 194px;
    background-color: #000;
    border-radius: 25px;
    padding: 22px;
  }
#songList {
  position: relative;
  z-index: 2;
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 5.5em;
  transition: opacity 300ms;
  border: none;
  padding: 5px;
  right: 0;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 12px;
  top: 56px;
  left: 691px;
  display: block;
  width: 100px;

    }

a:link, a:visited
{
    color: white;
    text-decoration: none;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top:0;
  display: flex;
  justify-content: left;
  transition: .5s;
  z-index: 99;

}
.modal:target {
visibility: visible;
opacity: 1;
}
#modal_content {
  z-index: 99;
  position: relative;
  margin-top: 333px;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1.5em 1em;
  width: 820px;
  height: 553px;
  max-width: 90%;
  border-radius: 25px;
  margin-left: 104px;
}

#modal_select {
  z-index: 99;
  position: relative;
  margin-top: 406px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 757px;
  height: 685px;
  border-radius: 25px;
  margin-left: 14px;
}
#modal_select2 {
  z-index: 99;
  position: relative;
  margin-top: 409px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 791px;
  height: 1019px;
  border-radius: 25px;
  margin-left: -208px;
}
#modal_select3 {
  z-index: 99;
  position: relative;
  margin-top: 409px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 756px;
  height: 783px;
  border-radius: 25px;
  margin-left: -397px;
}
#modal_select4 {
  z-index: 99;
  position: relative;
  margin-top: 409px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 756px;
  height: 1137px;
  border-radius: 25px;
  margin-left: -602px;
}


#modal_close {
  position: absolute;
  right:15px;
  top: 15px;
  text-decoration: none;
  color: grey;
  font-size: 100px;
}
#modal_close2 {
  position: absolute;
  right:15px;
  top: 15px;
  text-decoration: none;
  color: grey;
  font-size: 100px;
  
}
#modal_close3 {
  position: absolute;
  right: 22px;
  top: -46px;
  color: rgb(0, 0, 0);
  font-size: 100px;
}

#modal_close4 {
  position: absolute;
  right: 22px;
  top: -46px;
  color: rgb(0, 0, 0);
  font-size: 100px;
}
#modal_close5 {
  position: absolute;
  right: 22px;
  top: -46px;
  color: rgb(0, 0, 0);
  font-size: 100px;
}
#modal_close6 {
  position: absolute;
  right: 22px;
  top: -46px;
  color: rgb(0, 0, 0);
  font-size: 100px;
}
.pochette {
  display: block;
  width: 125px;
  height: 246px;
}
.info {
  display: block;
  margin-top: -202px;
  margin-left: 266px;
  text-align: left;
  font-size: 12.5px;
}

.info2 {
  display: block;
  margin-top: -241px;
  margin-left: 266px;
  text-align: left;
  font-size: 12.5px;
}
.info3 {
  display: block;
  margin-top: -253px;
  margin-left: 266px;
  text-align: left;
  font-size: 12.5px;
}
.info4 {
  display: block;
  margin-top: -229px;
  margin-left: 266px;
  text-align: left;
  font-size: 12.5px;

}
.details {
  display: block;
  margin-top: 30px;
  margin-left: 0px;
  text-align: justify;
  font-size: 13px;
  background-color: black;
  padding: 20px;
  border-radius: 20px;
}

.lesNewsFrequence70s {
  display: block;
  margin-top: 12px;
  margin-left: 34px;
  text-align: center;
  font-size: 13px;
  background-color: black;
  padding: 20px;
  border-radius: 20px;
  height: 229px;
  width: 710px;
}

.lesPochettes {
  width:150px;
  border-radius:10px;
}
.pixOfSelection {
  width: 278px;
}
}
@media screen and (max-width: 1240px) and (min-width: 1200px) { 
  
  body {
    /* position: fixed; */
    background-image: url("./day.png");
    background-repeat: repeat;
    background-size: 72%;
    background-position: top;
    scrollbar-color: white black;
  }
  
  header {
    display: flex;
      margin: 0 auto;
      max-width: 880px; 
      height: 139px;
      margin-top: 200px;
      margin-right: 250px;
      
  }
  
  
  #volumeslider {
    position: absolute;
    margin-top: -100px;
    left: -230px;
  }
  
  .volumeClub {
    position: absolute;
    left: 372px;
    top: 479px;
    width: 20px;
    height: 250px;
  
  }
  #vinylePlay {
    background-image: url("./gif0.png");
    width: 250px;
    height: 200px;
    background-repeat: no-repeat;
    background-size: 190px;
    background-position: left, bottom;
    position: absolute;
    z-index: 99;
    margin-left: 28px;
    margin-top: 11px;
  }
  
  #bouton
  {
    transform: rotate(-8deg);
    position: absolute;
    border-radius: 20px;
    width: 70px;
    height: 70px;
    margin-top: 66px;
    margin-left: 61px;
  }
  
  .frequence70s {
    background-image: url("./logo2.png");
    width: 312px;
    height: 58px;
    background-repeat: no-repeat;
    background-size: 300px;
    margin-left: 204px;
    margin-top: 39px;
    position: absolute;
    z-index: 99;
  }
  
  .online{
    margin-top: 98px;
    position: relative;
    margin-left: 115px;
    font-family: 'Mitr', sans-serif;
    font-size: 16px;
    border-radius: 20px;
    color: rgb(0, 0, 0);
    padding: 5px;
    background-color: rgb(255, 255, 255);
    width: 854px;
    bottom: 0;
  }
  #main {
    margin-top: -6px;
    background-color: rgb(0, 0, 0, 0.5);
    padding: 1.5em 1em;
    width: 821px;
    height: 612px;
    max-width: 90%;
    border-radius: 25px;
    position: static;
    z-index: 0;
    margin-left: 243px;
    text-align: center;
    font-family: 'Mitr', sans-serif;
    letter-spacing: 0.02em;
    font-size: 15px;
    color: white;
  }
  
  .card {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-top: 38px;
  }
  #whoAmI {
    font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  font-size: 15px;
  color: white;
  }
  
  .button {
  
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 1.5em;
  transition: opacity 300ms;
  border: none;
  padding: 7px;
  right: 0;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  position: absolute;
  cursor: pointer;
  margin-top: -202px;
  margin-right: 303px;
  font-size: 12px;
  }
  
  #knowMore {
    background-image: linear-gradient(to right, #000, #000);
    border-radius: 8.5em;
    font-family: 'Mitr', sans-serif;
    letter-spacing: 0.05em;
    font-size: 12px;
    color: #e37046;
    border-color: coral;
  }
  #whoAreWe {
    position: absolute;
    z-index: 99;
    background-image: linear-gradient(to right, #000, #000);
    border-radius: 5.5em;
    transition: opacity 300ms;
    border: none;
    padding: 5px;
    right: 0;
    font-family: 'Mitr', sans-serif;
    letter-spacing: 0.05em;
    cursor: pointer;
    font-size: 12px;
    top: 56px;
    left: 525px;
    display: block;
    width: 127px;
    margin-left: 293px;
    margin-top: 200px;
    }
  
    .block {
      width: 746px;
      height: 194px;
      background-color: #000;
      border-radius: 25px;
      padding: 22px;
    }
  #songList {
    position: relative;
    z-index: 2;
    background-image: linear-gradient(to right, #000, #000);
    border-radius: 5.5em;
    transition: opacity 300ms;
    border: none;
    padding: 5px;
    right: 0;
    font-family: 'Mitr', sans-serif;
    letter-spacing: 0.05em;
    cursor: pointer;
    font-size: 12px;
    top: 56px;
    left: 609px;
    display: block;
    width: 100px;
  
      }
  
  a:link, a:visited
  {
      color: white;
      text-decoration: none;
  }
  
  .modal {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top:0;
    display: flex;
    justify-content: left;
    transition: .5s;
    z-index: 99;
  
  }
  .modal:target {
  visibility: visible;
  opacity: 1;
  }
  #modal_content {
    z-index: 99;
    position: relative;
    margin-top: 332px;
    background-color: rgb(0, 0, 0, 0.5);
    padding: 1.5em 1em;
    width: 820px;
    height: 553px;
    max-width: 90%;
    border-radius: 25px;
    margin-left: 106px;
  }
  #modal_content0 {
    z-index: 99;
    position: relative;
    margin-top: 333px;
    background-color: rgb(0, 0, 0, 0.5);
    padding: 1.5em 1em;
    width: 820px;
    height: 558px;
    max-width: 90%;
    border-radius: 25px;
    margin-left: 198px;
  }
  #modal_select {
    z-index: 99;
    position: relative;
    margin-top: 406px;
    background: linear-gradient( #3b2b5b,#702719, #d54a2e);
    padding: 1.5em 1em;
    width: 757px;
    height: 685px;
    border-radius: 25px;
    margin-left: 14px;
  }
  #modal_select2 {
    z-index: 99;
    position: relative;
    margin-top: 409px;
    background: linear-gradient( #3b2b5b,#702719, #d54a2e);
    padding: 1.5em 1em;
    width: 791px;
    height: 1019px;
    border-radius: 25px;
    margin-left: -208px;
  }
  #modal_select3 {
    z-index: 99;
    position: relative;
    margin-top: 409px;
    background: linear-gradient( #3b2b5b,#702719, #d54a2e);
    padding: 1.5em 1em;
    width: 756px;
    height: 783px;
    border-radius: 25px;
    margin-left: -397px;
  }
  #modal_select4 {
    z-index: 99;
    position: relative;
    margin-top: 409px;
    background: linear-gradient( #3b2b5b,#702719, #d54a2e);
    padding: 1.5em 1em;
    width: 756px;
    height: 1137px;
    border-radius: 25px;
    margin-left: -602px;
  }
  
  
  #modal_close {
    position: absolute;
    right:15px;
    top: 15px;
    text-decoration: none;
    color: grey;
    font-size: 100px;
  }
  #modal_close2 {
    position: absolute;
    right:15px;
    top: 15px;
    text-decoration: none;
    color: grey;
    font-size: 100px;
    
  }
  #modal_close3 {
    position: absolute;
    right: 22px;
    top: -46px;
    color: rgb(0, 0, 0);
    font-size: 100px;
  }
  
  #modal_close4 {
    position: absolute;
    right: 22px;
    top: -46px;
    color: rgb(0, 0, 0);
    font-size: 100px;
  }
  #modal_close5 {
    position: absolute;
    right: 22px;
    top: -46px;
    color: rgb(0, 0, 0);
    font-size: 100px;
  }
  #modal_close6 {
    position: absolute;
    right: 22px;
    top: -46px;
    color: rgb(0, 0, 0);
    font-size: 100px;
  }
  .pochette {
    display: block;
    width: 125px;
    height: 246px;
  }
  .info {
    display: block;
    margin-top: -202px;
    margin-left: 266px;
    text-align: left;
    font-size: 12.5px;
  }
  
  .info2 {
    display: block;
    margin-top: -241px;
    margin-left: 266px;
    text-align: left;
    font-size: 12.5px;
  }
  .info3 {
    display: block;
    margin-top: -253px;
    margin-left: 266px;
    text-align: left;
    font-size: 12.5px;
  }
  .info4 {
    display: block;
    margin-top: -229px;
    margin-left: 266px;
    text-align: left;
    font-size: 12.5px;
  
  }
  .details {
    display: block;
    margin-top: 30px;
    margin-left: 0px;
    text-align: justify;
    font-size: 13px;
    background-color: black;
    padding: 20px;
    border-radius: 20px;
  }
  
  .lesNewsFrequence70s {
    display: block;
    margin-top: 10px;
    margin-left: 34px;
    text-align: center;
    font-size: 13px;
    background-color: black;
    padding: 20px;
    border-radius: 20px;
    height: 233px;
    width: 710px;
  }
  
  .lesPochettes {
    width:150px;
    border-radius:10px;
  }
  .pixOfSelection {
    width: 278px;
  }
  #ampoule {
    position: relative;
    width: 23px;
    top: -740px;
    right: -961px;
  }
  }
  @media screen and (max-width: 1200px) and (min-width: 1000px) { 
  
    body {
      /* position: fixed; */
      background-image: url("./day.png");
      background-repeat: repeat;
      background-size: 75%;
      background-position: top;
      scrollbar-color: white black;
    }
    #ampoule {
      position: relative;
      width: 23px;
      top: -642px;
      right: -961px;
    }
    header {
      display: flex;
        margin: 0 auto;
        max-width: 880px; 
        height: 139px;
        margin-top: 200px;
        margin-right: 250px;
        
    }
    
    
    #volumeslider {
  display: none;
      margin-top: -100px;
      left: -230px;
    }
    
    .volumeClub {
      position: absolute;
      left: 372px;
      top: 479px;
      width: 20px;
      height: 250px;
    
    }
    #vinylePlay {
      background-image: url("./gif0.png");
      width: 250px;
      height: 200px;
      background-repeat: no-repeat;
      background-size: 190px;
      background-position: left, bottom;
      position: absolute;
      z-index: 99;
      margin-left: -35px;
      margin-top: 11px;
    }
    
    #bouton
    {
      transform: rotate(-8deg);
      position: absolute;
      border-radius: 20px;
      width: 70px;
      height: 70px;
      margin-top: 66px;
      margin-left: 61px;
    }
    
    .frequence70s {
      background-image: url("./logo2.png");
      width: 312px;
      height: 58px;
      background-repeat: no-repeat;
      background-size: 300px;
      margin-left: 148px;
      margin-top: 40px;
      position: absolute;
      z-index: 99;
    }
    
    .online{
      margin-top: 98px;
      position: relative;
      margin-left: 47px;
      font-family: 'Mitr', sans-serif;
      font-size: 16px;
      border-radius: 20px;
      color: rgb(0, 0, 0);
      padding: 5px;
      background-color: rgb(255, 255, 255);
      width: 781px;
      bottom: 0;
    }
    #main {
      margin-top: -6px;
      background-color: rgb(0, 0, 0, 0.5);
      padding: 1.5em 1em;
      width: 821px;
      height: 513px;
      max-width: 90%;
      border-radius: 25px;
      position: static;
      z-index: 0;
      margin-left: 113px;
      text-align: center;
      font-family: 'Mitr', sans-serif;
      letter-spacing: 0.02em;
      font-size: 15px;
      color: white;
    }
    
    .card {
      display: inline-block;
      width: 200px;
      height: 200px;
      margin-top: 38px;
    }
    #whoAmI {
      font-family: 'Mitr', sans-serif;
    letter-spacing: 0.02em;
    font-size: 15px;
    color: white;
    }
    
    .button {
    
    background-image: linear-gradient(to right, #000, #000);
    border-radius: 1.5em;
    transition: opacity 300ms;
    border: none;
    padding: 7px;
    right: 0;
    font-family: 'Mitr', sans-serif;
    letter-spacing: 0.02em;
    position: absolute;
    cursor: pointer;
    margin-top: -202px;
    margin-right: 303px;
    font-size: 12px;
    }
    
    #knowMore {
      background-image: linear-gradient(to right, #000, #000);
      border-radius: 8.5em;
      font-family: 'Mitr', sans-serif;
      letter-spacing: 0.05em;
      font-size: 12px;
      color: #e37046;
      border-color: coral;
    }
    #whoAreWe {
      position: absolute;
      z-index: 99;
      background-image: linear-gradient(to right, #000, #000);
      border-radius: 5.5em;
      transition: opacity 300ms;
      border: none;
      padding: 5px;
      right: 0;
      font-family: 'Mitr', sans-serif;
      letter-spacing: 0.05em;
      cursor: pointer;
      font-size: 12px;
      top: 56px;
      left: 525px;
      display: block;
      width: 127px;
      margin-left: 266px;
      margin-top: 200px;
      }
    
      .block {
        width: 746px;
        height: 194px;
        background-color: #000;
        border-radius: 25px;
        padding: 22px;
      }
    #songList {
      position: relative;
      z-index: 2;
      background-image: linear-gradient(to right, #000, #000);
      border-radius: 5.5em;
      transition: opacity 300ms;
      border: none;
      padding: 5px;
      right: 0;
      font-family: 'Mitr', sans-serif;
      letter-spacing: 0.05em;
      cursor: pointer;
      font-size: 12px;
      top: 56px;
      left: 609px;
      display: block;
      width: 100px;
    
        }
    
    a:link, a:visited
    {
        color: white;
        text-decoration: none;
    }
    
    .modal {
      visibility: hidden;
      opacity: 0;
      position: absolute;
      top:0;
      display: flex;
      justify-content: left;
      transition: .5s;
      z-index: 99;
    
    }
    .modal:target {
    visibility: visible;
    opacity: 1;
    }
    #modal_content {
      z-index: 99;
      position: relative;
      margin-top: 333px;
      background-color: rgb(0, 0, 0, 0.5);
      padding: 1.5em 1em;
      width: 820px;
      height: 553px;
      max-width: 90%;
      border-radius: 25px;
      margin-left: 104px;
    }
    
    #modal_select {
      z-index: 99;
      position: relative;
      margin-top: 406px;
      background: linear-gradient( #3b2b5b,#702719, #d54a2e);
      padding: 1.5em 1em;
      width: 757px;
      height: 685px;
      border-radius: 25px;
      margin-left: 14px;
    }
    #modal_select2 {
      z-index: 99;
      position: relative;
      margin-top: 409px;
      background: linear-gradient( #3b2b5b,#702719, #d54a2e);
      padding: 1.5em 1em;
      width: 791px;
      height: 1019px;
      border-radius: 25px;
      margin-left: -208px;
    }
    #modal_select3 {
      z-index: 99;
      position: relative;
      margin-top: 409px;
      background: linear-gradient( #3b2b5b,#702719, #d54a2e);
      padding: 1.5em 1em;
      width: 756px;
      height: 783px;
      border-radius: 25px;
      margin-left: -397px;
    }
    #modal_select4 {
      z-index: 99;
      position: relative;
      margin-top: 409px;
      background: linear-gradient( #3b2b5b,#702719, #d54a2e);
      padding: 1.5em 1em;
      width: 756px;
      height: 1137px;
      border-radius: 25px;
      margin-left: -602px;
    }
    
    
    #modal_close {
      position: absolute;
      right:15px;
      top: 15px;
      text-decoration: none;
      color: grey;
      font-size: 100px;
    }
    #modal_close2 {
      position: absolute;
      right:15px;
      top: 15px;
      text-decoration: none;
      color: grey;
      font-size: 100px;
      
    }
    #modal_close3 {
      position: absolute;
      right: 22px;
      top: -46px;
      color: rgb(0, 0, 0);
      font-size: 100px;
    }
    
    #modal_close4 {
      position: absolute;
      right: 22px;
      top: -46px;
      color: rgb(0, 0, 0);
      font-size: 100px;
    }
    #modal_close5 {
      position: absolute;
      right: 22px;
      top: -46px;
      color: rgb(0, 0, 0);
      font-size: 100px;
    }
    #modal_close6 {
      position: absolute;
      right: 22px;
      top: -46px;
      color: rgb(0, 0, 0);
      font-size: 100px;
    }
    .pochette {
      display: block;
      width: 125px;
      height: 246px;
    }
    .info {
      display: block;
      margin-top: -202px;
      margin-left: 266px;
      text-align: left;
      font-size: 12.5px;
    }
    
    .info2 {
      display: block;
      margin-top: -241px;
      margin-left: 266px;
      text-align: left;
      font-size: 12.5px;
    }
    .info3 {
      display: block;
      margin-top: -253px;
      margin-left: 266px;
      text-align: left;
      font-size: 12.5px;
    }
    .info4 {
      display: block;
      margin-top: -229px;
      margin-left: 266px;
      text-align: left;
      font-size: 12.5px;
    
    }
    .details {
      display: block;
      margin-top: 30px;
      margin-left: 0px;
      text-align: justify;
      font-size: 13px;
      background-color: black;
      padding: 20px;
      border-radius: 20px;
    }
    
    .lesNewsFrequence70s {
      display: block;
      margin-top: 3px;
      margin-left: 9px;
      text-align: center;
      font-size: 13px;
      background-color: black;
      padding: 20px;
      border-radius: 20px;
      height: 149px;
      width: 761px;
    }
    
    .lesPochettes {
      width:150px;
      border-radius:10px;
    }
    .pixOfSelection {
      width: 278px;
    }
    }

@media all and (max-width: 1000px)  {
  body {
    /* position: fixed; */
     background-image: url("./day.png");
     background-repeat:repeat;
     background-size: 150%;
     background-position:center;
     scrollbar-color: white black;
     margin-left: -48px;
 }
 header {
  display: flex;
    margin: 0 auto;
    max-width: 880px; 
    height: 139px;
    margin-top: 200px;
    margin-right: 250px;
    
}
#ampoule {
  display:none;
  }
#vinylePlay {
  background-image: url("./gif0.png");
  width: 249px;
  height: 249px;
  background-repeat: no-repeat;
  background-size: 253px;
  background-position: left, bottom;
  position: absolute;
  z-index: 99;
  margin-left: 333px;
  margin-top: -90px;
}

#bouton
{
  transform: rotate(-8deg);
  position: absolute;
  border-radius: 20px;
  width: 97px;
  height: 96px;
  margin-top: 78px;
  margin-left: 77px;
}

.frequence70s {
  background-image: url("./logo2.png");
  width: 487px;
  height: 94px;
  background-repeat: no-repeat;
  background-size: 454px;
  margin-left: 237px;
  margin-top: -172px;
  position: absolute;
  z-index: 99;
}

.online{
  margin-top: 169px;
  position: relative;
  margin-left: -50px;
  font-family: 'Mitr', sans-serif;
  font-size: 14px;
  border-radius: 20px;
  color: rgb(0, 0, 0);
  padding: 5px;
  background-color: rgb(255, 255, 255);
  width: 780px;
  bottom: 0;
}
#volumeslider {
  display:none;
}
#main {
  margin-top: 58px;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1.5em 1em;
  width: 742px;
  height: 875px;
  max-width: 92%;
  border-radius: 25px;
  position: static;
  z-index: 0;
  margin-left: 62px;
  text-align: center;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  font-size: 15px;
  color: white;
}

.card {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-top: 38px;
  padding: 37px;
}
#whoAmI {
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  font-size: 12px;
  color: white;
}

.button {

background-image: linear-gradient(to right, #000, #000);
border-radius: 1.5em;
transition: opacity 300ms;
border: none;
padding: 7px;
right: 0;
font-family: 'Mitr', sans-serif;
letter-spacing: 0.02em;
position: absolute;
cursor: pointer;
margin-top: -202px;
margin-right: 303px;
font-size: 12px;
}

#knowMore {
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 8.5em;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: #e37046;
  border-color: coral;
}
#whoAreWe {
  position: absolute;
  z-index: 99;
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 5.5em;
  transition: opacity 300ms;
  border: none;
  padding: 5px;
  right: 0;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 12px;
  top: 66px;
  left: 1074px;
  display: block;
  width: 127px;
  margin-left: -574px;
  margin-top: 268px;
  }

  .block {
    width: 274px;
    height: 265px;
    background-color: #000;
    border-radius: 25px;
    padding: 23px;
    margin-left: -5px;
  }
#songList {
  position: relative;
  z-index: 2;
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 5.5em;
  transition: opacity 300ms;
  border: none;
  padding: 5px;
  right: 0;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 12px;
  top: 133px;
  left: 724px;
  display: block;
  width: 100px;

    }

a:link, a:visited
{
    color: white;
    text-decoration: none;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top:0;
  display: flex;
  justify-content: left;
  transition: .5s;
  z-index: 99;

}
.modal:target {
visibility: visible;
opacity: 1;
}
#modal_content {
  z-index: 99;
  position: relative;
  margin-top: 401px;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1.5em 1em;
  width: 745px;
  height: 666px;
  max-width: 90%;
  border-radius: 25px;
  margin-left: 60px;
}

#modal_select {
  z-index: 99;
  position: relative;
  margin-top: 446px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 700px;
  height: 692px;
  border-radius: 25px;
  margin-left: -125px;
}
#modal_select2 {
  z-index: 99;
  position: relative;
  margin-top: 448px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 700px;
  height: 1070px;
  border-radius: 25px;
  margin-left: -405px;
}
#modal_select3 {
  z-index: 99;
  position: relative;
  margin-top: 448px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 700px;
  height: 837px;
  border-radius: 25px;
  margin-left: -125px;
}
#modal_select4 {
  z-index: 99;
  position: relative;
  margin-top: 448px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 700px;
  height: 760px;
  border-radius: 25px;
  margin-left: -405px;
}


#modal_close {
  position: absolute;
  right: -1px;
  top: 0px;
  text-decoration: none;
  color: white;
  font-size: 85px;
}
#modal_close2 {
  position: absolute;
  right: -1px;
  top: 0px;
  text-decoration: none;
  color: white;
  font-size: 85px;
  
}
#modal_close3 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}

#modal_close4 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}
#modal_close5 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}
#modal_close6 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}
.pochette {
  display: block;
  width: 125px;
  height: 246px;
}
.info {
  display: block;
  margin-top: -217px;
  margin-left: 271px;
  text-align: left;
  font-size: 12.5px;
}

.info2 {
  display: block;
  margin-top: -243px;
  margin-left: 271px;
  text-align: left;
  font-size: 12.5px;
}
.info3 {
  display: block;
  margin-top: -243px;
  margin-left: 271px;
  text-align: left;
  font-size: 12.5px;
}
.info4 {
  display: block;
  margin-top: -223px;
  margin-left: 271px;
  text-align: left;
  font-size: 12.5px;

}
.details {
  display: block;
  margin-top: 30px;
  margin-left: 0px;
  text-align: justify;
  font-size: 13px;
  background-color: black;
  padding: 20px;
  border-radius: 20px;
}

.lesNewsFrequence70s {
  display: block;
  margin-top: -22px;
  margin-left: -8px;
  text-align: center;
  font-size: 10px;
  background-color: black;
  padding: 20px;
  border-radius: 20px;
  height: 62px;
  width: 690px;
}
.lesPochettes {
  width: 210px;
  border-radius: 10px;
}
.pixOfSelection {
  width: 250px;
}
 }
 @media all and (max-width: 800px) { 
  body {
    /* position: fixed; */
     background-image: url("./day.png");
     background-repeat:repeat;
     background-size: 150%;
     background-position:center;
     scrollbar-color: white black;
     margin-left: -48px;
 }
 header {
  display: flex;
    margin: 0 auto;
    max-width: 880px; 
    height: 139px;
    margin-top: 200px;
    margin-right: 250px;
    
}
#ampoule {
  display:none;
  }
#vinylePlay {
  background-image: url("./gif0.png");
  width: 249px;
  height: 249px;
  background-repeat: no-repeat;
  background-size: 253px;
  background-position: left, bottom;
  position: absolute;
  z-index: 99;
  margin-left: 333px;
  margin-top: -90px;
}

#bouton
{
  transform: rotate(-8deg);
  position: absolute;
  border-radius: 20px;
  width: 97px;
  height: 96px;
  margin-top: 78px;
  margin-left: 77px;
}

.frequence70s {
  background-image: url("./logo2.png");
  width: 487px;
  height: 94px;
  background-repeat: no-repeat;
  background-size: 454px;
  margin-left: 237px;
  margin-top: -172px;
  position: absolute;
  z-index: 99;
}

.online{
  margin-top: 169px;
  position: relative;
  margin-left: -50px;
  font-family: 'Mitr', sans-serif;
  font-size: 14px;
  border-radius: 20px;
  color: rgb(0, 0, 0);
  padding: 5px;
  background-color: rgb(255, 255, 255);
  width: 780px;
  bottom: 0;
}
#volumeslider {
  display:none;
}
#main {
  margin-top: 58px;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1.5em 1em;
  width: 742px;
  height: 875px;
  max-width: 92%;
  border-radius: 25px;
  position: static;
  z-index: 0;
  margin-left: 62px;
  text-align: center;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  font-size: 15px;
  color: white;
}

.card {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-top: 38px;
  padding: 37px;
}
#whoAmI {
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  font-size: 12px;
  color: white;
}

.button {

background-image: linear-gradient(to right, #000, #000);
border-radius: 1.5em;
transition: opacity 300ms;
border: none;
padding: 7px;
right: 0;
font-family: 'Mitr', sans-serif;
letter-spacing: 0.02em;
position: absolute;
cursor: pointer;
margin-top: -202px;
margin-right: 303px;
font-size: 12px;
}

#knowMore {
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 8.5em;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: #e37046;
  border-color: coral;
}
#whoAreWe {
  position: absolute;
  z-index: 99;
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 5.5em;
  transition: opacity 300ms;
  border: none;
  padding: 5px;
  right: 0;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 12px;
  top: 66px;
  left: 1074px;
  display: block;
  width: 127px;
  margin-left: -574px;
  margin-top: 268px;
  }

  .block {
    width: 274px;
    height: 265px;
    background-color: #000;
    border-radius: 25px;
    padding: 23px;
    margin-left: -5px;
  }
#songList {
  position: relative;
  z-index: 2;
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 5.5em;
  transition: opacity 300ms;
  border: none;
  padding: 5px;
  right: 0;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 12px;
  top: 133px;
  left: 724px;
  display: block;
  width: 100px;

    }

a:link, a:visited
{
    color: white;
    text-decoration: none;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top:0;
  display: flex;
  justify-content: left;
  transition: .5s;
  z-index: 99;

}
.modal:target {
visibility: visible;
opacity: 1;
}
#modal_content {
  z-index: 99;
  position: relative;
  margin-top: 401px;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1.5em 1em;
  width: 745px;
  height: 666px;
  max-width: 90%;
  border-radius: 25px;
  margin-left: 60px;
}

#modal_select {
  z-index: 99;
  position: relative;
  margin-top: 446px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 700px;
  height: 692px;
  border-radius: 25px;
  margin-left: -125px;
}
#modal_select2 {
  z-index: 99;
  position: relative;
  margin-top: 448px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 700px;
  height: 1070px;
  border-radius: 25px;
  margin-left: -405px;
}
#modal_select3 {
  z-index: 99;
  position: relative;
  margin-top: 448px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 700px;
  height: 831px;
  border-radius: 25px;
  margin-left: -125px;
}
#modal_select4 {
  z-index: 99;
  position: relative;
  margin-top: 448px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 700px;
  height: 760px;
  border-radius: 25px;
  margin-left: -405px;
}


#modal_close {
  position: absolute;
  right: -1px;
  top: 0px;
  text-decoration: none;
  color: white;
  font-size: 85px;
}
#modal_close2 {
  position: absolute;
  right: -1px;
  top: 0px;
  text-decoration: none;
  color: white;
  font-size: 85px;
  
}
#modal_close3 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}

#modal_close4 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}
#modal_close5 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}
#modal_close6 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}
.pochette {
  display: block;
  width: 125px;
  height: 246px;
}
.info {
  display: block;
  margin-top: -217px;
  margin-left: 271px;
  text-align: left;
  font-size: 12.5px;
}

.info2 {
  display: block;
  margin-top: -243px;
  margin-left: 271px;
  text-align: left;
  font-size: 12.5px;
}
.info3 {
  display: block;
  margin-top: -243px;
  margin-left: 271px;
  text-align: left;
  font-size: 12.5px;
}
.info4 {
  display: block;
  margin-top: -223px;
  margin-left: 271px;
  text-align: left;
  font-size: 12.5px;

}
.details {
  display: block;
  margin-top: 30px;
  margin-left: 0px;
  text-align: justify;
  font-size: 13px;
  background-color: black;
  padding: 20px;
  border-radius: 20px;
}

.lesNewsFrequence70s {
  display: block;
  margin-top: -22px;
  margin-left: -8px;
  text-align: center;
  font-size: 10px;
  background-color: black;
  padding: 20px;
  border-radius: 20px;
  height: 62px;
  width: 690px;
}
.lesPochettes {
  width: 210px;
  border-radius: 10px;
}
.pixOfSelection {
  width: 250px;
}
 }
 @media all and (max-width: 530px) { 
  body {
    /* position: fixed; */
     background-image: url("./day.png");
     background-repeat:repeat;
     background-size: 150%;
     background-position:center;
     scrollbar-color: white black;
 
 }

 .volume {
display: none;
}
 header {
  display: flex;
    margin: 0 auto;
    max-width: 880px; 
    height: 139px;
    margin-top: 200px;
    margin-right: 250px;
    
}

#vinylePlay {
  background-image: url("./gif0.png");
  width: 211px;
  height: 249px;
  background-repeat: no-repeat;
  background-size: 208px;
  background-position: left, bottom;
  position: absolute;
  z-index: 99;
  margin-left: 116px;
  margin-top: -131px;
}

#bouton
{
  transform: rotate(-8deg);
  position: absolute;
  border-radius: 20px;
  width: 74px;
  height: 74px;
  margin-top: 87.5px;
  margin-left: 67px;
}

.frequence70s {
  background-image: url("./logo2.png");
  width: 337px;
  height: 58px;
  background-repeat: no-repeat;
  background-size: 322px;
  margin-left: 70px;
  margin-top: -172px;
  position: absolute;
  z-index: 99;
}

.online{
  margin-top: 169px;
  position: relative;
  margin-left: -53px;
  font-family: 'Mitr', sans-serif;
  font-size: 11px;
  border-radius: 20px;
  color: rgb(0, 0, 0);
  padding: 5px;
  background-color: rgb(255, 255, 255);
  width: 334px;
  bottom: 0;
}
#main {
  margin-top: 76px;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1.5em 1em;
  width: 316px;
  height: 1533px;
  max-width: 92%;
  border-radius: 25px;
  position: static;
  z-index: 0;
  margin-left: 55px;
  text-align: center;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  font-size: 15px;
  color: white;
}

.card {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-top: -5px;
}
#whoAmI {
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  font-size: 12px;
  color: white;
}

.button {

background-image: linear-gradient(to right, #000, #000);
border-radius: 1.5em;
transition: opacity 300ms;
border: none;
padding: 7px;
right: 0;
font-family: 'Mitr', sans-serif;
letter-spacing: 0.02em;
position: absolute;
cursor: pointer;
margin-top: -202px;
margin-right: 303px;
font-size: 12px;
}

#knowMore {
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 8.5em;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: #e37046;
  border-color: coral;
}
#whoAreWe {
  position: absolute;
  z-index: 99;
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 5.5em;
  transition: opacity 300ms;
  border: none;
  padding: 5px;
  right: 0;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 12px;
  top: 65px;
  left: 666px;
  display: block;
  width: 127px;
  margin-left: -574px;
  margin-top: 268px;
  }

  .block {
    width: 274px;
    height: 265px;
    background-color: #000;
    border-radius: 25px;
    padding: 23px;
    margin-left: -5px;
  }
#songList {
  position: relative;
  z-index: 2;
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 5.5em;
  transition: opacity 300ms;
  border: none;
  padding: 5px;
  right: 0;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 12px;
  top: 132px;
  left: 290px;
  display: block;
  width: 100px;

    }

a:link, a:visited
{
    color: white;
    text-decoration: none;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top:0;
  display: flex;
  justify-content: left;
  transition: .5s;
  z-index: 99;

}
.modal:target {
visibility: visible;
opacity: 1;
}
#modal_content {
  z-index: 99;
  position: relative;
  margin-top: 396px;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1.5em 1em;
  width: 314px;
  height: 728px;
  max-width: 90%;
  border-radius: 25px;
  margin-left: 55px;
}

#modal_select {
  z-index: 99;
  position: relative;
  margin-top: 446px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 294px;
  height: 1350px;
  border-radius: 25px;
  margin-left: -61px;
}
#modal_select2 {
  z-index: 99;
  position: relative;
  margin-top: 446px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 294px;
  height: 2278px;
  border-radius: 25px;
  margin-left: -59px;
}
#modal_select3 {
  z-index: 99;
  position: relative;
  margin-top: 462px;
  height: 1591px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 294px;

  border-radius: 25px;
  margin-left: -59px;
}
#modal_select4 {
  z-index: 99;
  position: relative;
  margin-top: 446px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 294px;
  height: 1550px;
  border-radius: 25px;
  margin-left: -59px;
}


#modal_close {
  position: absolute;
  right: -1px;
  top: 0px;
  text-decoration: none;
  color: white;
  font-size: 85px;
}
#modal_close2 {
  position: absolute;
  right: -1px;
  top: 0px;
  text-decoration: none;
  color: white;
  font-size: 85px;
  
}
#modal_close3 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}

#modal_close4 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}
#modal_close5 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}
#modal_close6 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}
.pochette {
  display: block;
  width: 125px;
  height: 246px;
}
.info {
  display: block;
  margin-top: 11px;
  margin-left: 8px;
  text-align: left;
  font-size: 12.5px;
}

.info2 {
  display: block;
  margin-top: 22px;
  margin-left: 2px;
  text-align: left;
  font-size: 12.5px;
}
.info3 {
  display: block;
  margin-top: 22px;
  margin-left: 2px;
  text-align: left;
  font-size: 12.5px;
}
.info4 {
  display: block;
  margin-top: 22px;
  margin-left: 2px;
  text-align: left;
  font-size: 12.5px;

}
.details {
  display: block;
  margin-top: 30px;
  margin-left: 0px;
  text-align: justify;
  font-size: 13px;
  background-color: black;
  padding: 8px;
  border-radius: 20px;
}

.lesNewsFrequence70s {
  display: block;
  margin-top: -12px;
  margin-left: -4px;
  text-align: center;
  font-size: 13px;
  background-color: black;
  padding: 10px;
  border-radius: 20px;
  height: 323px;
  width: 301px;
}
.lesPochettes {
  width: 178px;
  border-radius: 10px;
}
.pixOfSelection {
  width: 213px;
}
.volumeClub {
  display:none;
}
#np_recent_tracks {
  font-family: 'Mitr', sans-serif;
  font-size: 10px;
  color: white;
  text-align: left;
  margin-top: 20px;
}
.historique {
  margin-left: -160px;
}

#modal_content0{
  z-index: 99;
position: relative;
margin-top: 397px;
background-color: rgb(0, 0, 0, 0.5);
padding: 1.5em 1em;
width: 315px;
height: 674px;
max-width: 90%;
border-radius: 25px;
margin-left: 54px;
}
#ampoule {
  display:none;
  }
}

@media all and (max-width: 450px) { 
  body {
    /* position: fixed; */
     background-image: url("./day.png");
     background-repeat:repeat;
     background-size: 150%;
     background-position:center;
     scrollbar-color: white black;
 
 }

 .volume {
display: none;
}
 header {
  display: flex;
    margin: 0 auto;
    max-width: 880px; 
    height: 139px;
    margin-top: 200px;
    margin-right: 250px;
    
}

#vinylePlay {
  background-image: url("./gif0.png");
  width: 211px;
  height: 249px;
  background-repeat: no-repeat;
  background-size: 208px;
  background-position: left, bottom;
  position: absolute;
  z-index: 99;
  margin-left: 116px;
  margin-top: -131px;
}

#bouton
{
  transform: rotate(-8deg);
  position: absolute;
  border-radius: 20px;
  width: 74px;
  height: 74px;
  margin-top: 87.5px;
  margin-left: 67px;
}

.frequence70s {
  background-image: url("./logo2.png");
  width: 337px;
  height: 58px;
  background-repeat: no-repeat;
  background-size: 322px;
  margin-left: 70px;
  margin-top: -172px;
  position: absolute;
  z-index: 99;
}

.online{
  margin-top: 169px;
  position: relative;
  margin-left: -53px;
  font-family: 'Mitr', sans-serif;
  font-size: 11px;
  border-radius: 20px;
  color: rgb(0, 0, 0);
  padding: 5px;
  background-color: rgb(255, 255, 255);
  width: 334px;
  bottom: 0;
}
#main {
  margin-top: 76px;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1.5em 1em;
  width: 316px;
  height: 1518px;
  max-width: 92%;
  border-radius: 25px;
  position: static;
  z-index: 0;
  margin-left: 55px;
  text-align: center;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  font-size: 15px;
  color: white;
}

.card {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-top: -5px;
}
#whoAmI {
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  font-size: 12px;
  color: white;
}

.button {

background-image: linear-gradient(to right, #000, #000);
border-radius: 1.5em;
transition: opacity 300ms;
border: none;
padding: 7px;
right: 0;
font-family: 'Mitr', sans-serif;
letter-spacing: 0.02em;
position: absolute;
cursor: pointer;
margin-top: -202px;
margin-right: 303px;
font-size: 12px;
}

#knowMore {
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 8.5em;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: #e37046;
  border-color: coral;
}
#whoAreWe {
  position: absolute;
  z-index: 99;
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 5.5em;
  transition: opacity 300ms;
  border: none;
  padding: 5px;
  right: 0;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 12px;
  top: 65px;
  left: 666px;
  display: block;
  width: 127px;
  margin-left: -574px;
  margin-top: 268px;
  }

  .block {
    width: 274px;
    height: 265px;
    background-color: #000;
    border-radius: 25px;
    padding: 23px;
    margin-left: -5px;
  }
#songList {
  position: relative;
  z-index: 2;
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 5.5em;
  transition: opacity 300ms;
  border: none;
  padding: 5px;
  right: 0;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 12px;
  top: 132px;
  left: 290px;
  display: block;
  width: 100px;

    }

a:link, a:visited
{
    color: white;
    text-decoration: none;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top:0;
  display: flex;
  justify-content: left;
  transition: .5s;
  z-index: 99;

}
.modal:target {
visibility: visible;
opacity: 1;
}
#modal_content {
  z-index: 99;
  position: relative;
  margin-top: 396px;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1.5em 1em;
  width: 314px;
  height: 728px;
  max-width: 90%;
  border-radius: 25px;
  margin-left: 55px;
}

#modal_select {
  z-index: 99;
  position: relative;
  margin-top: 446px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 294px;
  height: 1350px;
  border-radius: 25px;
  margin-left: -61px;
}
#modal_select2 {
  z-index: 99;
  position: relative;
  margin-top: 446px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 294px;
  height: 2278px;
  border-radius: 25px;
  margin-left: -59px;
}
#modal_select3 {
  z-index: 99;
  position: relative;

  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 294px;
  margin-top: 462px;
  height: 1591px;
  border-radius: 25px;
  margin-left: -59px;
}
#modal_select4 {
  z-index: 99;
  position: relative;
  margin-top: 446px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 294px;
  height: 1550px;
  border-radius: 25px;
  margin-left: -59px;
}


#modal_close {
  position: absolute;
  right: -1px;
  top: 0px;
  text-decoration: none;
  color: white;
  font-size: 85px;
}
#modal_close2 {
  position: absolute;
  right: -1px;
  top: 0px;
  text-decoration: none;
  color: white;
  font-size: 85px;
  
}
#modal_close3 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}

#modal_close4 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}
#modal_close5 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}
#modal_close6 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}
.pochette {
  display: block;
  width: 125px;
  height: 246px;
}
.info {
  display: block;
  margin-top: 11px;
  margin-left: 8px;
  text-align: left;
  font-size: 12.5px;
}

.info2 {
  display: block;
  margin-top: 22px;
  margin-left: 2px;
  text-align: left;
  font-size: 12.5px;
}
.info3 {
  display: block;
  margin-top: 22px;
  margin-left: 2px;
  text-align: left;
  font-size: 12.5px;
}
.info4 {
  display: block;
  margin-top: 22px;
  margin-left: 2px;
  text-align: left;
  font-size: 12.5px;

}
.details {
  display: block;
  margin-top: 30px;
  margin-left: 0px;
  text-align: justify;
  font-size: 13px;
  background-color: black;
  padding: 8px;
  border-radius: 20px;
}

.lesNewsFrequence70s {
  display: block;
  margin-top: -12px;
  margin-left: -4px;
  text-align: center;
  font-size: 13px;
  background-color: black;
  padding: 10px;
  border-radius: 20px;
  height: 323px;
  width: 301px;
}
.lesPochettes {
  width: 178px;
  border-radius: 10px;
}
.pixOfSelection {
  width: 213px;
}
.volumeClub {
  display:none;
}
#np_recent_tracks {
  font-family: 'Mitr', sans-serif;
  font-size: 10px;
  color: white;
  text-align: left;
  margin-top: 20px;
}
.historique {
  margin-left: -160px;
}

#modal_content0{
  z-index: 99;
position: relative;
margin-top: 397px;
background-color: rgb(0, 0, 0, 0.5);
padding: 1.5em 1em;
width: 315px;
height: 674px;
max-width: 90%;
border-radius: 25px;
margin-left: 54px;
}
#ampoule {
  display:none;
  }
}

@media all and (max-width: 400px) { 
  body {
    /* position: fixed; */
     background-image: url("./day.png");
     background-repeat:repeat;
     background-size: 150%;
     background-position:center;
     scrollbar-color: white black;
 
 }

 .volume {
display: none;
}
 header {
  display: flex;
    margin: 0 auto;
    max-width: 880px; 
    height: 139px;
    margin-top: 200px;
    margin-right: 250px;
    
}

#vinylePlay {
  background-image: url("./gif0.png");
  width: 211px;
  height: 249px;
  background-repeat: no-repeat;
  background-size: 208px;
  background-position: left, bottom;
  position: absolute;
  z-index: 99;
  margin-left: 136px;
  margin-top: -131px;
}

#bouton
{
  transform: rotate(-8deg);
  position: absolute;
  border-radius: 20px;
  width: 74px;
  height: 74px;
  margin-top: 87.5px;
  margin-left: 67px;
}

.frequence70s {
  background-image: url("./logo2.png");
  width: 337px;
  height: 58px;
  background-repeat: no-repeat;
  background-size: 322px;
  margin-left: 70px;
  margin-top: -172px;
  position: absolute;
  z-index: 99;
}

.online{
  margin-top: 169px;
  position: relative;
  margin-left: -53px;
  font-family: 'Mitr', sans-serif;
  font-size: 11px;
  border-radius: 20px;
  color: rgb(0, 0, 0);
  padding: 5px;
  background-color: rgb(255, 255, 255);
  width: 356px;
  bottom: 0;
}
#main {
  margin-top: 76px;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1.5em 1em;
  width: 336px;
  height: 1570px;
  max-width: 92%;
  border-radius: 25px;
  position: static;
  z-index: 0;
  margin-left: 55px;
  text-align: center;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  font-size: 15px;
  color: white;
}

.card {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-top: -5px;
}
#whoAmI {
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  font-size: 12px;
  color: white;
}

.button {

background-image: linear-gradient(to right, #000, #000);
border-radius: 1.5em;
transition: opacity 300ms;
border: none;
padding: 7px;
right: 0;
font-family: 'Mitr', sans-serif;
letter-spacing: 0.02em;
position: absolute;
cursor: pointer;
margin-top: -202px;
margin-right: 303px;
font-size: 12px;
}

#knowMore {
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 8.5em;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: #e37046;
  border-color: coral;
}
#whoAreWe {
  position: absolute;
  z-index: 99;
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 5.5em;
  transition: opacity 300ms;
  border: none;
  padding: 5px;
  right: 0;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 12px;
  top: 65px;
  left: 685px;
  display: block;
  width: 127px;
  margin-left: -574px;
  margin-top: 268px;
  }

  .block {
    width: 274px;
    height: 265px;
    background-color: #000;
    border-radius: 25px;
    padding: 23px;
    margin-left: -5px;
  }
#songList {
  position: relative;
  z-index: 2;
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 5.5em;
  transition: opacity 300ms;
  border: none;
  padding: 5px;
  right: 0;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 12px;
  top: 132px;
  left: 303px;
  display: block;
  width: 100px;

    }

a:link, a:visited
{
    color: white;
    text-decoration: none;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top:0;
  display: flex;
  justify-content: left;
  transition: .5s;
  z-index: 99;

}
.modal:target {
visibility: visible;
opacity: 1;
}
#modal_content {
  z-index: 99;
  position: relative;
  margin-top: 414px;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1.5em 1em;
  width: 314px;
  height: 728px;
  max-width: 90%;
  border-radius: 25px;
  margin-left: 55px;
}

#modal_select {
  z-index: 99;
  position: relative;
  margin-top: 464px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 294px;
  height: 1661px;
  border-radius: 25px;
  margin-left: -61px;
}
#modal_select2 {
  z-index: 99;
  position: relative;
  margin-top: 460px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 294px;
  height: 1454px;
  border-radius: 25px;
  margin-left: -59px;
}
#modal_select3 {
  z-index: 99;
  position: relative;

  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 294px;
  margin-top: 462px;
  height: 1591px;
  border-radius: 25px;
  margin-left: -59px;
}
#modal_select4 {
  z-index: 99;
  position: relative;
  margin-top: 462px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 294px;
  height: 2647px;
  border-radius: 25px;
  margin-left: -59px;
}


#modal_close {
  position: absolute;
  right: -1px;
  top: 0px;
  text-decoration: none;
  color: white;
  font-size: 85px;
}
#modal_close2 {
  position: absolute;
  right: -1px;
  top: 0px;
  text-decoration: none;
  color: white;
  font-size: 85px;
  
}
#modal_close3 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}

#modal_close4 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}
#modal_close5 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}
#modal_close6 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}
.pochette {
  display: block;
  width: 125px;
  height: 246px;
}
.info {
  display: block;
  margin-top: 11px;
  margin-left: 8px;
  text-align: left;
  font-size: 12.5px;
}

.info2 {
  display: block;
  margin-top: 22px;
  margin-left: 2px;
  text-align: left;
  font-size: 12.5px;
}
.info3 {
  display: block;
  margin-top: 22px;
  margin-left: 2px;
  text-align: left;
  font-size: 12.5px;
}
.info4 {
  display: block;
  margin-top: 22px;
  margin-left: 2px;
  text-align: left;
  font-size: 12.5px;

}
.details {
  display: block;
  margin-top: 30px;
  margin-left: 0px;
  text-align: justify;
  font-size: 13px;
  background-color: black;
  padding: 8px;
  border-radius: 20px;
}

.lesPochettes {
  width: 178px;
  border-radius: 10px;
}
.pixOfSelection {
  width: 213px;
}
.volumeClub {
  display:none;
}
#np_recent_tracks {
  font-family: 'Mitr', sans-serif;
  font-size: 10px;
  color: white;
  text-align: left;
  margin-top: 20px;
}
.historique {
  margin-left: -160px;
}

#modal_content0{
  z-index: 99;
position: relative;
margin-top: 414px;
background-color: rgb(0, 0, 0, 0.5);
padding: 1.5em 1em;
width: 315px;
height: 674px;
max-width: 90%;
border-radius: 25px;
margin-left: 54px;
}

.lesNewsFrequence70s {
  display: block;
  margin-top: -12px;
  margin-left: -4px;
  text-align: center;
  font-size: 13px;
  background-color: black;
  padding: 10px;
  border-radius: 20px;
  height: 280px;
  width: 325px;
}
.actu {
  font-size: 12px;
  padding: 5px;
  text-align: left; display:flex;justify-content:flex-start;
}

.agendapochette {
  width: 100px;
}
#agendapochettedetails {
  padding: 10px;
}
#ampoule {
display:none;
}
}


@media all and (max-width: 370px) { 
  body {
    /* position: fixed; */
     background-image: url("./day.png");
     background-repeat:repeat;
     background-size: 150%;
     background-position:center;
     scrollbar-color: white black;
 
 }

 .volume {
display: none;
}
 header {
  display: flex;
    margin: 0 auto;
    max-width: 880px; 
    height: 139px;
    margin-top: 200px;
    margin-right: 250px;
    
}

#vinylePlay {
  background-image: url("./gif0.png");
  width: 211px;
  height: 249px;
  background-repeat: no-repeat;
  background-size: 208px;
  background-position: left, bottom;
  position: absolute;
  z-index: 99;
  margin-left: 116px;
  margin-top: -131px;
}

#bouton
{
  transform: rotate(-8deg);
  position: absolute;
  border-radius: 20px;
  width: 74px;
  height: 74px;
  margin-top: 87.5px;
  margin-left: 67px;
}

.frequence70s {
  background-image: url("./logo2.png");
  width: 337px;
  height: 58px;
  background-repeat: no-repeat;
  background-size: 322px;
  margin-left: 70px;
  margin-top: -172px;
  position: absolute;
  z-index: 99;
}

.online{
  margin-top: 169px;
  position: relative;
  margin-left: -53px;
  font-family: 'Mitr', sans-serif;
  font-size: 11px;
  border-radius: 20px;
  color: rgb(0, 0, 0);
  padding: 5px;
  background-color: rgb(255, 255, 255);
  width: 334px;
  bottom: 0;
}
#main {
  margin-top: 76px;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1.5em 1em;
  width: 313px;
  height: 1570px;
  max-width: 92%;
  border-radius: 25px;
  position: static;
  z-index: 0;
  margin-left: 55px;
  text-align: center;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  font-size: 15px;
  color: white;
}

.card {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-top: -5px;
}
#whoAmI {
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.02em;
  font-size: 12px;
  color: white;
}

.button {

background-image: linear-gradient(to right, #000, #000);
border-radius: 1.5em;
transition: opacity 300ms;
border: none;
padding: 7px;
right: 0;
font-family: 'Mitr', sans-serif;
letter-spacing: 0.02em;
position: absolute;
cursor: pointer;
margin-top: -202px;
margin-right: 303px;
font-size: 12px;
}

#knowMore {
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 8.5em;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: #e37046;
  border-color: coral;
}
#whoAreWe {
  position: absolute;
  z-index: 99;
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 5.5em;
  transition: opacity 300ms;
  border: none;
  padding: 5px;
  right: 0;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 12px;
  top: 65px;
  left: 666px;
  display: block;
  width: 127px;
  margin-left: -574px;
  margin-top: 268px;
  }

  .block {
    width: 274px;
    height: 265px;
    background-color: #000;
    border-radius: 25px;
    padding: 23px;
    margin-left: -5px;
  }
#songList {
  position: relative;
  z-index: 2;
  background-image: linear-gradient(to right, #000, #000);
  border-radius: 5.5em;
  transition: opacity 300ms;
  border: none;
  padding: 5px;
  right: 0;
  font-family: 'Mitr', sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-size: 12px;
  top: 132px;
  left: 290px;
  display: block;
  width: 100px;

    }

a:link, a:visited
{
    color: white;
    text-decoration: none;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top:0;
  display: flex;
  justify-content: left;
  transition: .5s;
  z-index: 99;

}
.modal:target {
visibility: visible;
opacity: 1;
}
#modal_content {
  z-index: 99;
  position: relative;
  margin-top: 414px;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1.5em 1em;
  width: 314px;
  height: 728px;
  max-width: 90%;
  border-radius: 25px;
  margin-left: 55px;
}

#modal_select {
  z-index: 99;
  position: relative;
  margin-top: 464px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 294px;
  height: 1661px;
  border-radius: 25px;
  margin-left: -61px;
}
#modal_select2 {
  z-index: 99;
  position: relative;
  margin-top: 460px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 294px;
  height: 1454px;
  border-radius: 25px;
  margin-left: -59px;
}
#modal_select3 {
  z-index: 99;
  position: relative;

  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 294px;
  margin-top: 462px;
  height: 1591px;
  border-radius: 25px;
  margin-left: -59px;
}
#modal_select4 {
  z-index: 99;
  position: relative;
  margin-top: 462px;
  background: linear-gradient( #3b2b5b,#702719, #d54a2e);
  padding: 1.5em 1em;
  width: 294px;
  height: 2647px;
  border-radius: 25px;
  margin-left: -59px;
}


#modal_close {
  position: absolute;
  right: -1px;
  top: 0px;
  text-decoration: none;
  color: white;
  font-size: 85px;
}
#modal_close2 {
  position: absolute;
  right: -1px;
  top: 0px;
  text-decoration: none;
  color: white;
  font-size: 85px;
  
}
#modal_close3 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}

#modal_close4 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}
#modal_close5 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}
#modal_close6 {
  position: absolute;
  right: 6px;
  top: -42px;
  color: rgb(0, 0, 0);
  font-size: 76px;
}
.pochette {
  display: block;
  width: 125px;
  height: 246px;
}
.info {
  display: block;
  margin-top: 11px;
  margin-left: 8px;
  text-align: left;
  font-size: 12.5px;
}

.info2 {
  display: block;
  margin-top: 22px;
  margin-left: 2px;
  text-align: left;
  font-size: 12.5px;
}
.info3 {
  display: block;
  margin-top: 22px;
  margin-left: 2px;
  text-align: left;
  font-size: 12.5px;
}
.info4 {
  display: block;
  margin-top: 22px;
  margin-left: 2px;
  text-align: left;
  font-size: 12.5px;

}
.details {
  display: block;
  margin-top: 30px;
  margin-left: 0px;
  text-align: justify;
  font-size: 13px;
  background-color: black;
  padding: 8px;
  border-radius: 20px;
}

.lesPochettes {
  width: 178px;
  border-radius: 10px;
}
.pixOfSelection {
  width: 213px;
}
.volumeClub {
  display:none;
}
#np_recent_tracks {
  font-family: 'Mitr', sans-serif;
  font-size: 10px;
  color: white;
  text-align: left;
  margin-top: 20px;
}
.historique {
  margin-left: -160px;
}

#modal_content0{
  z-index: 99;
position: relative;
margin-top: 414px;
background-color: rgb(0, 0, 0, 0.5);
padding: 1.5em 1em;
width: 315px;
height: 674px;
max-width: 90%;
border-radius: 25px;
margin-left: 54px;
}

.lesNewsFrequence70s {
  display: block;
  margin-top: -12px;
  margin-left: -4px;
  text-align: center;
  font-size: 13px;
  background-color: black;
  padding: 10px;
  border-radius: 20px;
  height: 280px;
  width: 301px;
}
.actu {
  font-size: 12px;
  padding: 5px;
  text-align: left; display:flex;justify-content:flex-start;
}

.agendapochette {
  width: 100px;
}
#agendapochettedetails {
  padding: 10px;
}
#ampoule {
display:none;
}
}