@charset "UTF-8";
.moving-gradient-wrap {
		position: relative;
		backface-visibility: hidden;
		transform: translateZ(0);
		--radius: 25px;
		border-radius: var(--radius);
		height: 38.8vw;
		max-height: 559px;
		min-height: 314px;
		z-index: 1;
		overflow: hidden;
		pointer-events: none;
		margin: 0 calc(var(--side-padding) / -2);
		--color1: #FF4040;
		--color2: #B8FE44;
		--color3: #3FFDD2;
		--color4: #E52EFF;
		--color5: #010315;
		--color6: rgba(255, 64, 64, 0.6);
}
@media only screen and (min-width: 1000px) {
		.moving-gradient-wrap {
				--radius: 50px;
				margin-left: calc(var(--side-padding) / -1.5);
				margin-right: calc(var(--side-padding) / -1.5);
		}
}
.moving-gradient-wrap:before, .moving-gradient-wrap:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border-radius: var(--radius);
}
.moving-gradient-wrap:before {
		z-index: 2;
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, black 100%), url("../img/pattern.svg");
		background-position: 50% 50%;
		border-radius: var(--radius);
		box-shadow: inset 0 calc(var(--radius) * -2) var(--radius) var(--black), inset 0 var(--radius) var(--radius) var(--color6);
}
.moving-gradient-wrap:after {
		box-shadow: inset 0 calc(var(--radius) * 1.2) var(--radius) calc(var(--radius) * -1) var(--white);
		border-radius: var(--radius);
		z-index: 2;
}
.moving-gradient {
		position: absolute;
		top: 0;
		left: 0;
		backface-visibility: hidden;
		transform: translateZ(0);
		width: 100%;
		height: 100%;
		background-color: var(--color1);
		background-image: radial-gradient(60% 100% at 50% 5%, var(--color2) 0%, var(--color3) 34.91%, var(--color4) 59.37%, var(--color5) 100%);
		overflow: hidden;
		z-index: 1;
		border-radius: var(--radius);
}
.moving-gradient:before, .moving-gradient:after {
		content: '';
}
.moving-gradient > *, .moving-gradient:before, .moving-gradient:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: var(--radius);
}
.moving-gradient > * {
		z-index: 1;
}
.moving-gradient:before {
		z-index: 2;
		background: radial-gradient(75% 100% at 50% 0%, rgba(1, 3, 21, 0.00) 50.51%, #000 100%);
}
.moving-gradient:after {
		z-index: 3;
		-webkit-backdrop-filter: blur(5vw);
		backdrop-filter: blur(5vw);
}
.moving-gradient-wrap.upside-down:before, .moving-gradient-wrap.upside-down:after {
		transform: scale(1, -1);
}
.moving-gradient-wrap.upside-down .moving-gradient {
		transform: scale(1, -1);
}