inital

style.css

@@ -0,0 +1,84 @@
+body{
+  background-image: url(space2.jpg);
+  font-family: Verdana, sans-serif;
+  color: white;
+  margin: 0 10vw 0 10vw;
+}
+
+a, a:visited{
+  color: white;
+}
+
+h1{
+  text-align: center;
+  color: white;
+}
+
+header{
+  margin-bottom: 40px;
+  background-color: #00000099;
+  padding: 5px;
+  border-radius: 3px;
+}
+
+section{
+  margin: 0 5vw 0 5vw;
+  margin-top: 20px;
+}
+section .story{
+  border-top: solid white 2px;
+  border-bottom: solid white 2px;
+  padding: 4px;
+
+  background-color: #00000099;
+  padding: 5px;
+  border-radius: 3px;
+}
+section .lesson{
+  margin-top: 5px;
+  padding: 4px;
+
+  background-color: #00000099;
+  padding: 5px;
+}
+section .lesson:before{
+  content: "Lesson:";
+  /* border-right: solid white 2px; */
+}
+
+
+
+
+/* thank you CodeLab 🙏
+https://www.youtube.com/watch?v=CI-vuBp_hJY
+*/
+
+.wavy-text span{
+  display: inline-block;
+  animation: wave 2s ease-in-out infinite;
+}
+
+.wavy-text span:nth-child(1n){
+  animation-delay: 0s;
+}
+
+.wavy-text span:nth-child(2n){
+  animation-delay: 0.2s;
+}
+
+.wavy-text span:nth-child(3n){
+  animation-delay: 0.4s;
+}
+
+.wavy-text span:nth-child(4n){
+  animation-delay: 0.2s;
+}
+
+@keyframes wave{
+  0%, 100%{
+    transform: translateY(0);
+  }
+  50%{
+    transform: translateY(-20px);
+  }
+}