body {
	background-color: black;
	color: white; 
}

div {
	
	color: white;
	font-family: "Helvetica", "San Francisco", "Chalkboard SE", sans-serif;
}

a {
	text-decoration: none;
	color: white;
}

ul {
	position: relative;
	right: 6px;
	padding-top: 2px;

}

li {
	padding-top: 8px;
}

li a:hover {
	color: #00a8f3;
    text-shadow: #7be9ff 1px 1px 20px;
}

p a:hover {
	color: #00a8f3;
    text-shadow: #7be9ff 1px 1px 20px;

}

h3 {
	font-family:"Segoe Print", "Chalkboard SE", "Helvetica", sans-serif;
	color: #7be9ff;
}

.cheat-code-box {
	background-color: black;
	padding: 1px 8px;
	border-radius: 8px;
	color: #ebebeb;

	
}



.dropdown {
	display: inline-block;
	position: relative;
}

.dropbtn {
	padding: 2px 10px;
	font-size: 16px;
	font-family: "Helvetica", "San Francisco", "Chalkboard SE", sans-serif;
	background-color: black;
	color: #00a8f3;
	border: none;
}

.drop-content {
	display: none;
	position: absolute;
	padding: 10px 16px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	box-sizing: border-box;
	min-width: 160px;
	background-color: black;
	text-align: left;
	z-index: 1;
	border-radius: 12px;
}

.drop-content a {
	display: block;
	float: left;
	padding: 6px 18px;
	align-content: center;
	justify-content: center;

}

.drop-content a:hover {
	color: #00a8f3;
}

.dropdown:hover .drop-content {
	display: block;
}

.dropdown:hover .dropbtn {
	background-color: black;
}

.dropbtn:hover {
	color: white;
}

.main-title {
	position: relative;
	display: block;
	font-family: "Segoe Script", "Chalkboard SE", "Helvetica", sans-serif;
	color: #00a8f3;
	align-content: center;
	justify-content: center;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	text-shadow: #7be9ff 1px 1px 20px;

}

.main-motto {
	position: relative;
	display: block;
	font-family: "Segoe Print", cursive, "Chalkboard SE", "Helvetica";
	font-size: 14px;
	width: 50%;
	align-content: center;
	justify-content: center;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	bottom: 30px;
	padding-top: 4px;
	text-shadow: cornsilk 1px 1px 5px;
}

.app-box {
	background-color: #141414;
	position: relative;
	display: block;
	width: 350px;
	border: 1px solid;
	border-color: #242424;
	border-radius: 12px;
	align-content: center;
	justify-content: center;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	bottom: 30px;	
}

.code-box {
	position: relative;
	align-content: left;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	right: 150px;

}

.language-cpp {
	position: relative;
	align-content: left;
	text-align: left;
	justify-content: left;
}


.button-box {
	position: relative;
	display: block;
	background-color: #090909;
	margin: 10px 14px;
	border: 1px solid;
	border-color: #333333;
	width: 96%;
	align-content: center;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	border-radius: 12px;
	box-shadow: black 1px 1px 20px;
    
}

.button-title {
	position: relative;
	background-color: black;
	width: 90%;
	font-family: "Segoe Print", "Chalkboard SE", "Helvetica", sans-serif;
	text-shadow: black 1px 1px 4px;
	align-content: center;
	justify-content: center;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 8px 8px;
	border: 1px solid;
	border-radius: 8px;
	border-color: #222222;
	box-shadow: #888888 1px 1px 10px;
	text-shadow: #7be9ff 1px 1px 10px;
}

.buttons {
	position: relative;
	display: inline-flex;
	border: 1px solid;
	width: 40px;
	height: 34px;
	border-color: white;
	border-radius: 12px;
	padding: 8px 8px;
	margin: 8px 8px;
	align-content: center;
	justify-content: center;
	text-align: center;
	font-size: 14px;
	background-color: black;
	box-shadow: #7be9ff 1px 1px 6px;
	text-shadow: black 1px 1px 3px;

}

.buttons:hover {
	color: #7be9ff;
	box-shadow: white 1px 1px 12px;
	border-color: #7be9ff;
}
.nav-box {
	position: relative;
	width: 91%;
	background-color: #181818;
	border: 1px solid;
	border-radius: 12px;
	border-color: #333333;
	align-content: center;
	justify-content: center;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 8px 8px;
	margin-bottom: 10px;
	box-shadow: #111111 1px 1px 20px;
    

}

footer {
	position: fixed;
	align-content: center;
	justify-content: center;
	text-align: center;
	font-family:"Helvetica", "San Francisco", "Chalkboard SE", sans-serif;
	font-size: 10px;
	left: 0;
	bottom: 0;
	width: 100%;
}

/*Login Page login.html */

.input-form {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	text-align: center;
	padding: 4px 4px;
	margin: 8px 18px;
}

.input-form label {
	margin: 4px 4px;
}

.input-form input {
	margin: 4px 4px;
	align-content: center;
	background-color: #585858;
	border-radius: 12px;
	color: white;
}

.input-form .submitz {
	position: relative;
	background-color: black;
	border: 1px solid white;
	color: white;
	border-radius: 20px;
	padding: 8px 20px;
	margin-top: 20px;

}

.quiz-form {
	position: relative;
	display: block;
	align-content: center;
	text-align: center;
	justify-content: center;
	width: 350px;
	color: white;
	font-family: "Segoe Print", "Chalkboard SE", "Helvetica", sans-serif;
	margin-left: auto;
	margin-right: auto;

}

.quiz-form .q1-input {
	border-radius: 12px;
	background-color: #545454;
}

.quiz-form .quiz-submit {
	color: white;
	background-color: black;
	align-content: center;
	justify-content: center;
	text-align: center;
	font-size: 14px;
	background-color: #161616;
	box-shadow: #7be9ff 1px 1px 6px;
	text-shadow: black 1px 1px 3px;
	border: 1px solid white;
	padding: 4px 20px;
	border-radius: 20px;
	margin: 4px 2px;


}