Update index.css

Author: TheRobotCodingMan

index.css

@@ -1,31 +1,50 @@
 body {
-background-color: #002266;
-color: white;
-}
-h1, h2{
-font-family: 'Rubik', sans-serif;
-}
-.sp {
-font-family: 'Oswald', sans-serif;
-margin: 14px;
-border-left: 6px solid #1ac9ff;
-background-color: #cecece;
-color: black;
-}
-div {
-width: 100px;
-height: 100px;
-background-color: red;
-transition: width 2s, height 2s, transform 2s;
-}
-div:hover {
-width: 300px;
-height: 300px;
-transform: rotate(180deg);
+  background-color: #002266;
+  color: white;
 }
+
+h1,
+h2 {
+  font-family: 'Rubik', sans-serif;
+}
+
 p {
-font-family: 'Oswald', sans-serif;
-border: none;
-margin: 8px;
-color: white;
+  font-family: 'Oswald', sans-serif;
+  margin: 10px;
+  border-left: 6px solid #1ac9ff;
+  background-color: #cecece;
+  color: black;
+}
+
+.divp{
+  width: 200px;
+  height: 200px;
+  background-color: red;
+  transition: width 2s, height 2s, transform 2s;
+}
+
+#divp1:hover {
+  width: 500px;
+  height: 500px;
+  transform: rotate(180deg);
+}
+.main {
+  display: inline-flex;
+}
+
+.box {
+  font-size: 17px;
+  color: white;
+  font-family: 'Oswald', sans-serif;
+  border: none;
+  margin: 8px;
+}
+
+#box1::after {
+  content: "Hello! This is a moving div!";
+  display: flex;
+  transform: rotateX(180deg);
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, .0) 10%, rgba(255, 255, 255, .5));
+  -webkit-background-clip: text;
+  color: white;
 }