@import url("https://fonts.googleapis.com/css2?family=Butterfly+Kids&display=swap");
* {
  font-family: "Butterfly Kids", cursive;
}
:root {
  --font-text: 1.5rem;
  --border-radius: 20px;
}
body {
  margin: 0;

  background-color: #e8f3e2;
  max-width: 100%;
}

.play,
.pause {
  margin-left: 627px;
  margin-top: 286px;
}
.forward {
  margin-left: 592px;
  margin-top: 534px;
}
.backward {
  margin-left: 532px;
  margin-top: 534px;
}
.stop {
  margin-left: 562px;
  margin-top: 534px;
}
.volumenUp {
  margin-left: 692px;
  margin-top: 534px;
}
.volumenDown {
  margin-left: 662px;
  margin-top: 534px;
}
.mute {
  margin-left: 722px;
  margin-top: 534px;
}
.next {
  margin-left: 627px;
  margin-top: 534px;
}
.prev {
  margin-left: 502px;
  margin-top: 534px;
}
.random{
  margin-left: 752px;
  margin-top: 534px;
}

.visibility {
  visibility: hidden;
}

.formInfo {
  position: absolute;
  z-index: 80;
  margin-left: 183px;
  margin-top: -190px;
}
.formInfoListe {
  position: absolute;
  z-index: 80;
  margin-left: 312px;
  margin-top: -150px;
}
.selectStyle {
  width: 300px;
  color: #bf6872;
  font-size: var(--font-text);
  font-weight: bold;
  text-align: center;
  background-color: #b5d780;
  border: none;
  border-radius: var(--border-radius);
}

.audioPlayer {
  position: absolute;
  z-index: 80;
}
.controlRange {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: absolute;
  z-index: 80;
  margin-left: 457px;
  margin-top: -243px;
  left: 25px;
}
.marginRTime{
  margin-right: 12px;
}
.time {
  color: #ad0d20;
  font-weight: 700;
  /* width: 10px; */
  font-size: var(--font-text);
  
}
.controlRange span{
  padding: 10px;
  width: 25px;
}
.inputRange {
  /* width: 223px; */
  height: 5px;
}
input[type="range"].inputRange {
  -webkit-appearance: none; /*nécessaire pour Chrome */
  padding: 0; /* nécessaire pour IE */
  font: inherit; /* même rendu suivant font document */
  outline: none;
  color: #b5d780; /* sert pour couleur de référence, via currentColor, pour le curseur */
  opacity: 0.8;
  background: #ccc; /* sert pour couleur de fond de la zone de déplacement */
  box-sizing: border-box; /* même modèle de boîte pour tous */
  transition: opacity 0.2s;
  cursor: pointer;
}
input[type="range"].inputRange::-moz-range-track {
  height: 100%;
  border: none;
  border-radius: 0;
  background-color: #bf6872; /* supprimé définie sur l'input */
}
/* le curseur */
input[type="range"].inputRange::-moz-range-thumb {
  width: 1em;
  height: 15px; /* s'adapte à la hauteur de l'input */
  border: none; /* supprimer la bordure */
  border-radius: 50%; /* supprimer le rayon */
  background: currentColor;
}
/* barre progression avant */
input[type="range"].inputRange::-moz-range-progress {
  height: 0;
  background: #b5d780; /* supprime barre progression avant */
}

.inputText {
  background-color: #f69eac;
  color: white;
  font-size: var(--font-text);
  font-weight: bold;
  border: none;
  border-radius: var(--border-radius);
  text-align: center;
}
.labelInfo {
  color: #f69eac;
  font-size: var(--font-text);
  font-weight: bold;
}

.inputWidth {
  width: 200px;
}

.inputWidthTitre {
  width: 296px;
}

i {
  color: #ad0d20;
  cursor: pointer;
}
.vert {
  color: vert;
}
.containerControls {
  position: absolute;
  z-index: 100;
}

.fireworks {
  position: absolute;
}
.containerP,
.formulaireInfo {
  margin: auto;
  width: 1264px;
  position: relative;
}

#balloon-container {
  position: absolute;
  height: 100vh;
  padding: 1em;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.balloon {
  height: 125px;
  width: 95px;
  border-radius: 75% 75% 70% 70%;
  position: relative;
}

.balloon:before {
  content: "";
  height: 75px;
  width: 1px;
  padding: 1px;
  background-color: #fdfd96;
  display: block;
  position: absolute;
  top: 125px;
  left: 0;
  right: 0;
  margin: auto;
}

.balloon:after {
  content: "▲";
  text-align: center;
  display: block;
  position: absolute;
  color: inherit;
  top: 120px;
  left: 0;
  right: 0;
  margin: auto;
}

@keyframes float {
  from {
    transform: translateY(100vh);
    opacity: 1;
  }
  to {
    transform: translateY(-300vh);
    opacity: 0;
  }
}