a.bttn {
	display: inline-block;
	background:var(--link-bg);
	border-radius: 50px;
	color: var(--link-color);
	text-decoration: none;
	padding: 0.5rem 1rem;
	transition: transform 0.3s ease-out, background 1.5s;
	/* will-change: transform; */
}

a.bttn:hover {
	/* opacity: 0.8; */
	background:var(--link-bg-hover);
	color:var(--link-color-hover);
	transform: translateY(-0.05rem);
}

a.bttn {
	position: relative;
	overflow: hidden;
}

a.bttn::before,
a.bttn::after {
	content: "";
	position: absolute;
	inset: 0;
	transition: opacity 1.5s ease;
}

a.bttn::before {
	background: linear-gradient(135deg, #ff6a00, #ee0979);
	opacity: 1;
}

a.bttn::after {
	background: linear-gradient(135deg, #4facfe, #00f2fe);
	opacity: 0;
}

a.bttn:hover::after {
	opacity: 1;
}


.grad-link {
	position: relative;
	display: inline-block;
	padding: 0.5rem 1rem;
	font-size: 1rem;
	color: white;
	text-decoration: none;
	z-index: 1;
	overflow: hidden;
	border-radius: 1rem;
}

/* layer 1 — initial gradient */
.grad-link::before,
.grad-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transition: opacity 1s ease;
}

/* initial gradient */
.grad-link::before {
	background: linear-gradient(135deg, #FF6A00, #EE0979);
	opacity: 1;
}

/* hover gradient */
.grad-link::after {
	background: linear-gradient(135deg, #feb54f, #fa00fe);
	opacity: 0;
}

/* fade between them */
.grad-link:hover::after {
	opacity: 1;
}

.grad-link:hover {
	transform: translateY(-1px);
	transition: transform 0.3s ease;
}

.grad-link {
	box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.grad-link {
	/* display: block; */
	text-align: center;
	/* width: 100%; */
}

a.basic-link {
	color: var(--text);
}

a.basic-link:hover {
	color: var(--accent);
	transition: 0.3s ease;
	cursor: pointer;
}