:root {
	--white: white;
	--black: black;
	--slate-grey: #66758a;
	--medium-orchid: #8b3af1;
	--white-smoke: whitesmoke;
	--magenta: #fc1ff7;
}

.gradient-text {
	background: linear-gradient(-45deg, #F300FA, #E48726);
	background-size: 200% 200%;
	animation: gradient-bg 2s ease infinite;
	background-clip: text;
}

.gradient-text:hover {
	animation: gradient-bg 0.5s ease infinite;
	background-clip: unset;
	color: white;
}

.gradient-bg {
	background: linear-gradient(-45deg, #F300FA, #E48726);
	background-size: 200% 200%;
	animation: gradient-bg 2s ease infinite;
}

.triangle-down {
	width: 0;
	height: 0;
	border: 1px solid #25347D;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #010518;
	/* You can adjust this color as per your requirement */
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(var(--rotation-deg, --rotation-deg));
	}
}

.cus-rotate {
	animation: rotate 10s ease-in-out forwards;
}

.rdt_Pagination {
    position: absolute !important;
    bottom: -65px;
    right: 0px;
    border-radius: 20px;
    font-weight: 600 !important;
    font-size: 14px !important;
	width: calc(100%-48px) !important;
	background-color: #2d2f68 !important;
	color: white !important;
}

.wallet-adapter-button-trigger {
	/* background-image: linear-gradient(149deg, #8b3af1, #fc1ff7); */
	background-color: transparent !important;
	border: 1px solid white !important;
	padding: 2px 12px !important;
	font-size: 12px !important;
	border-radius: 14px !important;
	transition-duration: 0.3s;

}

.wallet-adapter-button-trigger:hover {
	border-color: #089999 !important;
	background-color: #88888822 !important;
}

.wallet-adapter-button-start-icon {
	display: none !important;
}

/* .wallet-adapter-button-trigger::before {
    content: "" !important;
} */
@keyframes gradient-bg {
	0% {
		background-position: 0% 25%;
	}

	50% {
		background-position: 50% 25%;
	}

	100% {
		background-position: 0% 25%;
	}
}

#cards {
	--background: rgba(20, 20, 20, 0.6);
	--background-card-content: rgba(44, 44, 44, 0.1);
	/* --glitter: url("/project/noise-base.png");
	--glitter2: url("/project/noise-top.png"); */
	--ratio-x: .5;
	--ratio-y: .75;
	--light-size: 300px;
}

#cards {
	/* display:grid;
	grid-template-columns: repeat(3,min-content);
	gap: 16px;
	flex-wrap:wrap;
	max-width: 66%;
	margin: auto;
	padding: 16px; */
}

#cards:hover .card:before {
	opacity: 1;
	transition-delay: 0.1s;
}

#cards:hover .card:after {
	opacity: .925;
	transition-delay: 0s;
}

.card {
	position: relative;
	/* background-color: rgba(33,33,33,1); */
	/* border-radius:10px; */
	cursor: pointer;
	/* height:260px; */
	/* width:300px; */
	/* display: flex; */
	/* align-items: center; */
	/* justify-content: center; */
	image-rendering: pixelate;
}

.card:before,
.card:after {
	transition: opacity 500ms ease;
	image-rendering: pixelate;
}

.card:after {

	--bgoffsetx: calc(3px * var(--ratio-x));
	--bgoffsety: calc(3px * var(--ratio-y));
	--pointerx: calc(100% * var(--ratio-x));
	--pointery: calc(100% * var(--ratio-y));

	/* background-color: var(--background-card-content); */
	background-image:
		radial-gradient(var(--light-size) circle at var(--pointerx) var(--pointery), rgba(0, 0, 0, 0.1), rgba(244, 244, 244, 0.1)),
		radial-gradient(var(--light-size) circle at var(--pointerx) var(--pointery), #252525cc, rgba(16, 16, 16, 0.1) calc(var(--light-size) * 1)),
		var(--glitter2),
		var(--glitter2);
	background-position: center, center, center, calc(var(--bgoffsetx)*1) calc(var(--bgoffsety)*1);
	background-size: 300px 300px;
	background-blend-mode: normal, color-burn, color-dodge;
	filter: brightness(1.4) contrast(.725);

	opacity: 0;
	z-index: 10;

}

.card:after {

	content: "";
	position: absolute;
	inset: 1px;
	border-radius: 9px;
	height: calc(100% - 2px);
	width: calc(100% - 2px);
	transition-delay: 0.1s;
	z-index: 2;
}

.card:before {

	content: "";
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: inherit;
	opacity: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 5;
}


.card:before {
	content: "";
	background-image:
		conic-gradient(from 0deg at calc(0% + var(--mouse-x)) calc(0% + var(--mouse-y)),
			#FFBD8C22 0%, #FD858522 11%, #FD858522 15%, #F882FF22 27%, #F882FF22 31%, #8785FE22 42%, #8785FE22 46%, #9AFCFF22 55%, #9AFCFF22 59%, #99FD9C22 70%, #99FD9C22 74%, #FFFD8422 87%, #FFFD8422 91%, #FFBD8C22 100%),
		radial-gradient(calc(var(--light-size)*1.5) circle at var(--mouse-x) var(--mouse-y),
			rgba(255, 255, 255, .1), rgba(222, 222, 222, .1) 50%),
		radial-gradient(calc(var(--light-size)*1.5) circle at var(--mouse-x) var(--mouse-y),
			transparent, rgb(233, 222, 244, 0.1) 60%, var(--background) 120%);
	background-blend-mode: hue, color-dodge;
	transition-delay: 0s;
	z-index: 2;
}

.card-content {
	position: relative;
	z-index: 3;
	color: white;
}


.glitter {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.wrapper-full {
	width: auto;
	height: 500px;
	perspective: 2000px;
	color: #fff;
	background-color: #1f1f1f;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 0;
	padding-top: 0;
	display: flex;
	overflow: hidden;
	transform: translate3d(0px, 0px, 102px);
}

.wrapper-card {
	z-index: 10;
	width: 100%;
	height: 100%;
	/* transform-style: preserve-3d; */
	/* background-position: 50%; */
	/* background-repeat: no-repeat; */
	/* background-size: cover; */
	border-radius: 4px;
	flex-direction: column;
	padding-bottom: 2px;
	/* transition: box-shadow .6s; */
	display: flex;
	position: relative;
	overflow: hidden;
	/* transform: translate3d(0, 0, 50px); */
	box-shadow: 0 0 rgba(255, 17, 231, .01), 0 0 rgba(106, 255, 255, .01);
}

.wrapper-card:hover {
	box-shadow: 11px 11px 100px 15px rgba(255, 35, 240, .28), -11px -11px 100px 15px rgba(2, 255, 238, .26);
}


.image-sparkles {
	max-height: 110%;
	position: absolute;
	top: 0%;
	bottom: 0%;
	left: 0%;
	right: 0%;
}

.image-sparkles.mbm-color-dodge {
	z-index: 11;
	max-height: none;
	max-width: none;
	z-index: 11;
}
