/*Welcome text*/
h1 {
	/*fixes animation bug and aligns items */
	position: absolute;
	right: 50%;
	top:30px;
	transform: translate(50%,-50%);
	
	/*Animation*/
	overflow: hidden; /* Ensures the content is not revealed until the animation */
	border-right: .15em solid green; /* cursor */
	white-space: nowrap; /* Keeps the content on a single line */
	margin: 0 auto; /* Gives that scrolling effect as the typing happens */
	letter-spacing: .15em; /* Adjust as needed */
	animation: 
		typing 4.5s steps(60, end),
		flash .75s step-end infinite;
}

/* QWERT Talk*/
h2{
	position: absolute;

}

/* Particles fill the window behind the chat */
#particles-js canvas {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
}

.container{
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 860px;
	max-width: 90%;
	margin: 0 auto;
	padding: 70px 0 2em;
	text-align: center;
}

#qwertmotion {
	max-height: 170px;
}

/*QWERT chat log*/
#log {
	height: 15em;
	margin-top: 1em;
	padding: .75em 1em;
	overflow-y: auto;
	text-align: left;
	font-size: 20px;
	background: rgba(0, 0, 0, .75);
	border: 1px solid #00ff00;
	border-radius: 4px;
}

#log p {
	margin: 0 0 .5em;
	overflow-wrap: anywhere;
}

#log .human {
	color: #a04bf0;
}

#log .pre {
	white-space: pre;
	overflow-wrap: normal;
	overflow-x: auto;
}

#log a {
	color: #a04bf0;
}

form label {
	display: block;
	margin-top: .75em;
	text-align: left;
}

/*QWERT pulse - takes keyframe from below*/
.alive {
	animation-name: pulse_animation;
	animation-duration: 6000ms;
	transform-origin:90% 90%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

/*QWERT Query Field*/
input[type=text] {
    width: 100%;
    padding: 12px 35px;
    margin: 8px 0;
    box-sizing: border-box;
	background-image: url(../resources/img/queryicon.png);
	background-position: 2px 7px; 
    background-repeat: no-repeat;
	border-radius: 4px;
	
    border: 2px solid #ccc;
	font-family: inherit;
}

/*--------------- Animations ---------------*/

/* Animation for header */
@keyframes typing {
  from { width: 0 }
  to { width: 860px }
}
/* Typing Effect */
@keyframes flash {
  from, to { border-color: transparent }
  50% { border-color: #00ff00; }
}

/*QWERT Pulse */
@keyframes pulse_animation {
	0% { transform: scale(1); }
	30% { transform: scale(1); }
	40% { transform: scale(1.08); }
	50% { transform: scale(1); }
	60% { transform: scale(1); }
	70% { transform: scale(1.05); }
	80% { transform: scale(1); }
	100% { transform: scale(1); }
}

/*Loading dots*/
@keyframes blink {50% { color: transparent }}
.loaderDot { animation: 1s blink infinite }
.loaderDot:nth-child(2) { animation-delay: 250ms }
.loaderDot:nth-child(3) { animation-delay: 500ms }