:root {
	--N4: #2bbf94;
	--N4-BG: #f2fefb;
	--N3: #ea8ddc;
	--N3-BG: #fdf2fb;
	--N2: #f59f43;
	--N2-BG: #fff8f2;
	--N1: #f54361;
	--N1-BG: #fff5f5;
}

.course-card {
	border-width: 3px;
	border-style: solid;
}

.course-card[data-level="N5"] { border-color: var(--N5); }
.course-card[data-level="N4"] { border-color: var(--N4); }
.course-card[data-level="N3"] { border-color: var(--N3); }
.course-card[data-level="N2"] { border-color: var(--N2); }
.course-card[data-level="N1"] { border-color: var(--N1); }

.course-icon-group {
	margin-top: -25px;
}

.course-icon-group div {
	width: 80px;
	height: 80px;
	font-size: 30px;
	border: 3px solid white;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}

.course-card[data-level="N5"] .course-icon-group div:first-child, .course-card[data-level="N5"] .course-option:hover { 
	color: var(--N5);
	border-color: var(--N5) !important;
	background-color: var(--N5-BG); 
}

.course-card[data-level="N4"] .course-icon-group div:first-child, .course-card[data-level="N4"] .course-option:hover { 
	color: var(--N4);
	border-color: var(--N4) !important;
	background-color: var(--N4-BG); 
}

.course-card[data-level="N3"] .course-icon-group div:first-child, .course-card[data-level="N3"] .course-option:hover { 
	color: var(--N3);
	border-color: var(--N3) !important;
	background-color: var(--N3-BG); 
}

.course-card[data-level="N2"] .course-icon-group div:first-child, .course-card[data-level="N2"] .course-option:hover { 
	color: var(--N2);
	border-color: var(--N2) !important;
	background-color: var(--N2-BG); 
}

.course-card[data-level="N1"] .course-icon-group div:first-child, .course-card[data-level="N1"] .course-option:hover { 
	color: var(--N1);
	border-color: var(--N1) !important;
	background-color: var(--N1-BG); 
}

.class-text {
	margin-left: 3px;
}

.enroll-btn {
	transition: filter 0.3s;
}

.enroll-btn:hover {
	filter: brightness(0.9);
}