Animations. Still orrible colors.

res/css/main.css

@@ -82,19 +82,55 @@
     font-display: swap;
 }
 
-body {
+@keyframes appear {
-    background-color: #0074D9;
+    from {
+        opacity: 0.05;
+    }
+
+    to {
+        opacity: 1.0;
+    }
+}
+
+@keyframes appear-from-right {
+    from {
+        margin-left: 100%;
+        width: 300%;
+        opacity: 0.05;
+    }
+
+    to {
+        margin-left: 0%;
+        width: 100%;
+        opacity: 1.0;
+    }
+}
+
+* {
+    color: #001F3F;
+}
+
+body .section:first-child {
+    animation-name: appear;
+    animation-duration: 1s;
+}
+
+body .section:not(:first-child) {
+    animation-name: appear-from-right;
+    animation-duration: 3s;
+    animation-timing-function: cubic-bezier(0.05, 0.05, 1.0, 1.0);
 }
 
 .section {
+
     display: flex;
     flex-wrap: wrap;
     font-family: "Exo2";
     box-sizing: border-box;
-    border: 5px solid #7FDBFF;
+    border: 5px solid #000;
     border-radius: 5px;
     margin-bottom: 2em;
-    box-shadow: 5px 10px 5px 5px #001f3f;
+    box-shadow: 5px 10px 5px 5px #001f3f, inset 2px 2px 5px 5px #3A2A1A;
 }
 
 .section > div {
@@ -105,11 +141,11 @@ body {
 }
 
 .section > *:nth-child(odd){
-    background-color: #F0F0F0;
+    background-color: hsla(120,100%,70%,0.7);
 }
 
 .section > *:nth-child(even){
-    background-color: #FFF00F;
+    background-color: rgba(100, 200, 200, 0.7);
 }
 
 .section > * {
@@ -128,12 +164,7 @@ body {
     text-align: center;
 }
 
-.container * {
-    color: #0f0f0f;
-}
-
 .container ul {
     text-align: left;
     padding-left: 5em;
-    color: #0f0f0f;
 }