html {
	background: url('../images/computer.gif') no-repeat bottom center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#wrapper > p {
	padding: 0.25em;
	color: rgba(255, 255, 255, 1);
	font-family: 'Courier New', Courier, monospace;
	font-size: 500%;
	font-weight: 500;
}

/*- - - - - - - - - - - - - - - - MOBILE RESIZE */

@media only screen and (max-width: 767px) {
    #wrapper > p {
		font-size: 300%;
		font-weight: 500;
	}
}

/*- - - - - - - - - - - - - - - - TYPE-Y EFFECT */

.css-typing {
    width: 4.5em;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 2s steps(25, end);
    animation: type 2s steps(25, end);
}

@keyframes type {
    from { width: 0; }
}

@-webkit-keyframes type {
    from { width: 0; }
}

/*- - - - - - - - - - - - - - - - BLINKY EFFECT */

.blinking-cursor {
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}

@keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: #fff;
  }
}

@-moz-keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: #fff;
  }
}

@-webkit-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: #fff;
  }
}

@-ms-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: #fff;
  }
}

@-o-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: #fff;
  }
}