.year-square {
	display: inline-flex; /* So we can center items horizontally/vertically */
	align-items: center; /* Center content vertically */
	justify-content: center; /* Center content horizontally */
	width: 100px; /* Square size */
	height: 100px; /* Square size */
	background: linear-gradient(135deg, #a2caf8, #31b3ff);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	border-radius: 12px; /* Slightly rounded corners */
	cursor: pointer; /* Pointer cursor on hover */
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Drop shadow */
	transition: all 0.3s ease; /* Smooth transition for hover effect */
	border: 3px solid white;
}

.back-button {
	background: linear-gradient(135deg, #a2caf8, #31b3ff);
	color: #fff;
	font-size: 20px;
}

.student-square {
	display: inline-flex; /* So we can center items horizontally/vertically */
	align-items: center; /* Center content vertically */
	justify-content: center; /* Center content horizontally */
	width: 100px; /* Square size */
	height: 100px; /* Square size */
	background: linear-gradient(135deg, #8896a7, #1e1f20);
	color: #fff;
	font-size: 12px;
	font-weight: 300; /* Optional, for a cool look */
	border-radius: 12px; /* Slightly rounded corners */
	cursor: pointer; /* Pointer cursor on hover */
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Drop shadow */
	transition: all 0.3s ease; /* Smooth transition for hover effect */
	border: 3px solid white;
	background-size: 200% 200%;
}

.student-square:active {
	transform: scale(0.95); /* Slightly shrink the square */
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Reduce shadow */
	transition: transform 0.05s ease; /* Quick transition for click effect */
	animation: gradientAnimation 3s ease infinite; /* Start gradient animation on click */
}

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

.cool-square-button:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
}

.gradient-border {
	border: 3px solid;
	border-image-slice: 1;
	border-width: 3px;
	border-image-source: linear-gradient(45deg, #7888f3, #834dc1);
	/* Chamfered corners */
}

.btn-selected {
	background-color: #b700ff;
}