.float {
	position: fixed;
	width: 60px;
	height: 60px;
	bottom: 30px;
	left: 30px;
	background-color: var(--color-primary);
	border-radius: 50px;
	font-size: 30px;
	box-shadow: 2px 2px 3px #999;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
}

.wtp-button {
	width: 32px;
	filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(73deg) brightness(103%) contrast(103%);
}

.float:hover {
	text-decoration: none;
	background-color: #fff;
}

.float:hover > .wtp-button {
	filter: invert(13%) sepia(74%) saturate(1475%) hue-rotate(192deg) brightness(85%) contrast(105%);
}

@media only screen and (max-width: 450px) {
	.float {
		width: 50px;
		height: 50px;
	}

	.wtp-button {
		width: 26px;
	}
}