moved beach to canvas element, css modifications, and test of dna logo

1 files changed, 33 insertions, 51 deletions

diff --git a/style.css b/style.css
index 6049c25..53ad607 100644
--- a/style.css
+++ b/style.css
@@ -8,38 +8,41 @@
 /* main body and colors */
 
 :root {
-  --sand1: hsl(59, 100%, 86%, 0.5);
-  --sand2: hsl(59, 100%, 86%, 0.2);
-  --sand3: hsl(59, 100%, 86%, 0.1);
-  --beachborder: hsl(255, 0, 0, 0.1);
+  --sand1: hsla(59, 50%, 16%, 0.5);
+  --sand2: hsla(59, 100%, 86%, 0.2);
+  --sand3: hsla(59, 100%, 86%, 0.1);
   --dark-blue: hsl(211, 100%, 50%);
+  --dark-blue-trans: hsla(211, 100%, 50%, 0.5);
   --light-blue: hsl(179, 100%, 40%);
-  /* The 0.75 alpha here is so the dark black text flows with the gradient */
-  --textcolor: hsla(0, 0%, 0%, 0.75);
+  --light-blue-trans: hsla(179, 100%, 40%, 0.5);
+  --textcolor: hsla(0, 0%, 0%);
   --visitedcolor: hsl(211, 100%, 50%);
   --linkcolor: hsl(215, 100%, 50%);
   --textshadow: hsl(211, 100%, 50%);
 }
 
+#beach {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  /* should be below everything else */
+  z-index: -1;
+  background: linear-gradient(-45deg, var(--sand2), var(--sand3), var(--sand3));
+}
+
 html {
   width: 100%;
   font: 1.6em "SputnicSans", sans-serif;
   color: var(--textcolor);
-  background: linear-gradient(-45deg, var(--sand1), var(--light-blue), var(--dark-blue));
+  background: linear-gradient(-45deg, var(--light-blue), var(--dark-blue));
   background-size: 400% 400%;
   animation: gradient 10s ease infinite;
   height: 100vh;
+  z-index: 2;
 }
 
-/*
-body {
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(to top left , var(--sand1), var(--sand2), var(--sand3), hsla(10,10%,10%,.10));
-  background-size: 100% 100%;
-}
-*/
-
 @keyframes gradient {
 	0% {
 		background-position: 0% 50%;
@@ -52,30 +55,7 @@ body {
 	}
 }
 
-a {
-  color: var(--linkcolor);
-  text-shadow: 0 0 5px var(--textshadow);
-  font-weight: 400;
-  padding-bottom: 5px;
-  background: url("wave.svg");
-  /*
-  background-repeat: repeat;
-  background-position-x: 0%;
-  background-position-y: 0%;
-  background-size: auto auto;
-  */
-  background-repeat: repeat-x;
-  background-size: 15px 5px; 
-  background-position: 1px 19px;
-  animation: move 15s linear infinite;
-  -webkit-animation: move 15s linear infinite;
-  animation-play-state: paused;
-  text-decoration: none;
-  background-color: transparent;
-  -webkit-text-decoration-skip: objects;
-}
-
-@-webkit-keyframes move {
+@keyframes move {
 from {
     background-position: 2px 19px;
   }
@@ -84,13 +64,15 @@ from {
   }
 }
 
-@keyframe move {
-from {
-    background-position: 2px 19px;
-  }
-  to {
-    background-position: 500px 19px;
-  }
+a {
+  padding-bottom: 5px;
+  background: url("wave.svg");
+  background-repeat: repeat-x;
+  background-size: 20px 20px; 
+  animation: move 15s linear infinite;
+  animation-play-state: paused;
+  text-decoration: none;
+  background-color: transparent;
 }
 
 a:hover {
@@ -105,10 +87,6 @@ a:visited {
   text-shadow: 0 0 5px var(--textshadow);
 }
 
-.content {
-  margin-bottom: 1em;
-}
-
 div.menu {
   text-align: center;
 }
@@ -133,3 +111,7 @@ img#haha {
   width: 3%;
   height: 3%;
 }
+
+.content {
+  margin-bottom: 1em;
+}