@charset "utf-8";
/* CSS Document */
.link-container {
	padding: 10px;
	border-bottom:#0e2b5c 2px solid;
	margin-bottom:10px;
}

.glossy-link {
	display: inline-block;
	padding: 15px 20px;
	text-decoration: none;
	color: white;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	border-radius: 15px;
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	background-size: 200% 200%;
	animation: gradientShift 3s ease infinite;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	transition: all 0.4s ease;
}

.glossy-link::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
		45deg,
		transparent,
		rgba(255, 255, 255, 0.3),
		transparent
	);
	transform: rotate(45deg);
	animation: glossyShine 3s ease-in-out infinite;
}

.glossy-link:hover {
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	background-size: 200% 200%;
	animation: gradientShiftHover 2s ease infinite;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
	transform: translateY(-3px);
}

@keyframes gradientShift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes gradientShiftHover {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes glossyShine {
	0% {
		left: -50%;
	}
	50% {
		left: 150%;
	}
	100% {
		left: 150%;
	}
}