#container{
	width:100%;
	height:100vh;
	
	display:flex;
	justify-content:center;
	align-items:center;
	overflow:hidden;
}

#box{
	width:460px;
	height:400px;
}

.blue{
	color:#0F10FF;
}

.grey{
	color:#C4B9E3;
}

.purple{
	color:#8718FF;
}

.gold{
	color:#FFD700;
}

.id{
	color:#FF4660;
}

#typewriter{
		font-size: 2em;
		margin: 0;
		font-family: "Courier New";

		&:after{
			content: "|";
			animation: blink 500ms linear infinite alternate;
		}
}

@-webkit-keyframes blink{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

@-moz-keyframes blink{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

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




/* --------------------------------------------------------------------------------------------*/




@media screen and (max-width: 500px) {
	
#container{
	width:90%;
	margin-left:5%;
}

#box{
	width:100%;
	height:80vw;
}

#typewriter{
		font-size:6.5vw;
		margin: 0;
		font-family: "Courier New";

		&:after{
			content: "|";
			animation: blink 500ms linear infinite alternate;
		}
}

}