@import url("style.css");

/* --------------------------------- Parent Div--------------------------------- */
.sub-body4{
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #b0e4e2;
  background-image: linear-gradient(160deg, #b0e4e2 0%, #80D0C7 100%);
 
  }

main{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  justify-content: center;
}

/* --------------------------------- Bubbles Container --------------------------------- */
.k-img, .scale{
  position: absolute;
  width: 100px;
  height: 100px;
}

.k-img img{
  width: 100px;
  height: 100px;
}

/* --------------------------------- Bubbles -------------------------------- */
.k-img:first-child{
  top: 40%;
  left: 47%;
  animation: float 8s ease-in-out infinite, scale 8s ease-in-out infinite;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.k-img:nth-child(2){
  right: 4%;
  bottom: 26%;
  animation: float 8s ease-in-out infinite;
  animation-delay: 4s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.k-img:nth-child(3){
  left: 21%;
  bottom: 16%;
  animation: float 10s ease-in-out infinite;
  animation-delay: 6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.k-img:nth-child(4){
  top: 13%;
  right: 22%;
  animation: float 10s ease-in-out infinite;
  animation-delay: 8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.k-img:nth-child(5){
  top: 16%;
  left: 8%;
  animation: float 10s ease-in-out infinite;
  animation-delay: 10s; 
  animation-fill-mode: forwards;  
  opacity: 0;
}

.k-img:nth-child(6){
  top: 3%;
  left: 35%;
  animation: float 10s ease-in-out infinite;
  animation-delay: 4000ms;
  animation-fill-mode: forwards;
  opacity: 0;
}

.k-img:nth-child(7){
  bottom: 7%;
  right: 30%;
  animation: float 10s ease-in-out infinite;
  animation-delay: 3600ms;
  animation-fill-mode: forwards;
  opacity: 0;
}


/* -------------------------- Animation Flottement Explosion -------------------------- */
@keyframes float {
	from {
		transform: translate3d(0,0,0);
	}
	to {
		transform: translate3d(0,-950px,0) scale(2);
    opacity: 1
	}
}


/* --------------------------------- Textes --------------------------------- */
.container-k{
  width: 85%;
  height: 70%;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 5;
  text-align: start;
}

#distortion-text{
  animation-duration: 3s;
  animation-name: slidein;
}

.container-k #about-subtitle{
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 2.5em;
  color: white;
  margin-top: 26px;
  animation-duration: 3s;
  animation-name: slidein;
  animation-delay: 1.3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.container-k #about-text{
  font-family: 'Manager';
  font-weight: 600;
  font-size: 1.5em;
  color: white;
  margin-top: 40px;
  animation-duration: 3s;
  animation-name: slidein;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

/* -------------------------- Animation Apparition -------------------------- */
@keyframes slidein {
  from {
    transform: translate3d(-650px,0,0)
  }

  to {
    transform: translate3d(0,0,0);
    opacity: 1
  }
}

@-webkit-keyframes slidein {
  from {
    -webkit-transform: translate3d(-650px,0,0)
  }

  to {
    -webkit-transform: translate3d(0,0,0);
    opacity: 1
  }
}

.purple-txt{
  color: #8089d0;
}

.red-txt{
  color:#F9A69D ;
}

.yellow-txt{
  color:#E9C281 ;
}

.blue-txt{
  color:#80CBDC ;
}
  
.green-txt{
  color:#6AAD97 ;
}


@media only screen and (max-width: 576px){
  .container-k #about-subtitle{
    text-align: center;
    font-size: 1.6em;
  }

  .container-k #about-text{
    text-align: center;
    font-size: 1.3em;
  }
}