new footer

stylesheets/screen.css

@@ -267,10 +267,37 @@ ol li:hover {
 
 #foot_image {
   height: 150px;
-  background-image: url("../images/antennes.png");
+  background-image: url("../images/backsky.png");
   position: absolute;
-  bottom: 0;
+  bottom: 0px;
   width: 100%;
+  text-align: center;
+  overflow: hidden;
+}
+
+#clouds {
+  background-image: url("../images/clouds.png");
+  height: 150px;
+  width: 200%;
+  position: relative;
+  top: -150px;
+  margin-bottom: -150px;
+}
+
+#foot_image:active #ski {
+  visibility: visible;
+  animation: ski 3s linear;
+}
+
+#clouds:hover {
+  animation: clouds 100s infinite linear;
+}
+
+#ski {
+  position: relative;
+  visibility: hidden;
+  top: -107px;
+  left: -210px;
 }
 
 #portrait {
@@ -321,3 +348,54 @@ ol li:hover {
     display: none;
   }
 }
+@keyframes clouds {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(-774px, 0);
+  }
+}
+
+@keyframes ski {
+  0% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+
+  10% {
+    transform: translate(10px, 0) rotate(0deg);
+  }
+
+  20% {
+    transform: translate(10px, 8px) rotate(45deg);
+  }
+
+  25% {
+    transform: translate(25px, 16px) rotate(15deg);
+  }
+
+  30% {
+    transform: translate(55px, 32px) rotate(0deg);
+  }
+
+  40% {
+    transform: translate(90px, 20px) rotate(-20deg);
+  }
+
+  50% {
+    transform: translate(110px, 15px) rotate(-200deg);
+  }
+
+  60% {
+    transform: translate(130px, 35px) rotate(-380deg);
+  }
+
+  68% {
+    transform: translate(164px, 27px) rotate(-360deg);
+  }
+
+  100% {
+    transform: translate(300px, 66px) rotate(20deg);
+  }
+}