body{width:100%; height:100vh; margin:0; font-size:13px; color:#000000; background:radial-gradient(farthest-corner at 50% 35%,white,darkgrey); font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  animation: loginLoadEffect .8s ease 0s 1 forwards;
}
input{width:91.5%; padding:1em; margin:15px 0 15px 0; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:16px; text-align:center; color:#000000; border:solid 3px #eeeeee; background:#eeeeee; border-radius:20px; box-shadow:-5px -5px 10px rgba(250,250,250,.8), inset 5px 5px 10px rgba(80,80,80,.5), inset -5px -5px 8px white, 7px 7px 14px 2px rgba(80,80,80,.5);}

footer{width:100%; overflow:hidden; padding:1em 0 1em 0;  position:fixed; bottom:0; background:#666666; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; color:#FFFFFF; text-align:center;}

.form_default{width:100%; padding:0; margin:0;}


#login_container{width:30em; height:auto; overflow:visible; display:flex; flex-flow:column nowrap; justify-content:space-around; align-content:stretch; margin:3em auto 0 auto; padding:.5em; z-index:1000; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; opacity:0; animation:anticipate 1s ease 2.8s 1 forwards;}
#login_container a{width:auto; padding:.2em; margin:.5em auto .5em auto; text-decoration:none; color:lightgrey;}
#login_container a:active{width:auto; padding:.2em; margin:.5em auto .5em auto; text-decoration:none; color:lightgrey;}
#login_container a:visited{width:auto; padding:.2em; margin:.5em auto .5em auto; text-decoration:none; color:lightgrey;}
#login_container h2{width:98%; overflow:hidden; margin:1em auto 1em auto; text-align:center;}
#login_container h3{width:98%; overflow:hidden; margin:1em auto 1em auto; text-align:center;}
#login_container h3 i{font-size:1.1em;}
#login_container section{width:98%; display:flex; flex-flow:row nowrap; justify-content:space-around; align-content:stretch; margin:1em auto 1em auto;}
#login_container button{flex:2 1 55%; padding:20px; margin:20px 50px 10px 50px; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:16px; background:#CCCCCC; border:transparent; color:#333333; border-radius:20px; box-shadow:inset 5px 4px 8px rgba(250,250,250,.5), inset -5px -4px 8px rgba(0,0,0,.3), 4px 4px 10px rgba(0,0,0,.3);}
#login_container button:hover{background:dodgerblue; color:white; box-shadow:inset -5px -4px 8px rgba(250,250,250,.3), inset 5px 4px 8px rgba(0,0,0,.5); transition:0.6s}


#title{width:100%;}
#title h1{width:0; overflow:hidden; padding:0; margin:0 auto 0 auto; font-family:'Audiowide', cursive; text-align:center; font-size:5em; color:#666666; wrap-option: none; white-space: nowrap; animation: hi_title 1.2s steps(10, end) 1.5s 1 forwards;}
#title h2{width:100%; padding:0; margin:0; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; text-align:center; font-size:5em; color:#666666;}
#title h3{width:100%; padding:0; margin:0; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; text-align:center; font-size:3em; color:#666666;}
#title h5{width:100%; padding:1em 0 .1em 0; margin:0; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; text-align:center; font-size:1.1em; color:#666666; opacity:0; animation:welcome .2s ease .9s 1 forwards;}
#greetings{width:30%; height:55%; overflow:hidden; position:absolute; right:0; bottom:3em;  background-size:cover; background-repeat:no-repeat; background-position:top left;}
#forgotten{width:30%; height:55%; overflow:hidden; position:absolute; right:0; bottom:3em;  background-size:cover; background-repeat:no-repeat; background-position:top left;}
#response{width:30%; height:55%; overflow:hidden; position:absolute; right:0; bottom:3em;  background-size:cover; background-repeat:no-repeat; background-position:top left;}


@keyframes loginLoadEffect{
  0%{ scale:1 .1; filter:opacity(0) blur(20px) grayscale(100%);}
  100%{scale:1 1; filter:opacity(1) blur(0px) grayscale(0%);}
}

@keyframes welcome{
  0%{opacity:0;}
  100%{opacity:1;}
}
@keyframes hi_title{
  0%{width:0;}
  100%{width:300px;}
}

@keyframes anticipate{
  0%{opacity:0;}
  100%{opacity:1;}
}