add more pages + fix bugs

newVersion/css/fancyStyle.css

@@ -0,0 +1,119 @@
+/* 
+    Steps style
+*/
+
+.step {
+    font-family: Lobster;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100vh;
+    margin-left: 0;
+    width: 100vw;
+    font-size: 150%;
+    margin: 0;
+    padding: 0;
+}
+
+.step-content {
+    width: 90%;
+    margin-left: 2.5%;
+}
+
+.reveal {
+    position: fixed;
+    transition: 1.5s all ease;
+    transform: translateY(100vh);
+    background-color: rgb(14, 14, 14);
+}
+
+.reveal.active {
+    transform: translateY(0);
+}
+
+.scroll-indicator {
+    position: fixed;
+    right: 5%;
+    z-index: 7;
+    width: 90%;
+    bottom: 5%;
+    display: none;
+}
+
+.scroll-wrapper {
+    color: rgb(221, 221, 221);
+    font-size: 80%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+.scroll-symbol {
+    font-size: 180%;
+    animation: scroll-animation infinite 4s ease-in-out;
+}
+
+@keyframes scroll-animation {
+    0% {
+        opacity: 0;
+        transform: translateY(0);
+    }
+    10% {
+        opacity: 1;
+    }
+    65% {
+        opacity: 0.8;
+    }
+    75% {
+        opacity: 0;
+        transform: translateY(25px);
+    }
+    100% {
+        opacity: 0;
+    }    
+}
+
+.progress {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 90%;
+    top: 5%;
+    right: 2%;
+    z-index: 5;
+    position: fixed;
+}
+
+.progress-wrapper {
+    display: flex;
+    color: white;
+    border-radius: 50px;
+    flex-direction: column;
+    max-width: min-content;
+}
+
+.progress-item {
+    cursor: pointer;
+}
+
+
+.background-images {
+    position: fixed;
+}
+
+.hidables, #img1 {
+    position: fixed;
+    height: 100vh;
+    width: auto;
+    top: 0%;
+    display: block;
+    right: 0%;
+    opacity: 0;
+    transition: all 2s;
+}
+
+.visible {
+    opacity: 1;
+}