#background-color {
	content: "";
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #232935;
	z-index: -2;
}
main img#background {
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
	z-index: -1;
	filter: brightness(.7);
}

div#my-course-sign {
	position: relative;
	text-align: center;
	padding: 20px 0;
}

div#my-course-sign img {
	width: 150px;

}

section#cards {
	max-width: 900px;
	margin: auto;
	text-align: center;
}

a.course-card {
	display: inline-block;
	position: relative;
	cursor: pointer;
	width: 30%;
}

a.course-card img:nth-child(2) {
	position: absolute;
	left: 0;
	top: 0;
	display: none;
}

a.course-card:hover img:nth-child(2) {
	display: block;
}

section#no-cards {
	position: relative;
	line-height: 100px;
	padding-bottom: 10%;
	font-size: 28px;
	color: #a1c5e3;
	text-align: center;
}

#validate-student-enrollment-code {
	position: relative;
	max-width: 260px;
	background: linear-gradient(to right, #99ebc5, #68d8d3, #7fa1e6);
	margin: 30px auto;
	padding: 10px 20px;
	border-radius: 10px;
	text-align: center;
	box-shadow: 0 0 8px 0 rgb(23, 244, 247);
}

#validate-student-enrollment-code h3 {
	color: #1690aa;
	margin-bottom: 10px;
	font-weight: 400;
}

#validate-student-enrollment-code button {
	background-color: #68ce9e;
	border: none;
	color: white;
}

#validate-student-enrollment-code button:hover {
	background-color: rgb(71, 197, 138);
	border: none;
}

#validate-student-enrollment-code button:active {
	background-color: #5ab188;
	border: none;
}

@media screen and (max-width: 900px) {
	a.course-card {
		width: 48%;
	}
	
}

@media screen and (max-width: 768px) {
	main {
		position: relative;
		padding-bottom: 150px !important;
	}

	a.course-card {
		width: 85%;
	}

	section#no-cards {
		padding-bottom: 10%;
	}

		#validate-student-enrollment-code {
			position: relative;
			max-width: none;
			width: calc((90% - 50px));
		}
}