@import url('https://fonts.googleapis.com/css?family=Lato:400,700');

html {
	background-color: #8EC5FC;
	background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}

body {
	margin: 0;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;

	font-family: "Lato", sans-serif;
}

main {
	position: absolute;
	background-color: white;
	padding: 2em;

	box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
		0 9px 46px 8px rgba(0, 0, 0, 0.12),
		0 11px 15px -7px rgba(0, 0, 0, 0.2);
}
input {
    font-family: Lato;
    font-size: 16px;
}


h4 {
	margin-bottom: 0.2em;
}

div h4 {
	margin: 0;
}

.level {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin: 0.5em 0;
}

.finalScore {
	margin-top: 0;
}

.authortag {
	opacity: 0.4;
}

#plus,
.minus {
	color: #494949;
}

#plus {
	font-size: 2em;
}

.minus {
	font-size: 2.75em;
}

.coursework,
.courseworkHeading {
	display: inline;
	vertical-align: bottom;
}

.courseworkDiv {
	margin-top: 1em;
}

#weighting,
.coursework {
	flex-grow: 0.5;
}

@media (min-width: 768px) {
	.authortag {
		position: absolute;

		bottom: 15px;
		right: 15px;
	}

	main {
		padding: 60px;
	}
}
a {
	text-decoration: none;
	color: blue;
	transition: color 0.15s cubic-bezier(0,0,0.3,1);
}

a:hover {
	color: red;
}

#exam_weight, #coursework_weight {
	display: inline-block;
	width: 2.5em;
}

.degreeClasses > input {
    display: none;

}

.degreeClasses {
}

.degreeClass {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    flex-grow: 1;

    margin: 2px;
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 1em 0 1em 0;

    transition: border 0.25s cubic-bezier(0,0,0.3,1),
                color  0.25s cubic-bezier(0,0,0.3,1);
}

.degreeClass:hover {
    border: 1px solid #ccc;
}

.degreeClasses > input:checked+label {
    color: #27ae60;
    border: 1px solid #27ae60;
}