header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  /* background-color: black; */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hidden {
  display: none;
}


:root {
  --fireColor1: #57aeff;
  --fireColor2: rgba(28, 70, 133, 0);
  --fireDuration: 1s;
  --blur: 0.4px;
  --particleSize: 5vw;
  --smogColor1: rgb(71, 74, 243);
  --smogColor2: rgba(69, 157, 230, 0);
  --smogDuration: 2s;
  --ghostColor1: rgb(30, 86, 172);
  --ghostColor2: rgba(0, 44, 110, 0);
}

.p-5 {
  padding: 1vw;

}
.p-15 {
  padding: 2vw;
}

/*
  
  pour barre menu
  */
.header-size{
  height: 10%;
}


.header-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
position:fixed;
}

.header-element-flex {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  right: 1vw;
  position:fixed;
  /* top: 0px; */
  /* background-color: black; */
}


.names {
  text-align: right;
}

.header-txt {
  display: block;
  position:absolute;
  width: 25%;
  text-align: center;
  color: white;
  /* display:flex;
  flex-direction: column;
  align-items: center; */
  top:10%;
}


/*autres*/

#fire,
#smog,
#ghost {
  filter: blur(var(--blur));
  -webkit-filter: blur(var(--blur));
  position: relative;
  width: 8vw;
  height: 10vh;
}

#menu{
  width: 10vw;
  height: 10vh;
  position: relative;
}
#fire .particle {
  animation: rise var(--fireDuration) ease-in infinite;
  background-image: radial-gradient(
    var(--fireColor1) 30%,
    var(--fireColor2) 70%
  );
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  position: absolute;
  bottom: 0;
  width: var(--particleSize);
  height: var(--particleSize);
}
#smog:hover .particle {
  background-image: radial-gradient(
    var(--ghostColor1) 30%,
    var(--ghostColor2) 70%
  );
  filter: drop-shadow(16px 16px 20px blue)invert(75%);
}
#ghost .particle {
  animation: rise var(--fireDuration) ease-in infinite;
  background-image: radial-gradient(
    var(--ghostColor1) 30%,
    var(--ghostColor2) 70%
  );
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  position: absolute;
  bottom: 0;
  width: var(--particleSize);
  height: var(--particleSize);
}

#fire:hover .particle {
  background-image: radial-gradient(
    var(--smogColor1) 30%,
    var(--smogColor2) 70%
  );
  filter: drop-shadow(6px 6px 2px red) invert(75%);
}

#smog .particle {
  animation: rise var(--smogDuration) ease-in infinite;
  background-image: radial-gradient(
    var(--smogColor1) 30%,
    var(--smogColor2) 70%
  );
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  position: absolute;
  bottom: 0;
  width: var(--particleSize);
  height: var(--particleSize);
}

#ghost:hover .particle {
  background-image: radial-gradient(
    var(--fireColor1) 30%,
    var(--fireColor2) 70%
  );
  filter: hue-rotate(90deg) invert(75%);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-7vh) scale(0);
  }
}

@keyframes fly-away {
  0% {
    opacity: 1;
    filter: blur(1px);
  }

  100% {
    transform: scale(0.5);
    opacity: 0;
    filter: blur(20px);
    border-radius: 50%;
  }
}

@media screen and (max-width: 700px) {


  #fire,
  #smog,
  #ghost {
    filter: blur(var(--blur));
    -webkit-filter: blur(var(--blur));
    position: relative;
    width: 13vw;
    height: 10vh;
  }


  :root {
    --fireColor1: #2cffdc;
    --fireColor2: rgba(28, 70, 133, 0);
    --fireDuration: 1s;
    --blur: 0.4px;
    --particleSize: 10vw;
    --smogColor1: rgb(71, 74, 243);
    --smogColor2: rgba(69, 157, 230, 0);
    --smogDuration: 2s;
    --ghostColor1: rgb(30, 86, 172);
    --ghostColor2: rgba(0, 44, 110, 0);
  }
  
}