#h
{
    animation-name: fade-in-1;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-delay: 1s;
}
#e
{
    animation-name: fade-in-1;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-delay: 1.1s;
}
#l1
{
    animation-name: fade-in-1;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-delay: 1.2s;
}
#l2
{
    animation-name: fade-in-1;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-delay: 1.3s;
}
#o
{
    animation-name: fade-in-1;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-delay: 1.4s;
}

@keyframes fade-in-1
{
    0% { opacity: 0; }
    50% {opacity: 0.5;}
    100% { opacity: 1; }
}

#im
{
    animation-name: fade-in-1;
    animation-duration: 1s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
}
#danae, #dot1
{
    animation-name: fade-in-1;
    animation-duration: 1s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

#ima, #programmer, #dot2
{
    animation-name: fade-in-1;
    animation-duration: 1s;
    animation-delay: 3.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

#tamriel
{
    animation-name: fade-in-1;
    animation-duration: 1s;
    animation-delay: 4.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes anim-2
{
    from {right: -500%;}
    to {left: 0;}
}
/* Slider Anim */
.fade
{
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
  
@-webkit-keyframes fade
{
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade
{
  from {opacity: .4} 
  to {opacity: 1}
}

/*Links anim */
@media (prefers-reduced-motion: no-preference)
{
  .links
  {
    transition: ease, transform 1.5s ease;
  }
}

.links-transition
{
  animation-name: fade-in-1;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  animation-delay: 1s;
}

/* Scroll down anim*/
@media (prefers-reduced-motion: no-preference)
{
  .scrolldownbtn
  {
    transition: opacity 1.5s ease, transform 1.5s ease;
  }
}
.btn1-transition
{
    position: relative;
    left: -1350px;
    animation-name: anim-2;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

/* Scroll down anim2*/
@media (prefers-reduced-motion: no-preference)
{
  .scrolldownbtn2
  {
    transition: opacity 1.5s ease, transform 1.5s ease;
  }
}
.btn2-transition
{
    position: relative;
    left: -1350px;
    animation-name: anim-2;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
/* Scroll down anim3*/
@media (prefers-reduced-motion: no-preference)
{
  .scrolldownbtn3
  {
    transition: opacity 1.5s ease, transform 1.5s ease;
  }
}
.btn3-transition
{
    position: relative;
    left: -1350px;
    animation-name: anim-2;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

/* Scroll up anim */
@media (prefers-reduced-motion: no-preference)
{
  .scrollupbtn
  {
    transition: opacity 1.5s ease, transform 1.5s ease;
  }
}

.btn-transition
{
    position: relative;
    left: -1350px;
    animation-name: anim-2;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}