Update 'digitalselves.css'

digitalselves.css

@@ -3,22 +3,21 @@ font-family: 'Combine';
 src: url('Combine.otf') format('opentype');
 font-weight: normal;
 }
-
 @font-face {
 font-family: 'Sinistre';
 src: url('Sinistre-S†Caroline.otf') format('opentype');
 font-weight: normal;
 }
-
 :root {
     --color-blue: #0000FF; 
     --color-gray: #edecec;
     --color-pink: #f8a8ff;
     --color-yel:  #FDFFF0;
     --color-aqua:  #7FFFD4;
+    --color-black:  #000;
     --special-font: 'Sinistre';
+    font-size: 16pt;
 }
-
 html {
     box-sizing: border-box;
     height: 100%
@@ -28,13 +27,13 @@ html {
   -moz-box-sizing: inherit;
   box-sizing: inherit; 
 }
-
 body{
   margin:0px;
-  /*animation: bodymove 60s infinite; 
-  -webkit-animation: bodymove 60s infinite; */
 }
-
+.move {
+  animation: bodymove 120s infinite; 
+  -webkit-animation: bodymove 120s infinite; 
+}
 @keyframes bodymove {
       0%   { background: radial-gradient(ellipse at center, var(--color-pink), var(--color-blue));
             background-size: 100% 100%;}
@@ -56,20 +55,48 @@ body{
               background-size: 100% 1%;}
       100%   { background: linear-gradient(var(--color-pink) 10%, var(--color-blue) 100%);}        
 }
-
 marquee{
   color: var(--color-pink);
   font-family: var(--special-font);
 }
-
 #stage01{
-  width: 100%;
-  height: 100vh;
+  position: absolute;
+  z-index: 3;
+  margin: 10% 25%;
+  font-family: var(--special-font);
+}
+#stage01 input{
+  box-shadow: 1px 1px 8px 2px var(--color-pink);
+  border-radius: 100%;
+  padding: 0rem 0.5rem;
+  width: 150px;
+  height: 150px;
+  background-color:  var(--color-black);
+  color: var(--color-pink);
+  border: 0px;
+  font-size: 1.6rem;
+  font-family: var(--special-font);
+  margin: 0rem 2rem;
+}
+#stage01 #result {
+  color: var(--color-pink);
+}
+#stage01 button {
+  font-size: 0.8rem;
+  border: 0px;
+  color: var(--color-pink);
+  font-family: var(--special-font);
+  box-shadow: 0.1rem 0.1rem 0.4rem 0.1rem var(--color-pink);
+  border-radius: 100%;  
+}
+#stage01 button:hover{
+    background-color: var(--color-pink);
+    color: var(--color-black);
 }
 #stage02{
   color: var(--color-blue);
-  font-size: 14vmax;
-  line-height: 18vmax;
+  font-size: 14.6vmax;
+  line-height: 18.6vmax;
   position: absolute;
   z-index: 2;
   top: 0;
@@ -77,38 +104,58 @@ marquee{
   font-weight: bold;
   word-spacing: 1vw;
   filter: opacity(0.9);
-  text-shadow: 2px 2px 2px var(--color-pink);
+  text-shadow: 0.1rem 0.1rem 0.1rem var(--color-pink);
 }
-
 #stage03{
-  filter: opacity(0.8);
+  display: initial;
   position: absolute;
   z-index: 3;
   top: 0;
   right: 0;
-  margin: 2vmax;
-  width: 130vmin;
-  height: 90vmin;
-  border: 0px;
-  box-shadow: 1px 1px 8px 2px var(--color-pink);
+  margin: 2.2vmax;
+  width: 125vmin;
+  height: 95vmin;
+  border: 0rem;
+  box-shadow: 0.1rem 0.1rem 0.4rem 0.1rem var(--color-pink);
   border-radius: 0 50% 50% 50%;
   filter: grayscale(1);
+  opacity: 0.8;
 }
-
 span {
-  box-shadow: 1px 1px 8px 2px var(--color-pink);
+  box-shadow: 0.1rem 0.1rem 1rem 0.1rem var(--color-pink);
   position: absolute;
   z-index: 1;
 }
-
-span#oval {
-      width: 50%;
+span.oval:nth-of-type(1n) {
+      width: 10%;
       height: 80%;
       border-radius: 100% / 50%;
 }
-
-span#dia {
-      width: 90%;
-      height: 90%;
-      transform: rotate(45deg);
+span.oval:nth-of-type(2n) {
+      width: 50%;
+      height: 50%;
+      border-radius: 80% / 80%;
+      right: 0;
 }
+span.oval:nth-of-type(3n) {
+      width: 2.5%;
+      height: 2.5%;
+      border-radius: 100%;
+      background-color: var(--color-pink);
+      margin:10vh 0vh 0vh 45vw;
+}
+span.oval:nth-of-type(4n) {
+      width: 90%;
+      height: 20%;
+      border-radius: 50% / 50%;
+      margin-top: 40vh;
+      right: 0;
+}
+span.oval:nth-of-type(5n) {
+      width: 35%;
+      height: 35%;
+      border-radius: 60% 10% / 80% 40%;
+      bottom: 0;
+      left: 0;
+}
+