html, body {
	height:100%;
	font-size:18px;
	margin:0;
}


@keyframes drift {
	0% {left: -40vw;}
	50% {left: 40vw;}
	100% {left: -40vw;}
}


.circle {
	position: absolute;
	border-radius: 50%;

	z-index: -100;
}

.blue {
	background-color: rgb(255,255,0);
	transition-duration: 0.5s;

	mix-blend-mode: color-dodge;
}

.red {
	background-color: rgb(255,0,0);
	transition-duration: 0.5s;

	mix-blend-mode: color-dodge;
}


.greeting {
	padding: 0.5rem;

	font-size: 3em;
	text-align: center;

	border-bottom: 1px solid #000;
}


.active {
	color:#FFF;
	background:#000;
}

.student {
	position: relative;
	width: 100%;
}


.studentName {
	position: relative;
	text-align: center;
	font-size: 3em;

	animation-name: drift;
	animation-duration: 3s;
	animation-iteration-count: infinite;

	mix-blend-mode: screen;

	user-select: none;
}