html { 
    background: url(bg-ytu.jpg) no-repeat top center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}



.center 
{
    font-family: sans-serif;
    text-align: center;
    color:white;
    margin: 0;
    position: absolute;
    top: 45%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.ytu  {
    font-weight: 100 !important;
    font-family: sans-serif;
    opacity: 0.5;

}

.position-relative {
    position: relative!important;
}


#animate-yildiz {    
    width: 50%;
    margin: 10px auto;
    left: 25%;
    top:-27rem;
    animation: animate-yildiz 20s linear infinite;
    position: absolute;
    opacity: 0.1;
}

@keyframes animate-yildiz {
    100%{
        -webkit-transform: rotate (360deg);
        transform: rotate(360deg);
    }
}

.typewriter h2 {
  overflow: hidden;
  border-right: 0.15em solid white; 
  white-space: nowrap; 
  margin: 0 auto; 
  letter-spacing: 0.08em; 
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
    max-width: 265px;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: white; }
}