* { padding: 0; margin: 0; box-sizing: border-box; }
html { font-size: 10px; }
body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; line-height: 1.1; background: #fff; }
section { position: relative; height: 100vh; transition: background .3s; }
section h2 { position: absolute; left: 50%; top: 50%; font-size: 30px; transform: translate3d(-50%, -50%, 0); transition: color .3s; }

#container { width: 100vw; height: 100vh; }

.active section.section04 { background: black!important; }
.active section h2 { color: orange; }

.goToTop { position: fixed; right: 30px; bottom: 30px; display: flex; align-items: center; justify-content: center; z-index: 999; }
.goToTop img { transform: translateY(30px); width: 100px; opacity: 0; }
.goToTop a { display: inline-block; font-size: 2rem; color: rgb(40, 40, 40); transform: translateY(30px); margin-left: 30px; opacity: 0; }
.goToTop.active { background: red; }