@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:  #758fce;
    --color-darkblue:  #00000d;
    --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;
  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-aqua));
            background-size: 100% 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-darkblue), var(--color-aqua) 40%);
              background-size: 10% 100%;}
      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-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-darkblue) 10%, #f8a8ff 100%);
              background-size: 10% 999%;}
      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-darkblue) 50%, var(--color-pink) 10% 10%);
              background-size: 100% 1%;}
      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;
  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-darkblue);
  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-darkblue);
}
#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: none;
  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.oval {
  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: 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;
}