@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;
    --special-font: 'Sinistre';
}

html {
    box-sizing: border-box;
    height: 100%
}
*, *:before, *:after { 
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit; 
}

body{
  margin:0px;
  /*animation: bodymove 60s infinite; 
  -webkit-animation: bodymove 60s 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{
  width: 100%;
  height: 100vh;
}
#stage02{
  color: var(--color-blue);
  font-size: 14vmax;
  line-height: 18vmax;
  position: absolute;
  z-index: 2;
  top: 0;
  font-family: var(--special-font);
  font-weight: bold;
  word-spacing: 1vw;
  filter: opacity(0.9);
  text-shadow: 2px 2px 2px var(--color-pink);
}

#stage03{
  filter: opacity(0.8);
  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);
  border-radius: 0 50% 50% 50%;
  filter: grayscale(1);
}

span {
  box-shadow: 1px 1px 8px 2px var(--color-pink);
  position: absolute;
  z-index: 1;
}

span#oval {
      width: 50%;
      height: 80%;
      border-radius: 100% / 50%;
}

span#dia {
      width: 90%;
      height: 90%;
      transform: rotate(45deg);
}