@import 'https://fonts.googleapis.com/css?family=Roboto+Mono:100';
html,body{
	font-family:roboto mono,monospace;
	background:#212121;
	height:100%;
	overflow:hidden;
}

.container{
	justify-content:center;
	align-items:center;
	display:flex;
}

.text{
	font-weight:100;
	font-size:35px;
	color:#fafafa;
}

.dud{
	color:#757575;
}

.hatter{
	z-index:0;
	max-width:100%;
	max-height:100%;
	bottom:0;
	left:0;
	margin:auto;
	overflow:unset;
	position:fixed;
	right:0;
	top:0;
	-o-object-fit:contain;
	object-fit:contain;
	animation:bgeffect 5000ms infinite;
	opacity:.5;
	background:url(bg.jpg) center no-repeat;
	background-size:cover;
}
	
@keyframes bgeffect{
	0% {
		filter:blur(5px);
	}
	50%{
		filter:blur(8px);
	}
	100%{
		filter:blur(5px);
	}
}

.content{
	opacity: 0.5;
	z-index: 1;
	height:100%;
	width:100%;
	text-align:center;
	margin-top:15%;
	position: relative;
}

.socialmedia{
	z-index: 1;
	font-size:35px;
	color:#fafafa;
}

a,a:link, a:hover, a:active, a:visited{
	z-index: 1;
	color:#fafafa;
	text-decoration:none;
}




.terminal {
	position: fixed;
	/*margin-left: 70%;
	margin-top: 20%;*/
     bottom: 0;
     right: 0;
	 margin-right: 20px;
	 margin-bottom: 20px;
}

.fakeButtons {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  border: 1px solid #000;
  position: relative;
  top: 6px;
  left: 6px;
  background-color: #ff3b47;
  border-color: #9d252b;
  display: inline-block;
}

.fakeMinimize {
  left: 11px;
  background-color: #ffc100;
  border-color: #9d802c;
}

.fakeZoom {
  left: 16px;
  background-color: #00d742;
  border-color: #049931;
}

.fakeMenu {
  width: 350px;
  box-sizing: border-box;
  height: 25px;
  background-color: #bbb;
  margin: 0 auto;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.fakeScreen {
  background-color: #151515;
  box-sizing: border-box;
  width: 350px;
  margin: 0 auto;
  padding: 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

p {
  position: relative;
  text-align: left;
  font-size: 1.25em;
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  margin: 0;
}

span {
  color: #fff;
  font-weight: bold;
}

.line1 {
  color: #9CD9F0;
  -webkit-animation: type .5s 1s steps(20, end) forwards;
  -moz-animation: type .5s 1s steps(20, end) forwards;
  -o-animation: type .5s 1s steps(20, end) forwards;
  animation: type .5s 1s steps(20, end) forwards;
}

.line2 {
  color: #CDEE69;
  -webkit-animation: type .5s 2s steps(20, end) forwards;
  -moz-animation: type .5s 2s steps(20, end) forwards;
  -o-animation: type .5s 2s steps(20, end) forwards;
  animation: type .5s 2s steps(20, end) forwards;
}

.line3 {
  color: #E09690;
  -webkit-animation: type .5s 3s steps(20, end) forwards;
  -moz-animation: type .5s 3s steps(20, end) forwards;
  -o-animation: type .5s 3s steps(20, end) forwards;
  animation: type .5s 3s steps(20, end) forwards;
}

.line4 {
  color: #fff;
  -webkit-animation: type .5s 4s steps(20, end) forwards;
  -moz-animation: type .5s 4s steps(20, end) forwards;
  -o-animation: type .5s 4s steps(20, end) forwards;
  animation: type .5s 4s steps(20, end) forwards;
}

.line5 {
  color: #fff;
  -webkit-animation: type .5s 5s steps(20, end) forwards;
  -moz-animation: type .5s 5s steps(20, end) forwards;
  -o-animation: type .5s 5s steps(20, end) forwards;
  animation: type .5s 5s steps(20, end) forwards;
}

.line6 {
  color: #fff;
  -webkit-animation: type .5s 6s steps(20, end) forwards;
  -moz-animation: type .5s 6s steps(20, end) forwards;
  -o-animation: type .5s 6s steps(20, end) forwards;
  animation: type .5s 6s steps(20, end) forwards;
}

.line7 {
  color: #fff;
  -webkit-animation: type .5s 7s steps(20, end) forwards;
  -moz-animation: type .5s 7s steps(20, end) forwards;
  -o-animation: type .5s 7s steps(20, end) forwards;
  animation: type .5s 7s steps(20, end) forwards;
}

.line8 {
  color: #fff;
  -webkit-animation: type .5s 8s steps(20, end) forwards;
  -moz-animation: type .5s 8s steps(20, end) forwards;
  -o-animation: type .5s 8s steps(20, end) forwards;
  animation: type .5s 8s steps(20, end) forwards;
}

.line9 {
  color: #fff;
  -webkit-animation: type .5s 9s steps(20, end) forwards;
  -moz-animation: type .5s 9s steps(20, end) forwards;
  -o-animation: type .5s 9s steps(20, end) forwards;
  animation: type .5s 9s steps(20, end) forwards;
}

.line10 {
  color: #fff;
  -webkit-animation: type .5s 10s steps(20, end) forwards;
  -moz-animation: type .5s 10s steps(20, end) forwards;
  -o-animation: type .5s 10s steps(20, end) forwards;
  animation: type .5s 10s steps(20, end) forwards;
}

.cursor4 {
  -webkit-animation: blink 1s 11.5s infinite;
  -moz-animation: blink 1s 8.5s infinite;
  -o-animation: blink 1s 8.5s infinite;
  animation: blink 1s 8.5s infinite;
}


@-webkit-keyframes type {
  to {
    width: 17em;
  }
}

@-moz-keyframes type {
  to {
    width: 17em;
  }
}

@-o-keyframes type {
  to {
    width: 17em;
  }
}

@keyframes type {
  to {
    width: 17em;
  }
}