@keyframes size {
	from {
		height: 80px;
		width: 80px;
	}
	50% {
		height: 120px;
		width: 120px;
		border: 10px solid rgba(255, 0, 0, 0);
	}

	to {
		height: 80px;
		width: 80px;
	}
}

@keyframes size2 {
	from {
		height: 60px;
		width: 60px;
	}
	50% {
		height: 90px;
		width: 90px;
		border: 5px solid rgba(255, 0, 0, 0);
	}

	to {
		height: 60px;
		width: 60px;
	}
}

#phoneBtn {
	height: 80px;
	width: 80px;
	display: flex;
	right: 20px;
	position: fixed;
	bottom: 25px;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	border: 3px solid #352e42;
	cursor: pointer;
	z-index: 100;
	background-color: #fff;
	transition: transform 0.3s ease-in-out;
}

#phoneBtn:Hover {
	transform: rotate(45deg);
}

#phoneBtn > div {
	animation: size 3s infinite ease-in-out;
	position: absolute;
	border: 5px solid rgb(100, 172, 95);
	z-index: 1;
	border-radius: 50%;
	height: 80px;
	width: 80px;
}

#phoneBtn > i {
	font-size: 3rem;
}

@media (max-width: 500px) {
	#phoneBtn > div {
		animation: size2 3s infinite ease-in-out;
	}
	#phoneBtn {
		height: 60px;
		width: 60px;
		bottom: 15px;
		right: 10px;
	}
	#phoneBtn > i {
		font-size: 2.5rem;
	}
}