Titania *incomplete)

<style>
@import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative:400,900|Roboto');

  body {
background-color:#101010;
overflow:hidden;
background-image: url("https://www.transparenttextures.com/patterns/shley-tree-2.png");


}



  #ball {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin: 0;
  border-radius: 50%;
   position:absolute;
 top:50%;
 left:50%;
 margin-top:-100px;
 margin-left:-100px;
  background: radial-gradient(circle at 50% 120%, transparent, #93E4F0 10%, #93E4F0 80%, #062745 100%);
opacity:.8;
 animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    z-index:9;
     transition:1s;
     transition-delay:99999999s;
}

@keyframes floating {
    from { transform: translate(0, 0px); }
    65%  { transform: translate(0, 10px); }
    to   { transform: translate(0, 0px); }
}
#ball:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 70%);
  -webkit-filter: blur(5px);
  z-index: 2;

}

body:hover #ball{
 width:90%;
 height:180%;
 margin-top:-30%;
 margin-left:-45%;
animation-name: none;
opacity:.1;
  transition-delay:2s;
}


#backgroundball{
  width:200px;
  height:200px;
  background-image:url(https://cdn.discordapp.com/attachments/306938078113693697/342083089939562496/bae3b239698f104fd9e6840157ab3942.jpg);
  background-size:170%;
  border-radius:50%;
    position:absolute;
 top:50%;
 left:50%;
 margin-top:-100px;
 margin-left:-100px;
  transition:1s;
  background-position:50% 100%;
  opacity:0;
    transition-delay:9999999999s;
    z-index:10;
}

body:hover #backgroundball{
 width:90%;
 height:180%;
 margin-top:-30%;
 margin-left:-45%;
  transition-delay:2s;
  opacity:.8;
}

#image{
  background-image:url(https://media.discordapp.net/attachments/306938609976606720/337775557435588609/2.png?width=355&height=468);
  width:600px;
  height:600px;
  background-size:contain;
  background-repeat:no-repeat;
  z-index:11;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-250px;
  margin-left:-800px;
  opacity:0;
  transition:3s;
  transition-delay:99999999s;
}

body:hover #image{
  margin-left:-600px;
  opacity:1;
  transition-delay:3s;
}

#box{
 width:450px;
 height:150px;
  background: linear-gradient(white, transparent) ;
  opacity:0.9 ;
 position:absolute;
 top:50%;
 left:50%;
 margin-top:140px;
 margin-left:-350px;
 z-index:12;
 opacity:0;
 transition:1s;
 transition-delay:9999999999s;
}

body:hover #box{
opacity:1;
transition-delay:5.5s;
}

.text{
 width:430px;
 height:130px;
 padding:10px;
 color:#000;
 font-family: 'Cinzel Decorative', cursive;
 font-weight:900;
 font-size:14pt;
}

p{
  width: 430px;
  animation: type 2s 6s steps(60, end);
  overflow:hidden;
  white-space: nowrap;
  margin: 0px 0 0 0px;
}

p:nth-child(2){
  animation: type2 4s 6s steps(60, end);
}

p:nth-child(3){
  animation: type3 6.5s 6s steps(60, end);
}

p:nth-child(4){
  animation: type4 10.5s 6s steps(60, end);
}

@keyframes type{
  from { width: 0; }
}

@keyframes type2{
  0%{width: 0; }
  40%{width: 0; }
  100%{ width: 100%; }
}

@keyframes type3{
  0%{width: 0; }
  60%{width: 0; }
  100%{ width: 100%; }
}
@keyframes type4{
  0%{width: 0; }
  60%{width: 0; }
  100%{ width: 100%; }
}
#name{
 width:450px;
 height:45px;
 background:linear-gradient(to right, transparent, white, transparent);
 position:absolute;
 margin-top:-60px;
}

.nametext {
  font-family: 'Cinzel Decorative', cursive;
font-size:25pt;
font-weight:900;
text-align:center;
 background: url('https://68.media.tumblr.com/0fad60580945f2b76c24d4dcc1927f5e/tumblr_nsy6zu5y0o1ru72gvo1_500.gif') no-repeat;
background-size:100%;
background-position:center;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;

}

.arrow-up a{
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-left: 15px solid yellow;

  border-bottom: 15px solid transparent;
 top:50%;
 left:50%;
 position:absolute;
 margin-top:50px;
 margin-left:200px;
 display:inline-block;
 animation: blink 1s infinite linear;
 z-index:13;
}

@keyframes blink{
  to{opacity: .0;}
}

.arrow-up:target {
 opacity:0;
 transition:1s;

}




.demo-dot {

  animation: xAxis 7s infinite ;
  position:absolute;
  top:90%;
  left:10%;
}

.demo-dot::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  animation: yAxis 2.5s infinite;
  box-shadow: 1px 1px 100px 30px #0ff;
}

.p-1{
 animation-duration:4s;
 top:30%;
}

.p-1::after{
 animation-duration:10s;
}

.p-2{
 animation-duration:10s;
 top:70%;
 left:30%;
}

.p-2::after{
 animation-duration:2s;
  animation-direction: linear;
}


.p-3{
 animation-duration:2s;
 top:10%;
 left:30%;
  animation-direction: alternate;
}

.p-3::after{
 animation-duration:5s;
}

.p-4{
 animation-duration:5s;
 top:20%;
 left:70%;
  animation-direction: alternate;
}

.p-4::after{
 animation-duration:3s;
  animation-direction: alternate;
}

.p-5{
 animation-duration:20s;
 top:50%;
 left:60%;
}

.p-5::after{
 animation-duration:10s;
  animation-direction: alternate;
}


.p-6{
 animation-duration:7s;
 top:80%;
 left:40%;

}

.p-6::after{
 animation-duration:6s;

}

.p-7{
 animation-duration:2.5s;
 top:40%;
 left:50%;
  animation-direction: linear;
}

.p-7::after{
 animation-duration:3s;
  animation-direction: alternate;
}

.p-8{
 animation-duration:15s;
 top:90%;
 left:70%;

}

.p-8::after{
 animation-duration:15s;

}

.p-9{
 animation-duration:6s;
 top:60%;
 left:0%;

}

.p-9::after{
 animation-duration:3.5s;

}

.p-10{
 animation-duration:8s;
 top:50%;
 left:90%;

}

.p-10::after{
 animation-duration:10s;
  animation-direction: alternate;
}






@-webkit-keyframes yAxis {
  50% {

    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);

    transform: translateY(0px);
  }
}

@keyframes yAxis {
  50% {

    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);

    transform: translateY(-150px);
  }
}

@-webkit-keyframes xAxis {
  50% {

    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);

    transform: translateX(100px);
  }
}

@keyframes xAxis {
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(300px);
  }
}

</style>

 <div id="ball"></div>
 <div id="image"></div>
   <div id="box">
  <div id="name">
   <div class="nametext">Titania</div>
  </div>
  <div class="text"><p>If we shadows have offended,</p>
<p>Think but this, and all is mended </p>
<p>Give me your hands if we be friends,</p>
<p>And Titania shall restore amends.</p>

  </div>
  <div class="arrow-up"><a href="#arrow-up"></a></div>
</div>

  <div id="backgroundball">
  </div>
<div class="demo-dot"></div>
<div class="demo-dot p-1"></div>
<div class="demo-dot p-2"></div>
<div class="demo-dot p-3"></div>
<div class="demo-dot p-4"></div>
<div class="demo-dot p-5"></div>
<div class="demo-dot p-6"></div>
<div class="demo-dot p-7"></div>
<div class="demo-dot p-8"></div>
<div class="demo-dot p-9"></div>
<div class="demo-dot p-10"></div>