/* reset default page spacing */
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #49929C;
}

/* 1) bouncing container with a top-to-bottom gradient */
#bounce-container {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  background: linear-gradient(
	to bottom,
	#60BCC0 0%,
	#60BCC0 65%,
	#49929C 100%
	/*46a9a6 55868C old*/
  );
}

/* the title itself */
#bouncy-title {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  margin: 0;
  color: #E6E8E6;
  font-size: 128px;
  user-select: none;
  pointer-events: auto;
  cursor: pointer;
}

/* the hint under the title */
#hint-text {
  position: absolute;
  left: 50%;
  /* place it just below the centred title (roughly title half-height + 10px) */
  top: calc(50% + 64px);
  transform: translateX(-50%);
  margin: 0;
  font-size: 16px;
  color: #49929C;
  user-select: none;
  pointer-events: none;
}

/* 2) second section styling */
#content-section {
  padding: 4rem 2rem;
  background: #49929C;
  color: #333333;
  text-align: center;
}

#content-section h2 {
  margin-top: 0;
  font-size: 2.5rem;
}

#content-section p {
  max-width: 600px;
  margin: 1rem auto 0;
  line-height: 1.6;
}

@media (max-width: 1000px) {
  #bouncy-title {
    font-size: 64px;
  }  
  #hint-text {
    top: calc(50% + 32px);
	font-size: 12px;
  }
}