div#face {
    width: 50vw;
	height: 50vw;
	margin: 0 auto;
	position: relative;
	background: lightgray;
    margin-top: 2rem;
}
div#face, div#face * {
    border-radius: 50%;
}
.eye {
	width: 25%;
	height: 25%;
	background: #fff;
	position: absolute;
	top: 20%;
}
.left.eye { left: 20%; }
.right.eye { right: 20%; }
.pupil {
	background: #000;
	width: 50%;
	height: 50%;
	position: relative;
	left: 30%;
	transform-origin: bottom;
}
#mouth {
	position: relative;
	width: 50%;
	left: 24%;
	height: 20%;
	border: 1vw solid transparent;
	border-radius: 20%;
	top: 50%;
	border-bottom-color: #000;
}
div#wmsg{
	color: darkgray;
	position: relative;
    display: inline-block;
}
table td, table td * {
    vertical-align: top;
    text-align: center;
}
.center {
    margin: auto;
    width: 55%;
    padding: 8px;
}
#wmsg .tooltiptext {
    visibility: hidden;
    width: 50px;
    background-color: darkgray;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 4px 0;
    position: absolute;
    z-index: 1;
}
#wmsg:hover .tooltiptext {
    visibility: visible;
}