diff --git a/digitalselves.css b/digitalselves.css index d9ff672..9f1ce94 100644 --- a/digitalselves.css +++ b/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 { +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: 90%; - transform: rotate(45deg); + 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; +} +