@font-face { 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% } *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } body{ margin:0px; } .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%;} 20% { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 100%); background-size: 10% 10%; } 30% { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 40%); background-size: 10% 100%;} 35% { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 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%); background-size: 10% 999%; background-position: left;} 70% { background: radial-gradient(ellipse at center, var(--color-pink), var(--color-yel) 10%, #f8a8ff 100%); background-size: 10% 999%;} 85% { background: linear-gradient(var(--color-pink), var(--color-blue) 10%, var(--color-pink) 100%); background-size: 10% 10%;} 90% { background: linear-gradient(var(--color-blue) 50%, var(--color-pink) 10% 10%); 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{ 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: 14.6vmax; line-height: 18.6vmax; position: absolute; z-index: 2; top: 0; font-family: var(--special-font); font-weight: bold; word-spacing: 1vw; filter: opacity(0.9); text-shadow: 0.1rem 0.1rem 0.1rem var(--color-pink); } #stage03{ display: initial; position: absolute; z-index: 3; top: 0; right: 0; 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: 0.1rem 0.1rem 1rem 0.1rem var(--color-pink); position: absolute; z-index: 1; } span.oval:nth-of-type(1n) { width: 10%; height: 80%; border-radius: 100% / 50%; } 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; }