From 867cb0321429816a36afefb7832792df3a02aa37 Mon Sep 17 00:00:00 2001
From: JoanaChicau <web@joanachicau.com>
Date: Wed, 30 Mar 2022 23:05:59 +0200
Subject: [PATCH] Update 'digitalselves.css'

---
 digitalselves.css | 46 +++++++++++++++++++++++++++++-----------------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/digitalselves.css b/digitalselves.css
index 9f1ce94..757e689 100644
--- a/digitalselves.css
+++ b/digitalselves.css
@@ -13,8 +13,8 @@ font-weight: normal;
     --color-gray: #edecec;
     --color-pink: #f8a8ff;
     --color-yel:  #FDFFF0;
-    --color-aqua:  #7FFFD4;
-    --color-black:  #000;
+    --color-aqua:  #758fce;
+    --color-darkblue:  #00000d;
     --special-font: 'Sinistre';
     font-size: 16pt;
 }
@@ -29,35 +29,37 @@ html {
 }
 body{
   margin:0px;
+  background-color: var(--color-darkblue) !important;
 }
 .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));
+      0%   { background: radial-gradient(ellipse at center, var(--color-pink), var(--color-aqua));
             background-size: 100% 100%;}
-      20%   { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 100%);
+      20%   { background: radial-gradient(ellipse at top, var(--color-darkblue), var(--color-aqua) 100%);
               background-size: 10% 10%; }
-      30%   { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 40%);
+      30%   { background: radial-gradient(ellipse at top, var(--color-darkblue), var(--color-aqua) 40%);
               background-size: 10% 100%;}
-      35%   { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 40%, var(--color-pink));
+      35%   { background: radial-gradient(ellipse at top, var(--color-darkblue), var(--color-aqua) 40%, var(--color-pink));
               background-size: 10% 100%;}
-      45%   { background: radial-gradient(ellipse at center, var(--color-yel), var(--color-blue) 10%, var(--color-yel)  100%);}
-      65%   { background: radial-gradient(ellipse at center, var(--color-blue), var(--color-yel) 10%, var(--color-blue) 100%);
+      45%   { background: radial-gradient(ellipse at center, var(--color-darkblue), var(--color-aqua) 10%, var(--color-yel)  100%);}
+      65%   { background: radial-gradient(ellipse at center, var(--color-darkblue), var(--color-darkblue) 10%, var(--color-darkblue) 100%);
               background-size: 10% 999%;
               background-position: left;}
-      70%   { background: radial-gradient(ellipse at center, var(--color-pink), var(--color-yel) 10%, #f8a8ff 100%);
+      70%   { background: radial-gradient(ellipse at center, var(--color-pink), var(--color-darkblue) 10%, #f8a8ff 100%);
               background-size: 10% 999%;}
-      85%   { background: linear-gradient(var(--color-pink), var(--color-blue) 10%, var(--color-pink) 100%);
+      85%   { background: linear-gradient(var(--color-pink), var(--color-darkblue) 10%, var(--color-pink) 100%);
               background-size: 10% 10%;}
-      90%   { background: linear-gradient(var(--color-blue) 50%, var(--color-pink) 10% 10%);
+      90%   { background: linear-gradient(var(--color-darkblue) 50%, var(--color-pink) 10% 10%);
               background-size: 100% 1%;}
-      100%   { background: linear-gradient(var(--color-pink) 10%, var(--color-blue) 100%);}        
+      100%   { background: linear-gradient(var(--color-pink) 10%, var(--color-darkblue) 100%);}        
 }
 marquee{
   color: var(--color-pink);
   font-family: var(--special-font);
+  margin: 2rem 0rem;
 }
 #stage01{
   position: absolute;
@@ -71,7 +73,7 @@ marquee{
   padding: 0rem 0.5rem;
   width: 150px;
   height: 150px;
-  background-color:  var(--color-black);
+  background-color:  var(--color-darkblue);
   color: var(--color-pink);
   border: 0px;
   font-size: 1.6rem;
@@ -91,7 +93,7 @@ marquee{
 }
 #stage01 button:hover{
     background-color: var(--color-pink);
-    color: var(--color-black);
+    color: var(--color-darkblue);
 }
 #stage02{
   color: var(--color-blue);
@@ -107,7 +109,7 @@ marquee{
   text-shadow: 0.1rem 0.1rem 0.1rem var(--color-pink);
 }
 #stage03{
-  display: initial;
+  display: none;
   position: absolute;
   z-index: 3;
   top: 0;
@@ -121,7 +123,7 @@ marquee{
   filter: grayscale(1);
   opacity: 0.8;
 }
-span {
+span.oval {
   box-shadow: 0.1rem 0.1rem 1rem 0.1rem var(--color-pink);
   position: absolute;
   z-index: 1;
@@ -153,9 +155,19 @@ span.oval:nth-of-type(4n) {
 }
 span.oval:nth-of-type(5n) {
       width: 35%;
-      height: 35%;
+      height: 20%;
       border-radius: 60% 10% / 80% 40%;
       bottom: 0;
       left: 0;
 }
 
+span.oval:nth-of-type(6n) {
+      width: 0.5%;
+      height: 55%;
+      border-radius:  20% 80% / 80% 40%;
+      bottom: 0;
+      right: 0;
+      background-color: transparent;
+      margin: 5vh;
+}
+