html, body {
  height: 100vh;
  overflow: hidden;
  color: #222;
  background: #fff;
  margin: 0px;
}

p {
    font-size: 5vh;
}

.innerBody {
  overflow: scroll;
  height: 100vh;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
  text-align: center;
  scroll-behavior: smooth;
}

.Section {
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
}

.innerSection {
  padding-top: 30vh;
  height: 40vh;
  padding-bottom: 30vh;
}

.SectionThree {
  -webkit-animation: rainbow 4s steps(36) infinite;
  background: red;
}

@-webkit-keyframes rainbow {
   from { -webkit-filter:hue-rotate(10deg); }
     to { -webkit-filter:hue-rotate(360deg); }
}

@keyframes rainbow {
 from {
    -webkit-filter:hue-rotate(10deg);
            filter:hue-rotate(10deg);
    }
  to {
    -webkit-filter:hue-rotate(360deg);
            filter:hue-rotate(360deg);
    }
}

.Section.SectionThree .innerSection img {
  height: 30vh;
}

.ArrowDown {
  position: absolute;
  display: block;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  width: 40px;
  height: 40px;
}
.ArrowDown:before, .ArrowDown:after {
		position: absolute;
		display: block;
		content: '';
		width: 30px; height: 30px;
		left: 50%; top: 50%;
		margin-top: -15px;
		border-width: 2px;
		border-style: solid;
		border-color: transparent;
		border-bottom-color: #000;
		border-right-color: #000;
		border-radius: 0 0 5px 0;
		transform: translate(-50%, -50%) rotate(45deg);
}




@media (prefers-color-scheme: dark) {
  body {
    color: #eee;
    background: #121212;
  }
	.ArrowDown:before, .ArrowDown:after {
		border-bottom-color: #fff;
		border-right-color: #fff;
	}
}