@charset "UTF-8";
/* CSS Document */

#html, body {
    margin: 0;
    padding: 0;
    background-color: #391be1;
    text-align: center;
}

#canvas {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
}

#logo { /*css for the logo image*/
    width: 50%;
}

#hellotxt {
    color: #FFFFFF;
	font-family: "omnes-pro", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	letter-spacing: 2px;
    font-size: 20px;
    margin: 50px auto 0;
	width: 75%;

}

@media only screen and (min-device-width: 768px) {
    #logo { width: 300px; }
}

#hello {
    z-index: 10;
    width: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    animation: fadein 5s;
    -moz-animation: fadein 5s; /* Firefox */
    -webkit-animation: fadein 5s; /* Safari and Chrome */
    -o-animation: fadein 5s; /* Opera */
	  }
	  @keyframes fadein {
		  from {
			  opacity:0;
		  }
		  to {
			  opacity:1;
		  }
	  }
	  @-moz-keyframes fadein { /* Firefox */
		  from {
			  opacity:0;
		  }
		  to {
			  opacity:1;
		  }
	  }
	  @-webkit-keyframes fadein { /* Safari and Chrome */
		  from {
			  opacity:0;
		  }
		  to {
			  opacity:1;
		  }
	  }
	  @-o-keyframes fadein { /* Opera */
		  from {
			  opacity:0;
		  }
		  to {
			  opacity: 1;
		  }
	  }

}