<div id="head" class="happy">
	<div class="left eye"></div>
	<div class="right eye"></div>
	<div class="mouth">
		<div class="teeth"></div>
		<div class="tongue"></div>
	</div>
</div>

<button id="random">Mood Swing!</button>

body {
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: radial-gradient(
		circle farthest-side at center bottom,
		#009cde,
		#003087 125%
	);
	color: #f7f7f7;
}

#head {
	position: relative;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(0, 0, 255, 0) 60%, orangered),
		radial-gradient(circle, yellow, yellowgreen);
	border-radius: 50%;
	border: 2px solid #dddd1e;
	box-shadow: inset -8px -10px 20px 0px #555;
	*,
	*::before,
	*::after {
		position: absolute;
		transition: all 0.5s;
	}
}

.eye {
	background: #fff;
	border: 3px solid #000;
	overflow: hidden;
	&::before {
		content: "";
		display: block;
		background: #000;
	}
}

.mouth {
	background: #000;
	overflow: hidden;
	border: 2px solid #000;
}

.teeth {
	background: #fff;
	width: 80%;
	height: 25px;
	top: -15px;
	left: 10%;
	border-radius: 5px;
	z-index: 1;
}

.tongue {
	background: red;
	border-radius: 100%;
	box-shadow: inset -20px -10px 22px 0px #600909;
	width: 80%;
	height: 70%;
	bottom: -10%;
	left: 15%;
}

/* excited */

.excited .eye {
	width: 100px;
	height: 95px;
	border-radius: 100%;
	&::before {
		width: 15%;
		height: 20%;
		left: 45%;
		top: 20%;
		border-radius: 100%;
	}
}

.excited .eye.left {
	left: 12%;
	top: 25%;
}

.excited .eye.right {
	right: 12%;
	top: 25%;
}

.excited .mouth {
	border-radius: 10px 10px 110px 110px;
	width: 50%;
	height: 85px;
	top: 65%;
	left: 24%;
}

/* meh */

.meh .eye {
	width: 100px;
	height: 5px;
	border-radius: 4px;
	border-width: 5px;
	&::before {
		width: 60px;
		height: 30px;
		left: 30%;
		top: -20px;
		border-radius: 100%;
	}
}

.meh .eye.left {
	left: 12%;
	top: 35%;
}

.meh .eye.right {
	right: 12%;
	top: 35%;
}

.meh .mouth {
	border-radius: 16px;
	width: 50%;
	height: 15px;
	top: 55%;
	left: 24%;
	border-width: 10px;
}

/* shocked */

.shocked .eye {
	width: 55px;
	height: 60px;
	border-radius: 100%;
	border-width: 3px;
	&::before {
		width: 20%;
		height: 20%;
		left: 40%;
		top: 40%;
		border-radius: 100%;
	}
}

.shocked .eye.left {
	left: 22%;
	top: 25%;
}

.shocked .eye.right {
	right: 22%;
	top: 25%;
}

.shocked .mouth {
	border-radius: 100%;
	width: 85px;
	height: 85px;
	top: 55%;
	left: 35%;
}

/* happy */

.happy .eye {
	width: 60px;
	height: 60px;
	border-radius: 100%;
	&::before {
		width: 50%;
		height: 50%;
		left: 25%;
		top: 25%;
		border-radius: 100%;
	}
}

.happy .eye.left {
	left: 22%;
	top: 25%;
}

.happy .eye.right {
	right: 22%;
	top: 25%;
}

.happy .mouth {
	border-radius: 10px 10px 110px 110px;
	width: 20%;
	height: 55px;
	top: 59%;
	left: 40%;
}

/* silly */

.silly .eye {
	width: 80px;
	height: 80px;
	border-radius: 100%;
	&::before {
		width: 30%;
		height: 40%;
		left: 50%;
		top: 20%;
		border-radius: 100%;
	}
}

.silly .eye.left {
	left: 14%;
	top: 21%;
}

.silly .eye.right {
	right: 17%;
	top: 23%;
}

.silly .mouth {
	border-radius: 10px 10px 110px 110px;
	width: 60%;
	height: 85px;
	top: 59%;
	left: 24%;
	transform: rotate(-16deg);
}

/* angry */

.angry .eye {
	width: 50px;
	height: 20px;
	border-width: 6px;
	border-radius: 5px 5px 100% 100%;
	&::before {
		width: 30px;
		height: 30px;
		left: 25%;
		top: -60%;
		border-radius: 100%;
	}
}

.angry .eye.left {
	left: 22%;
	top: 35%;
	transform: rotate(15deg);
}

.angry .eye.right {
	right: 22%;
	top: 35%;
	transform: rotate(-15deg);
}

.angry .mouth {
	border-radius: 100%;
	width: 50%;
	height: 25px;
	top: 65%;
	left: 24%;
	border-width: 5px;
}

#head.angry {
	background: radial-gradient(circle, rgba(0, 0, 255, 0) 60%, orangered),
		radial-gradient(circle, red, darkmagenta);
	border-color: red;
}

/* button */

button,
button:link,
button:visited {
	padding: 15px 30px;
	text-decoration: none;
	font-size: 18px;
	display: block;
	margin: 20px auto;
	background-color: darkblue;
	border: none;
	border-radius: 3px;
	box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.15) inset;
	color: #fff;
	letter-spacing: 0.1em;
	cursor: pointer;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
	transition-property: transform;
	transform: translateZ(0);
	transition: box-shadow 0.5s cubic-bezier(0.39, 0.5, 0.15, 1.36);

	&:hover {
		box-shadow: 0 0 0 28px rgba(0, 0, 0, 0.25) inset;
	}

	&:active {
		transform: translateY(3px);
	}
}

const head = document.getElementById("head");
let classes = ["excited", "meh", "shocked", "happy", "silly", "angry"];

document.getElementById("random").onclick = function () {
	let emotion = classes[Math.floor(Math.random() * classes.length)];
	head.removeAttribute("class");
	head.className += emotion;
	console.log(emotion);
};