#content {
	font-family: Georgia, sans-serif;
	/* font-size: large; */
}

#course_head{
	vertical-align: bottom;
	display: block;
	max-width: 98%;
	min-width: 150px;
	min-height: 150px;
	font-weight: bold;
	margin: 0px;
	margin-bottom: 0;
	padding: 0;
	padding-bottom: 0;
}

.coursetable {
    border:#eee 1px solid;
    margin: 10px;
}

.coursetable tr td {
    border-top:#eee 1px solid;
    border-left:#eee 1px solid;
    padding: 10px;
    /* padding-right: 10px; */
}


@media only screen and (max-width: 500px) {
.link {
	padding-top: 15px;
	padding-bottom: 15px;
}
}


/* Stolen from  https://stackoverflow.com/questions/10405945/html-ordered-list-1-1-1-2-nested-counters-and-scope-not-working */
.section-listing {
	counter-reset: section -1;
	list-style-type: none;
}

.section-listing >  li {
	counter-increment: section;
	    counter-reset: item -1;
}

.section-listing li:before {
	content: "Section " counter(section) ". ";
	font-weight: bold;
}

.section-listing li ol {
    list-style-type: none;
}

.section-listing li ol li {
    counter-increment: item;
}

.section-listing li ol li:before {
    content: counter(section) "." counter(item) " ";
	font-weight: normal;
}

/* --- */

.figure {
	font-style: italic;
	font-size: small;
	width:fit-content;
	max-width: 80%;
	text-align: center;
	align-content: center;
	margin: 20px;
	padding: 20px;
	margin-left:auto;
	margin-right:auto;
	border: 1px solid rgba(128, 128, 128, 0.494);
	background-color: white;
}

img {
	display: block;
	max-width: 95%;
	min-width: 40%;
	max-height: 400px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 10px;
	padding: 20px;
}

.code {
	display: block;
	font-family:monospace;
	width:fit-content;
	font-weight: bold;
	max-width: 80%;
	margin: 20px;
	margin-left:auto;
	margin-right:auto;
	padding:15px;
	text-align: left;
	border: 1px solid gray;
	font-size: 15px;
}

.code table {
	border: none;
}

.code table tr td {
	text-align: left;
	border: none;
	padding: 10px;
	vertical-align: top;
}

.state {
	text-align: right !important;
}

.exercise {
	margin:10px;
	margin-left: auto;
	margin-right: auto;
	overflow: auto;
	width: 90%;
	padding:2%;
	border: 1px solid gray;
	

	text-justify:none;
	background-color:rgba(147, 255, 156, 0.15) ;
}

.exercise::before {
	color: rgb(0, 87, 61);
	content: "Exercise. ";
	font-weight: bold;
}

.challenge-exercise {
	margin:10px;
	margin-left: auto;
	margin-right: auto;
	overflow: auto;
	width: 90%;
	padding:2%;
	border: 1px solid rgb(255, 0, 0);
	

	text-justify:none;
	background-color:rgba(219, 255, 147, 0.15) ;
}

.challenge-exercise::before {
	color: rgb(32, 110, 38);
	content: "Challenge Exercise. ";
	font-weight: bold;
}

.individual-exercise {
	margin:10px;
	margin-left: auto;
	margin-right: auto;
	overflow: auto;
	width: 90%;
	padding:2%;
	border: 1px solid rgb(38, 0, 255);
	
	background-color:rgba(147, 255, 226, 0.15) ;
}

.individual-exercise::before {
	color: rgb(32, 110, 87);
	content: "Individual Exercise. ";
	font-weight: bold;
}

.remark {
	margin:10px;
	margin-left: auto;
	margin-right: auto;
	overflow: auto;
	width: 90%;
	padding:2%;
	/* border: 1px solid gray; */
	font-style: italic;

	text-justify:none;
	background-color:rgba(255, 254, 214, 0.058) ;
}

.remark::before {
	color: rgb(56, 0, 0);
	content: "Remark. ";
	font-weight: bold;
}

.claim {
	margin:10px;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	padding:2%;
	border: 1px solid rgb(192, 192, 192);

	text-justify:none;
	background-color:rgba(238, 238, 238, 0.15) ;
}

.problem {
	margin:10px;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	padding:2%;
	border: 1px solid gray;

	text-justify:none;
	background-color:rgba(253, 67, 67, 0.1) ;
}

.problem::before {
	color: rgb(157, 0, 0) ;
	content: "Problem. ";
	font-weight: bold;
}

.bonus-problem {
	margin:10px;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	padding:2%;
	border: 1px solid rgb(242, 0, 255);

	text-justify:none;
	background-color:rgba(253, 67, 129, 0.1) ;
	animation: colorTransition 1s infinite alternate;
}

@keyframes colorTransition {
	0% {
		border-color: #ff0000;
	}

	100% {
		border-color: #ff00ea;
	}
}

.bonus-problem::before {
	color: rgb(148, 17, 54) ;
	content: "Bonus Problem. ";
	font-weight: bold;
}

.definition {
	margin:10px;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	padding:2%;
	/* border: 1px solid blue; */

	text-justify:none;
	background-color:rgba(134, 187, 255, 0.15) ;
}

.definition::before {
	color: rgb(0, 46, 107);
	content: "Definition. ";
	font-weight: bold;
}

.theorem {
	margin:10px;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	padding:2%;
	/* border: 1px solid blue; */

	text-justify:none;
	background-color:rgba(199, 128, 254, 0.15) ;
}

.theorem::before {
	color: rgb(86, 0, 136);
	content: "Theorem. ";
	font-weight: bold;
}

.lemma {
	margin:10px;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	padding:2%;
	/* border: 1px solid blue; */

	text-justify:none;
	background-color:rgba(206, 172, 255, 0.15) ;
}

.lemma::before {
	color: rgb(57, 0, 142);
	content: "Lemma. ";
	font-weight: bold;
}

.example {
	margin:10px;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	padding:2%;
	/* border: 1px solid blue; */

	text-justify:none;
	background-color:rgba(0, 0, 0, 0.05); ;
}

.example::before {
	color: rgb(0, 0, 0);
	content: "Example. ";
	font-weight: bold;
}

.algorithm {
	margin:10px;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	padding:2%;
	/* border: 1px solid blue; */

	text-justify:none;
	background-color:rgba(60, 60, 60, 0.05); ;
}

.hint {
	color: rgba(0,0,0,0);
	font-style: italic;
	font-size: small;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;

	text-justify:none;
	border: 1px dashed rgb(101, 0, 110) ;
}

.hint::before {
	color: rgb(56, 56, 56);
	content: "Hint: ";
	font-weight: bold;
}

.hint a {
	visibility: hidden;
}

.hint:hover {
	color:black;
}

.hint:hover a {
	visibility:visible;
}

.figure table {
	margin: 10px;
	margin-left: auto;
	margin-right: auto;
}

.tikz {
	display: block;
	width: fit-content;
	text-align: center;
	margin: 10px;
	margin-left: auto;
	margin-right: auto;
	font-size: large;
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px;
}

td {
	min-width: 20px;
	text-align: center;
}

.alignenv, .alignenv img, .alignenv td {
	max-width: 70%;
	min-width: 50px;
}

.alignenv {
	display: block;
	margin: 20px;
	border: none;
	margin-left: auto;
	margin-right: auto;
}

.alignenv td, .alignenv th {
  border: none;
  padding: 5px;
}

.proof {
	/* height: 40px;
	overflow: hidden; */
	margin-top: 0;
	margin-bottom:10px;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	padding:2%;
	/* border: 1px solid blue; */
	background-color:rgba(178, 146, 185, 0.05);

	text-justify:none;
	border-bottom: 2px double rgba(199, 128, 254, 0.554) ;
}

.proof:hover{
	/* height: fit-content; */
}

.proof::before {
	color: rgb(0, 0, 0);
	content: "Proof. ";
	font-weight: bold;
}