* {
	box-sizing:border-box;
}
button {
	border:0;
	margin:0;
	padding:0;
}
html,body {
	height:100%;
}
body {
	background:gainsboro;
	display:flex;
	align-items:center;
	margin-left:7rem;
}
menu {
	display:-webkit-inline-flex;
	display:inline-flex;
	background:#fff;
	align-self:center;
	border-radius:.5rem;
	margin:2rem;
}
.vertical {
	flex-direction:column;
}
button {
	width:100%;
	flex:1;
	width:4rem;
	height:4rem;
	background:white;
	font:1.5rem/3rem 'icon';
	color:#777;
	transition:.35s;
	cursor:pointer;
}
button:focus {
	outline:0;
}
.add {
	background:#00AEEF;
	color:#fff;
}
.set:after {
	content:"W";
}
.star:after {
	content:"e";
}
.msg:after {
	content:"g";
}
.add:after {
	content:"9";
}
.set:hover {
	color:#333;
}
.star:hover {
	color:orange;
}
.msg:hover {
	color:green;
}
.add:hover {
	background:#008ABD;
}
.set:active {
	color:#fff;
	background:gray;
}
.star:active {
	color:#fff;
	background:orange;
}
.msg:active {
	color:#fff;
	background:green;
}
button:active {
	transform:scale(4);
	opacity:0.15;
	transition:0;
	border-radius:8px;
}