@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap');
* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #131316;
	font-family: 'Poppins', sans-serif;
	padding: 0;
	margin: 0;
}

.background-area {
	height: 100vh;
	animation: animate 25s ease infinite;
}

section {
	display: grid;
	place-items: center;
	align-content: center;
	min-height: 100vh;
}

/* @keyframes animate{
	0% {
		background-color: #fd6f5f;
	}
	25% {
		background-color: #9b27b0;
	}
	50% {
		background-color: #fb4d56;
	}
	75% {
		background-color: #7b1fa2;
	}
	100% {
		background-color: #fd6f5f;
	}
} */

.hidden {
	opacity: 0;
	filter: blur(5px);
	transform: translateX(-100%);
	transition: all 1.4s;
}

@media(prefers-reduced-motion) {
	.hidden {
		transition: none;
	}
}

.show {
	opacity: 1;
	filter: blur(0);
	transform: translateX(0);
}