.glow-background {
  background-color: hsla(245, 84%, 54%, 0.6);
  z-index: -1;
  opacity: .7;
  filter: blur(10vw);
  border-radius: 50%;
  width: 40vw;
  max-width: 863px;
  height: 90vw;
  max-height: 923px;
  position: absolute;
  inset: -5% auto auto 0%;
  transform: rotate(50deg);
}

.glow-background2 {
  background-color: hsla(245, 84%, 54%, 0.6);
  z-index: -1;
  opacity: .7;
  filter: blur(10vw);
  border-radius: 50%;
  width: 40vw;
  max-width: 863px;
  height: 90vw;
  max-height: 923px;
  position: absolute;
  inset: 22% auto auto 60%;
  transform: rotate(-90deg);
}

.glow-background3 {
  background-color: hsla(245, 84%, 54%, 0.6);
  z-index: -1;
  opacity: .7;
  filter: blur(10vw);
  border-radius: 50%;
  width: 40vw;
  max-width: 863px;
  height: 90vw;
  max-height: 923px;
  position: absolute;
  inset: 43% auto auto 1%;
  transform: rotate(70deg);
}

.glow-background4 {
  background-color: hsla(245, 84%, 54%, 0.6);
  z-index: -1;
  opacity: .7;
  filter: blur(10vw);
  border-radius: 50%;
  width: 40vw;
  max-width: 863px;
  height: 90vw;
  max-height: 923px;
  position: absolute;
  inset: 66% auto auto 60%;
  transform: rotate(70deg);
}

.glow-background5 {
  background-color: hsla(245, 84%, 54%, 0.6);
  z-index: -1;
  opacity: .7;
  filter: blur(10vw);
  border-radius: 50%;
  width: 40vw;
  max-width: 863px;
  height: 90vw;
  max-height: 923px;
  position: absolute;
  inset: 85% auto auto 10%;
  transform: rotate(70deg);
}

#scrollTopBtn {
    position: fixed;
    bottom: 70px;
    right: 30px;
    width: 80px;
    height: 80px;
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    transition: all 0.3s ease-in;
}

#scrollTopBtn.visible {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

#scrollTopBtn:hover {
    background: transparent;
}

/* état normal */
#scrollTopBtn {
    transform: scale(0.8);
}

/* visible */
#scrollTopBtn.visible {
    transform: scale(1);
}

/* clic */
#scrollTopBtn:active {
    transform: scale(0.95);
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.6);
}
/*GRAND MOBILE (481px et plus)*/

@media (min-width: 481px) {
  
}


/*MOBILE LANDSCAPE / PHABLET (576px et plus)*/

@media (min-width: 576px) {
  
}


/*TABLETTE PORTRAIT (768px et plus)*/

@media (min-width: 768px) {

.glow-background5 {
  display: none;
}

.glow-background, .glow-background2, .glow-background3, .glow-background4 {
  width: 30vw;
  max-width: 663px;
  height: 70vw;
  max-height: 723px;
}

.glow-background2 {
  inset: 18% auto auto 62%;
}

.glow-background4 {
  inset: 70% auto auto 62%;
}

}

/*TABLETTE LANDSCAPE (992px et plus)*/

@media (min-width: 992px) {
  
}


/*DESKTOP (1024px et plus)*/

@media (min-width: 1024px) {

.glow-background2 {
  inset: 18% auto auto 62%;
}

.glow-background4 {
  inset: 70% auto auto 62%;
}

}


/*LARGE DESKTOP (1280px et plus)*/

@media (min-width: 1280px) {

.glow-background, .glow-background2, .glow-background3, .glow-background4 {
  width: 30vw;
  max-width: 603px;
  height: 60vw;
  max-height: 1200px;
}

.glow-background {
  inset: -5% auto auto -5%;
}

.glow-background2 {
  inset: 20% auto auto 62%;
}  

.glow-background4 {
  inset: 70% auto auto 62%;
}

}



/* EXTRA LARGE DESKTOP (1920px et plus)*/

@media (min-width: 1920px) {
  
.glow-background, .glow-background2, .glow-background3, .glow-background4 {
  width: 30vw;
  max-width: 503px;
  height: 60vw;
  max-height: 1000px;
}

.glow-background {
  inset: -10% auto auto 0%;
}

.glow-background2 {
  inset: 20% auto auto 60%;
}

.glow-background3 {
  inset: 45% auto auto -5%;
}

.glow-background4 {
  inset: 65% auto auto 70%;
}

}