* {
	margin: 0;
	padding: 0;
	transition: 0.8s;
	font-family: "Segoe UI";
}


body {
	background: #0e142d;

}

#name{
	border: none;
	padding: 10px;
	width: 300px;
	margin-top: 10px;

}
button {
	padding-left: 40px;
	padding-right: 40px;
	height: 40px;
	border: 2px solid #ff0059;
	background: transparent;
	color: #ff0059;
	transition: 0.5s;
}
button:hover{
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	background: #ff0059;
	color: black;
	transition: 0.5s;
	box-shadow: 0 0 40px 0px rgba(177, 48, 93,0.5);
}
.container{
	width: 700px;
	border-left: 5px solid #b1305d;
	transition: 0.5s;
	padding: 40px;
}

.container:hover{
	background: rgba(177, 48, 93,0.1);
	backdrop-filter: blur(10px);
	transform: scale(1.1);
	border-left: 10px solid #b1305d;
	transition: 0.5s;
}

section .wave{
	position: absolute;
	bottom: 0;
	left: 0;
	width:100%;
	height: 100px;
	background: url("wave.png");
	background-size: 1000px 100px;
	opacity: 0;
}

section .wave.wave1 {
	animation: animateR 3s linear infinite;
	z-index: 5;
	animation-delay: 0s;
	opacity: 1;
	

}


section .wave.wave2 {
	animation: animateL 7s linear infinite;
	z-index: 4;
	animation-delay: -2s;
	opacity: 0.6;
}

section .wave.wave3 {
	animation: animateR 5s linear infinite;
	z-index: 3;
	animation-delay: -4s;
	opacity: 0.4;
}

section .wave.wave4 {
	animation: animateL 2s linear infinite;
	z-index: 3;
	animation-delay: -6s;
	opacity: 0.2;
}

@keyframes animateR{

	0%
	{
		background-position-x: 0;
	}
	100%
	{
		background-position-x: 1000px;
	}
}



@keyframes animateL{

	0%
	{
		background-position-x: 0;
	}
	100%
	{
		background-position-x: -1000px;
	}
}


#container{
	margin: 50px;
	height: 500px;
}