Redirect Page #1 Day/Night

<!--
// day and night

redirect page by espoirthemes //

    +don't move the credit. there's no reason to on this page.
    +customize the colors as much as you'd like, but don't edit much of the actual css. The animations are easy to mess up.

auto redirect tutorial by oddhour
 -->


<html>
<head>

<link href='https://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css'>

  <title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<meta name="color:night background" content="#0E2430" />
<meta name="color:day background" content="#76D3DE" />
<meta name="color:text" content="#fff" />
<meta name="color:links" content="#fff" />
<meta name="color:link hover" content="#0E2430" />

<meta name="if:auto redirect" content="" />
<meta name="text:old url" content="eggpreviews" />
<meta name="text:new url" content="espoirthemes" />


</head>

<style type="text/css">
.tmblr-iframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop{display:none;}
body{
    background:{color:night background};
    color:{color:text};
    font-family:Covered By Your Grace;
    font-size:24px;
    /*please don't touch this*/
    animation-name:color;
    animation-duration: 10s;
    animation-fill-mode:forwards;
    animation-iteration-count: 1; animation-delay: 4s;}


a{color:{color:links}; /*link color */
 text-decoration:none;
}
a:hover{color:{color:link hover};} /*link hover */

@keyframes color{
        to{background:{color:day background};} /*day background color, a lighter color */
    }


#container{margin-left:500px; margin-top:200px; position:fixed; }

#sun{ margin-left:230px; width:90px; height:90px;border-radius:100%; background:rgba(255,241,12, 1); position:fixed; box-shadow:         0px 0px 6px 4px rgba(255,241,58, .2);

opacity:0;
    animation-name: sun; transform-origin: -20vmin 5vmin;
    animation-duration: 8s; animation-fill-mode:forwards;
    animation-iteration-count: 1; animation-delay: 4.2s;
}

 #moon { margin-left:-120px;width: 90px; height: 90px; border-radius: 50%;
 box-shadow: -15px 15px 0 0 white;

 animation-name: moon;  transform-origin: 36vmin 5vmin; position:fixed;
    animation-duration: 8s; animation-fill-mode:forwards;
    animation-iteration-count: 1; animation-delay: 4s; }

    @keyframes moon {
  to {
    transform: rotate(1turn); opacity:0;
  }

}
 @keyframes sun {
  to {
    transform: rotate(1turn); opacity:1;
  }

 }
  #old{text-align:center;  animation-name: old;  transform-origin: 40vmin 5vmin; position:relative;
    animation-duration: 8s; animation-fill-mode:forwards;
    animation-iteration-count: 1; }
    #new{ animation-name: new;  transform-origin: 40vmin 5vmin; position:relative; text-align:center;
    animation-duration: 8s; animation-fill-mode:forwards;
    animation-iteration-count: 1; animation-delay: 6s; opacity:0;}

     @keyframes old {
  to { opacity:0;}
 }
  @keyframes new {
  to { opacity:1;}

 }

 #credit { position:fixed; bottom:6px; right:6px; display:block; width: 16px; height: 18px; background-color: white; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;}
</style>

<body>
{block:ifautoredirect}
<script>
 setTimeout( redirectTumblr, 12000 );

 function redirectTumblr() {
   location.replace('http://{text:new url}.tumblr.com' + location.pathname);
 }
</script>
{/block:ifautoredirect}
<div id="container">

<div id="old">{text:old url} </div>

<div id="new">
is now at
<a href="http://{text:new url}.tumblr.com">{text:new url} </a> <br>{block:ifautoredirect}<small>redirecting...</small>{/block:ifautoredirect}</div>


<!--don't erase/touch any of this -->
 <div id="sun"></div>
 <div id="moon"></div></div>
 <a href="http://espoirthemes.tumblr.com" title="credit"><div id="credit"></div></a>
</body>
</html>