body, html {
	height: 100vh;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(to bottom right, beige, khaki, goldenrod);
	height: 100vh;
	margin: 0;
}

.trafficlight {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 20%;
	height: 70%;
	border: 3px solid #222;
	border-radius: 2%;
	background-color: #333;
}

.light {
	width: 30%;
	height: 15%;
	border: 10px solid #444;
	border-radius: 100%;
	margin: 10%;
	transition: 200ms;
}

#l1 {
		background-color: #5a0000;
}

#l2 {
		background-color: #783900;
}

#l3 {
		background-color: #1a5e00;
}