html {background-color: pink;}
/*Falling image start*/
@-webkit-keyframes img-fall {
  0% {
    top: -10%;
  }
  100% {
    top: 100%;
	}
}
	
@-webkit-keyframes img-shake {
	0%,
	100% {
	  -webkit-transform: translateX(0);
	  transform: translateX(0)
	}
	50% {
	  -webkit-transform: translateX(80px);
	  transform: translateX(80px)
	}
}
	
@keyframes img-fall {
	0% {
	top: -10%
	}
	100% {
	top: 100%
	}
}
	
@keyframes img-shake {
	0%,
	100% {
	transform: translateX(0)
	}
	50% {
	transform: translateX(80px)
	}
}
 
.falling-img-container {
  width: 500px;
  height: 250px;
}
 
.fall {
	position: fixed;
	top: -10%;
	z-index: 9999;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-animation-name: img-fall, img-shake;
	-webkit-animation-duration: 10s, 3s;
	-webkit-animation-timing-function: linear, ease-in-out;
	-webkit-animation-iteration-count: infinite, infinite;
	-webkit-animation-play-state: running, running;
	animation-name: img-fall, img-shake;
	animation-duration: 10s, 3s;
	animation-timing-function: linear, ease-in-out;
	animation-iteration-count: infinite, infinite;
	animation-play-state: running, running;
	z-index:0;
}
	
.fall:nth-of-type(0) {
	left: 1%;
	-webkit-animation-delay: 0s, 0s;
	animation-delay: 0s, 0s
}
	
.fall:nth-of-type(1) {
	/* left: 10%; */
	-webkit-animation-delay: 1s, 1s;
	animation-delay: 1s, 1s
}

.fall:nth-of-type(2) {
	left: 20%;
	-webkit-animation-delay: 6s, .5s;
	animation-delay: 6s, .5s
}

.fall:nth-of-type(3) {
	left: 30%;
	-webkit-animation-delay: 4s, 2s;
	animation-delay: 4s, 2s
}	
	
.fall:nth-of-type(4) {
	left: 40%;
	-webkit-animation-delay: 2s, 2s;
	animation-delay: 2s, 2s
}

.fall:nth-of-type(5) {
	left: 50%;
	-webkit-animation-delay: 8s, 3s;
	animation-delay: 8s, 3s
}

.fall:nth-of-type(6) {
	left: 60%;
	-webkit-animation-delay: 6s, 2s;
	animation-delay: 6s, 2s
}

.fall:nth-of-type(7) {
	left: 70%;
	-webkit-animation-delay: 2.5s, 1s;
	animation-delay: 2.5s, 1s
}

.fall:nth-of-type(8) {
	left: 80%;
	-webkit-animation-delay: 1s, 0s;
	animation-delay: 1s, 0s
}	

.fall:nth-of-type(9) {
	left: 90%;
	-webkit-animation-delay: 3s, 1.5s;
	animation-delay: 3s, 1.5s
}
	
.falle:nth-of-type(10) {
	left: 25%;
	-webkit-animation-delay: 2s, 0s;
	animation-delay: 2s, 0s
}
	
.fall:nth-of-type(11) {
	left: 65%;
	-webkit-animation-delay: 4s, 2.5s;
	animation-delay: 4s, 2.5s
}

	.fall:nth-of-type(12) {
	left: 45%;
	-webkit-animation-delay: 9s, 2.5s;
	animation-delay: 4s, 2.5s
}
/*Falling image end*/

.title {text-align: center; margin-top: 20px;}
.box {margin-left: 10%; margin-right: 10%;  border: 1px solid black; border-radius: 7px;}
.heading {text-align: center;}
.collapsible {
  background-color: hwb(327 74% 0%);
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  border-radius: 7px;
  font-family: "Sour Gummy";
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: hwb(328 49% 0%);
   border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #ffa4eb;
  border-bottom-left-radius: 7px; border-bottom-right-radius: 7px;
  font-family: "Cherry Bomb One";
}