body,html{
  width:100%;
  height: 100%;
}
body{
  margin:0;
  padding:0;
  background:#29b6f6;
}
.bubbles{
  position:absolute;
  width:100%;
  height: 100%;
  z-index:0;
  overflow:hidden;
  top:0;
  left:0;
}
.bubble{
  position: absolute;
  bottom:-100px;
  width:40px;
  height: 40px;
  background:#f38e2f;
  border-radius:50%;
  opacity:0.6;
  animation: rise 10s infinite ease-in;
}
.bubble:nth-child(1){
  width:40px;
  height:40px;
  left:10%;
  animation-duration:8s;
    background:#f38e2f;
}
.bubble:nth-child(2){
  width:20px;
  height:20px;
  left:20%;
  animation-duration:5s;
  animation-delay:1s;
    background:#f38e2f;
}
.bubble:nth-child(3){
  width:50px;
  height:50px;
  left:35%;
  animation-duration:7s;
  animation-delay:2s;
    background:#bac34e;
}
.bubble:nth-child(4){
  width:80px;
  height:80px;
  left:50%;
  animation-duration:11s;
  animation-delay:0s;
    background:green;
}
.bubble:nth-child(5){
  width:35px;
  height:35px;
  left:55%;
  animation-duration:6s;
  animation-delay:1s;
  background:#bac34e;
}

.bubble:nth-child(6){
  width:45px;
  height:45px;
  left:65%;
  animation-duration:8s;
  animation-delay:3s;
}
.bubble:nth-child(7){
  width:90px;
  height:90px;
  left:70%;
  animation-duration:12s;
  animation-delay:2s;
  background:green;
}
.bubble:nth-child(8){
  width:25px;
  height:25px;
  left:80%;
  animation-duration:6s;
  animation-delay:2s;
  background:#bac34e;
}
.bubble:nth-child(9){
  width:15px;
  height:15px;
  left:70%;
  animation-duration:5s;
  animation-delay:1s;
  background:green;
}
.bubble:nth-child(10){
  width:90px;
  height:90px;
  left:25%;
  animation-duration:10s;
  animation-delay:4s;
  background:#bac34e;
}
.bubble:nth-child(11){
  width:40px;
  height:40px;
  left:27%;
  animation-duration:8s;
    background:#f38e2f;
}
.bubble:nth-child(12){
  width:20px;
  height:20px;
  left:32%;
  animation-duration:5s;
  animation-delay:1s;
    background:#f38e2f;
}
.bubble:nth-child(13){
  width:50px;
  height:50px;
  left:50%;
  animation-duration:7s;
  animation-delay:2s;
    background:#bac34e;
}
.bubble:nth-child(14){
  width:80px;
  height:80px;
  left:15%;
  animation-duration:11s;
  animation-delay:0s;
    background:green;
}
.bubble:nth-child(15){
  width:35px;
  height:35px;
  left:25%;
  animation-duration:6s;
  animation-delay:1s;
  background:#bac34e;
}

@keyframes rise{
  0%{
    bottom:-100px;
    transform:translateX(0);
  }
  50%{
    transform:translate(100px);
  }
  100%{
    bottom:1080px;
    transform:translateX(-200px);
  }
}
/*my collaps tab*/
.chkkb{ display: none !important; }
/*input[type='checkbox'] { display: none; }*/
.wrap-collabsible { margin: 1.2rem 0; }
.lbl-toggle { display: block; font-weight: bold; font-family: monospace; font-size: 1.2rem; text-transform: uppercase; text-align: center; padding: 1rem; color: #FFFEFE; background: #bac34e; cursor: pointer; border-radius: 7px; transition: all 0.25s ease-out; } 
.lbl-toggle:hover { color: #000; } 
.lbl-toggle::before { content: ' '; display: inline-block; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid currentColor; vertical-align: middle; margin-right: .7rem; transform: translateY(-2px); transition: transform .2s ease-out; }
.toggle:checked+.lbl-toggle::before { transform: rotate(90deg) translateX(-3px); }
.collapsible-content { max-height: 0px; overflow: hidden; transition: max-height .25s ease-in-out; }
.toggle:checked + .lbl-toggle + .collapsible-content { max-height: 460px; }
.toggle:checked+.lbl-toggle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.collapsible-content .content-inner { background:rgba(153, 225, 103, 0.2); border-bottom: 1px solid rgba(0, 105, 255, .45); border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; padding: .5rem 1rem; }
.collapsible-content p { margin-bottom: 0; }