@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;600&display=swap');

html,
body {
	min-width: 320px;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: 'Poppins', sans-serif;
}

#particles-js {
	position: absolute;
	top: 0;
	left: 0;
	min-height: 800px;
	min-width: 350px;
	width: 100vw;
	height: 100vh;
	background-color: rgb(22, 19, 20);
	/* background-image: url((unknown)); */
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	z-index: -1;
}

section {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: rgb(238, 238, 238);
}

section h1 {
	font-size: 3rem;
}

section .image-container {
	width: 200px;
}
section img {
	width: 100%;
}

section h2 {
	margin: 0;
	font-size: 1.9rem;
}
section h3 {
	margin: 0;
	font-size: 1.5rem;
	text-transform: capitalize;
	font-weight: 400;
	text-align: center;
}

section h3 span {
	font-size: 1.2rem;
	text-transform: none;
	font-weight: 100;
	margin-top: -2px;
	display: block;
}

section .social-media-icons {
	text-align: center;
	margin-top: 50px;
	width: 300px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

section .social-media-icons a {
	text-decoration: none;
	color: #fff;
}

section .social-media-icons .fab {
	font-size: 1.5rem;
	transition: all 0.3s ease;
	cursor: pointer;
	width: 60px;
	/* background-color: orange; */
}

section .social-media-icons .fab:hover {
	text-align: center;
	/* width: 50px; */
	/* font-size: 1.5rem; */
	width: 100px;
	/* background-color: red; */
	/* flex-grow: 0.5; */
	justify-self: center;
}

section span.wave-hand {
	animation-name: waves;
	animation-duration: 2.5s; /* Change to speed up or slow down */
	animation-iteration-count: infinite; /* Never stop waving :) */
	transform-origin: 70% 70%; /* Pivot around the bottom-left palm */
	display: inline-block;
}

@keyframes waves {
	0% {
		transform: rotate(0deg);
		/* transform: scale(1); */
	}
	10% {
		transform: rotate(-8deg);
	} /* The following five values can be played with to make the waving more or less extreme */
	20% {
		transform: rotate(14deg);
	}
	30% {
		transform: rotate(-14deg);
	}
	40% {
		transform: rotate(5deg);
		/* transform: scale(1.2); */
	}
	50% {
		transform: rotate(-10deg);
		/* transform: scale(1.2); */
	}
	60% {
		transform: rotate(0deg);
	} /* Reset for the last half to pause */
	100% {
		transform: rotate(0deg);
		/* font-size: 3rem; */
		/* transform: scale(1); */
	}
}