html {
  background-color: black;
  animation: htmlapp 1s;
}

#galvanion {
  cursor: url(cursor3.png), default;
  z-index: 2;
  display: flex;
  scrollbar-width:none;
  overflow: auto;
  position: fixed;
  width: 100%;
  height: 100%;
  justify-content: center;
  vertical-align: middle;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000000;
  backdrop-filter: blur(20px);
  z-index: 2;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#galvanionoff {
    display: none;
}
#welcome {
    position: fixed;
    display: inherit;
    z-index: 0;
    font-family: BankGothic Md BT;
    color : white;
    text-shadow: 0px 0px 20px white;
    font-size: 80px;
    letter-spacing: 15px;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    animation: welcomeappear 1s;
}
@keyframes welcomeappear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
#welcome2 {
    position: fixed;
    display: inherit;
    z-index: 0;
    font-family: BankGothic Md BT;
    color : white;
    text-shadow: 0px 0px 20px white;
    font-size: 50px;
    letter-spacing: normal;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    animation: welcomeappear 1s;
}

#selectuser {
    position: fixed;
    display: inherit;
    text-align: center;
    z-index: 0;
    font-family: BankGothic Md BT;
    color : white;
    text-shadow: 0px 0px 20px white;
    font-size: 40px;
    letter-spacing: 7.5px;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    animation: welcomeappear 1s;
}
#selectuser2 {
    position: fixed;
    display: inherit;
    text-align: center;
    z-index: 0;
    font-family: BankGothic Md BT;
    color : white;
    text-shadow: 0px 0px 20px white;
    font-size: 25px;
    letter-spacing: normal;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    animation: welcomeappear 1s;
}


#watermark {
  opacity: 1;
  cursor: url(cursor3.png), default;
  display: inherit;
  position: fixed;
  width: 50%;
  height: auto;
  left: 25%;
  right: 25%;
  top: 40%;
  bottom: 40%;
  box-shadow: none;
  border-radius: 0px;
  animation: waterappear 1s;
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -o-transition: all 2s;
  transition: all 1s;
}
@keyframes waterappear {
    from {
      opacity: 0;
      transform: scale(0.5);
      filter: blur(5px);
    }
    to {
      opacity: 1;
      transform: scale(1);
      filter: blur(0px);
    }
}
#watermark2 {
  opacity: 1;
  z-index: 0;
  cursor: url(cursor3.png), default;
  display: inherit;
  position: fixed;
  width: 85%;
  height: auto;
  left: 7.5%;
  right: 7.5%;
  top: 80px;
  box-shadow: none;
  border-radius: 0px;
  animation: waterappear 1s;
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -o-transition: all 2s;
  transition: all 1s;
}

#galvanion2 {
  cursor: url(cursor3.png), default;
  display: flex;
  scrollbar-width:none;
  overflow: auto;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000000;
  z-index: 2;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

#galvanion3 {
  cursor: url(cursor3.png), default;
  display: flex;
  scrollbar-width:none;
  overflow: auto;
  position: fixed;
  width: 100%;
  height: 100%;
  justify-content: center;
  vertical-align: middle;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #00000000;
  backdrop-filter: blur(20px);
  animation-name: galvfont2;
  animation-duration: 1s;
  z-index: 2;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
@keyframes galvfont2 {
  from {
    backdrop-filter: blur(20px);
    background-color: #000000;
  }
  to {
    background-color: #00000000;
    backdrop-filter: blur(0px);
  }
}


#closeoff2 {
  visibility: hidden;
  z-index: 4;
  position: fixed;
  bottom: 30px;
  justify-content: center;
  opacity: 0;
  white-space: nowrap;
  width: 10%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #00000000;
  backdrop-filter: blur(100px);
  box-shadow: 0px 0px 6px white;
  color: white;
  font-family: BankGothic Md BT;
  font-size: 25px;
  padding: 10px;
  border-radius: 100px;
  margin-top: 10px;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}


#closeon2 {
  z-index: 4;
  position: fixed;
  bottom: 30px;
  justify-content: center;
  opacity: 1;
  white-space: nowrap;
  width: 10%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #0000003b;
  backdrop-filter: blur(100px);
  box-shadow: 0px 0px 6px white;
  color: white;
  font-family: BankGothic Md BT;
  font-size: 25px;
  padding: 10px;
  border-radius: 100px;
  margin-top: 10px;
  cursor: url(pointer3.png), pointer;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}


#closeon2:hover {
  color: white;
  font-family: BankGothic Md BT;
  background: transparent;
  backdrop-filter: blur(50px);
  width: 12%;
  border: 0px;
  border-radius: 100px;
}

#closeon2:active {
  color: white;
  font-family: BankGothic Md BT;
  font-size: 25px;
  background: transparent;
  backdrop-filter: blur(100px);
  width: 10%;
  text-decoration: none;
  border-radius: 100px;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#fh2I {
  cursor: url(pointer3.png), pointer;
  color: white;
  line-height: 50px;
  justify-content: center;
  text-align: center;
  letter-spacing: 3px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: auto;
  margin-top: auto;
  font-size: 15px;
  width: 100%;
  font-family: BankGothic Md BT;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

#fbdivoff {
  display: none;
}
#fbdiv {
  cursor: url(pointer3.png), pointer;
  border-radius: 45px;
  box-shadow: 0px 0px 6px rgb(190, 190, 190);
  text-shadow: 0px 0px 10px white;
  content-visibility: auto;
  animation-name: fdivappar;
  animation-duration: 1s;
  margin-inline: 2%;
  margin-top: auto;
  margin-bottom: auto;
  padding: 0px;
  height: fit-content;
  width: 20%;
  background: transparent;
  backdrop-filter: blur(100px);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
@keyframes fdivappar {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#fbdiv:hover {
  box-shadow: 0px 0px 24px white;
  transform: scale(1.1);
}
#fbdiv:active {
  transform: scale(1.05);
}
#fblackoff {
  display: none;
}
#fblack {
  cursor: url(pointer3.png), pointer;
  background: transparent;
  border-bottom-right-radius: 45px;
  border-bottom-left-radius: 45px;
  border-top-left-radius: 0%;
  border-top-right-radius: 0%;
  margin-top: auto;
  box-shadow: none;
  margin-bottom: auto;
  height: auto;
  width: 100%;
  opacity: 1;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}


#fboff {
  display: none;
  visibility: hidden;
}
#f {
  cursor: url(cursor3.png), default;
  display: flex;
  position: fixed;
  z-index: 0;
  background: transparent;
  background-size: 10%;
  align-content: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 50%;
  transform: translateY(-50%);
}

#galvmoboff {
  display: none;
  visibility: hidden;
  opacity: 0;
}
#galvmob {
  position: fixed;
  z-index: 4;
  width: 100%;
  margin: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  color: white;
  background-color: #000000;
  opacity: 1;
  animation: galvmobanim 0.5s;
}
@keyframes galvmobanim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
} 
#h1blackmob {
  justify-content: center;
  padding: 20px;
  font-size: 20px;
  color : white;
  text-shadow: 0px 0px 20px white;
  line-height:normal;
  text-align: center;
  letter-spacing: 0px;
  margin-top: 30px;
  margin-bottom: 15px;
  margin-left: 50%;
  transform: translateX(-50%);
  width: 60%;
  font-family: BankGothic Md BT;
  border-radius: 100px;
  backdrop-filter: blur(100px);
  box-shadow: 0px 0px 6px white;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#galvmobclose {
  position: fixed;
  z-index: 4;
  display: flex;
  align-items: center;
  text-align: center;
  content-visibility: auto;
  background-color: #00000000;
  backdrop-filter: blur(100px);
  box-shadow: 0px 0px 6px white;
  bottom: 20px;
  right: 20px;
  backdrop-filter: blur(50px);
  width: 200px;
  height: 100px;
  padding: 0px;
  border-radius: 100px;
}

#fmob {
  position: fixed;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  align-self: center;
  align-content: center;
  z-index: 0;
  background: transparent;
  background-size: 10%;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
}

#fbmob {
  border-radius: 35px;
  box-shadow: none;
  text-shadow: 0px 0px 10px white;
  vertical-align: middle;
  margin-top: 0%;
  margin-bottom: 0%;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  height: 180px;
  width: 90%; 
  background: transparent;
  backdrop-filter: blur(100px);
  transform: scale(0.75);
  animation-name: fbappear;
  animation-duration: 1s;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
}
@keyframes fbappear {
  from {
    opacity: 0;
    transform: scale(1.5);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: scale(0.75);
    filter: blur(0px);
  }
}
#fbmob:active {
  transform: scale(0.7);
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
}

#fblackmob {
  position: absolute;
  background: transparent;
  border-radius: 35px;
  margin-top: auto;
  box-shadow: 0px 0px 12px rgb(190, 190, 190);
  margin-bottom: auto;
  width: 100%;
  height: auto;
  opacity: 1;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#fh2Imob {
  position: fixed;
  background: transparent;
  text-align: center;
  color: white;
  font-family: BankGothic Md BT;
  line-height: normal;
  letter-spacing: 1px;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
  font-size: 15px;
  width: unset;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}


#dock {
  display: flex;                /* Affichage en flexbox */
  justify-content: center;      /* Centre horizontalement les enfants */
  align-items: center;          /* Centre verticalement les enfants */
  gap: 10px;                    /* Espace entre les éléments (optionnel) */
  position: fixed;
  place-content: center;
  z-index: 2;
  bottom: 30px;
  left: 25%;
  right: 25%;
  width: 50%;
  height: 80px;
  background-color: #00000077;
  backdrop-filter: blur(20px);
  box-shadow: 0px 0px 6px white;
  color: white;
  font-family: 'Century Gothic Paneuropean', sans-serif;
  padding: none;
  border-radius: 20px;
  overflow: visible;
  animation: dock 1s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
@keyframes dock {
  from {
    opacity: 0;
    bottom: -110px;
    transform: scale(1.5);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    bottom: 30px;
    transform: scale(1);
    filter: blur(0px);
  }
}
#dockclose {
  display: none;                /* Affichage en flexbox */
  justify-content: center;      /* Centre horizontalement les enfants */
  align-items: center;          /* Centre verticalement les enfants */
  gap: 10px;                    /* Espace entre les éléments (optionnel) */
  position: fixed;
  z-index: 2;
  place-content: center;
  bottom: -110px;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 80px;
  background-color: 00000077;
  backdrop-filter: blur(20px);
  box-shadow: 0px 0px 6px white;
  color: white;
  font-family: 'Century Gothic Paneuropean', sans-serif;
  padding: none;
  border-radius: 20px;
  overflow: visible;
  animation: dock 1s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

#app1 {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  box-shadow: none;
  background: transparent;
  margin: 0;
  overflow: visible;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#app1:hover {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  box-shadow: none;
  background: transparent;
  transform: scale(1.15);
  overflow: visible;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#app1:active {
  width: 70px70px;
  height: 70px;
  border-radius: 20px;
  box-shadow: none;
  background: transparent;
  transform: scale(1.05);
  overflow: visible;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#app2 {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  box-shadow: none;
  background: transparent;
  margin: 0;
  overflow: visible;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#app2:hover {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  box-shadow: none;
  background: transparent;
  transform: scale(1.15);
  overflow: visible;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#app2:active {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  box-shadow: none;
  background: transparent;
  transform: scale(1.05);
  overflow: visible;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#app3 {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  box-shadow: none;
  background: transparent;
  margin: 0;
  overflow: visible;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#app3:hover {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  box-shadow: none;
  background: transparent;
  transform: scale(1.15);
  overflow: visible;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#app3:active {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  box-shadow: none;
  background: transparent;
  transform: scale(1.05);
  overflow: visible;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#imgapp {
  width: 100%;
  height: 100%;
  border-radius: 0px;
  margin: 0;
  box-shadow: none;
  border-radius: inherit;
  image-rendering: auto;
}
#aperimg {
  position: fixed;
  box-shadow: none;
  width: 100%;
  height: auto;
  left: 0;
  right: 0;
  image-rendering: auto;
  image-resolution: auto;
  border-radius: inherit;
  top: 50%;
  transform: translateY(-50%);
}
#content {
  display: inherit;
  background: transparent;
  margin: 0;
  border-radius: inherit;
}

#aperflow {
  display: block;
  opacity: 0;
  z-index: 1;
  position: fixed;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  width: 75%;
  height: 70%;
  border-radius: 30px;
  background-color: black;
  backdrop-filter: blur(20px);
  box-shadow: 0px 0px 6px white;
  content-visibility: auto;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#aperflow2 {
  display: block;
  opacity: 0;
  z-index: 1;
  position: fixed;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  width: 75%;
  height: 70%;
  border-radius: 30px;
  background-color: black;
  backdrop-filter: blur(20px);
  box-shadow: 0px 0px 6px white;
  content-visibility: auto;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#aperflow3 {
  display: block;
  opacity: 0;
  z-index: 1;
  position: fixed;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  width: 75%;
  height: 70%;
  border-radius: 30px;
  background-color: black;
  backdrop-filter: blur(20px);
  box-shadow: 0px 0px 6px white;
  content-visibility: auto;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#closedock {
  position: fixed;
  right: 5px;
  width: fit-content;
  height: 70px;
  border-radius: 100px;
  box-shadow: none;
  background: transparent;
  overflow: visible;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#closedock:hover {
  position: fixed;
  right: 5px;
  width: fit-content;
  height: 70px;
  border-radius: 100px;
  box-shadow: none;
  background: transparent;
  transform: scale(1.15);
  overflow: visible;
  /* Only rotate the inner content, not the whole button */
  /* Add a wrapper inside #closedock for the content, e.g. <span class="closedock-content">...</span> */
}