body, html {
  margin: 0;
  background: #2c2c2c;
}

.page-container {
  display: flex; 
  flex-direction: row;
  height: 100vh;
  width: 100vw;
}

.form-container {
  background: #151515;
  height: 100vh;
  flex-grow:1;
  display: flex;
  justify-content: center;
  align-items: center;
}  

#form {
  padding: 5px;
}

#form .form-line {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}

#form label {
  color: #ffffff;
  display: block;
}

#form input {
  border: 3px solid #4251f7;
  border-radius: 7px;
  padding: 5px;
  flex-grow: 1;
  
}

#form button {
  border-radius: 3px;
  padding: 5px;
  background: #4251f7;
  border: none;
  color: #ffffff;
}




.gallery-container {
  width: 85vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#gallery {
  position: relative;
  overflow: hidden;

  width: 100%; height: 100%;
  /* width: 600px; height: 400px; */
  /* width: 400px; height: 900px; */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ececec;
}

.abysswall-item {
  z-index: 9999;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.abysswall-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: rgba(0, 0, 0, 1); /* Fond d'écran transparent au début */
  z-index: 9999; /* Assurez-vous qu'il est au-dessus de tous les autres éléments */
  transition: opacity 0.2s ease; 

  display: flex;
  justify-content: center;
  align-items: center; 
} 

.abysswall-progress-bar.inactive {
  opacity: 0;
  background-color: rgba(0, 0, 0, 0); /* Fond d'écran noir semi-transparent lorsqu'actif */
}

.abysswall-progress-bar .abysswall-progress-counter {
  
  border: 7px solid #ffffff;
  color: #ffffff;
  font-size: 35px;
  width: 75px;
  height: 75px;
  padding: 50px;
  border-radius:50%;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* @media screen and (min-width: 900px) {
  #gallery {
    width: 800px;
    height: 500px;
  }
} */