@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
	--circuit-ink: #102a3a;
	--circuit-muted: #607584;
	--circuit-deep: #071923;
	--circuit-panel: rgba(255, 255, 255, 0.94);
	--circuit-line: #c9dce2;
	--circuit-accent: #0d8c9b;
	--circuit-accent-bright: #45c7c0;
	--circuit-warm: #e5a84b;
}

html {
	background-color: var(--circuit-deep);
	background-image:
		linear-gradient(135deg, rgba(69, 199, 192, 0.08), transparent 42%),
		linear-gradient(315deg, rgba(229, 168, 75, 0.07), transparent 35%);
	background-attachment: fixed;
}

body {
	color: var(--circuit-ink);
	background-color: transparent;
	font-family: 'DM Sans', Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
}


h1 {
	color: var(--circuit-ink);
	font-size: clamp(1.25rem, 2vw, 1.7rem);
	font-family: 'Space Mono', monospace;
	letter-spacing: 0;
}

h2 {
	color: var(--circuit-ink);
	font-size: 1.2rem;
	font-weight:normal;
}

h3 {
	color: var(--circuit-ink);
	margin-top:10px;
	margin-bottom:5px;
}

h4 {
	font-size:17px;
}

.page_layout {
	margin-top: 1.5rem;
	background-image:none;
}

.site_layout {
	width: min(100% - 2rem, 1180px);
	padding: 0 1.25rem 1.5rem;
	border: 1px solid rgba(69, 199, 192, 0.28);
	border-radius: 14px;
	background: rgba(244, 250, 250, 0.97);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
	box-sizing: border-box;
}

.page_footer {
	padding-bottom:30px;
}

.title {
	width: 100%;
	padding: 1rem 0 0.5rem;
	margin-bottom: 0.5rem;
}

.title h1 {
	float:left;
}

.title h2 {
	float:right;
}

.title h3.teacherTitle {
	clear:right;
	font-size:13px;
	float:right;
}

.titleImage {
	display:none;
	width:0px;
}

.titleText {
	float:none;
	padding-left:0;
	padding-right:0;
	width:auto;
	height:auto;
}

.site_header_delimiter {
	background-image: linear-gradient(90deg, rgba(7, 25, 35, 0.78), rgba(7, 25, 35, 0.18)), url('/images/theme-circuits/circuits-header.png');
	background-position: center;
	background-size: cover;
	height: clamp(7rem, 18vw, 11rem);
	margin-bottom: 1rem;
	position:relative;
	overflow:hidden;
	border-radius: 10px;
	box-shadow: inset 0 0 0 1px rgba(69, 199, 192, 0.3);
}

.importantNote {
	margin-left:5px;
	color:black;
}

.leftColumn {
	float:left;
	min-height:350px;
	padding-top:0;
	margin-left:0;
	width: 170px;
}

.rightColumn {
	margin-left: 1.5rem;
	padding-top:0;
	width: calc(100% - 194px);
	overflow: hidden;
	float:left;
	margin-right: 0;
}

.menu {
	height:auto;
}

.menu,
.otherCourses {
	border: 1px solid var(--circuit-line);
	border-radius: 8px;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	background: var(--circuit-panel);
	box-shadow: 0 8px 20px rgba(16, 42, 58, 0.07);
	overflow: hidden;
}

.menu h3,
.otherCourses h3 {
	color: white;
	margin-top:0px;
	text-align:center;
	margin-bottom: 0.5rem;
	background: var(--circuit-deep);
	padding: 0.6rem 0.5rem;
	font-family: 'Space Mono', monospace;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.menu ul,
.otherCourses ul{
	list-style-type: none;
	margin: 0;
	padding: 0 0.75rem;
}

.menu li,
.otherCourses li {
	border-bottom: 1px solid #e6eff0;
}

.menu li:last-child,
.otherCourses li:last-child {
	border-bottom: 0;
}

.menu a,
.otherCourses a {
	display: block;
	padding: 0.5rem 0.25rem;
	color: var(--circuit-accent);
	text-decoration: none;
	transition: color 160ms ease, padding-left 160ms ease;
}

.menu a:hover,
.menu a:focus,
.otherCourses a:hover,
.otherCourses a:focus {
	color: var(--circuit-deep);
	padding-left: 0.5rem;
}

.pageContent {
	padding: 0;
}

.courseDocs {
	background-color: var(--circuit-deep);
	/* background-image: linear-gradient(135deg, rgba(69, 199, 192, 0.12), transparent 55%), url('/images/theme-circuits/box2.png'); */
	/* background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 95%), url('/images/theme-circuits/box2.png'); */
	background-repeat: no-repeat;
	background-position: top left, bottom right;
	border: 0;
	border-left: 3px solid var(--circuit-warm);
	border-radius: 0 8px 8px 0;
	box-shadow: 0 10px 24px rgba(7, 25, 35, 0.16);
}

.courseDocs {
	color:white;
}

.courseDocs a {
	color: var(--circuit-accent-bright);
	text-decoration:none;
}

.courseDocs a:hover,
.courseDocs a:focus {
	color: white;
	text-decoration: underline;
}

.noAvailableCourseDocs {
	color:white;
}

.selectedListItem {
	color: var(--circuit-warm);
	font-weight: 700;
}

.animationDiv {
	width:2px;
	height:2px;
	box-shadow: 0 0 10px 2px var(--circuit-accent-bright);
	animation: pulse 1.5s infinite;
	background-color:white;
	position:absolute;
	left:235px;
	top:-3px;
}

@keyframes pulse {
	0% {
		transform: scale(0.8);
		opacity: 0.6;
	}
	50% {
		transform: scale(1.2);
		opacity: 0.3;
	}
	100% {
		transform: scale(0.8);
		opacity: 0.6;
	}
}

/* ===================== Course  (home) ====================*/

#courseHomePage .courseHomeDocs {
	margin-top:10px;
	margin-bottom:10px;
	color: #474747;
}

#courseHomePage .courseHomeContent {
	min-height:100px;
}

#courseHomePage {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
}

#courseHomePage .pageContent {
	flex: 1 1 0;
	min-width: 0;
}

#courseHomePage .rssAndTwitterColumn {
	flex: 0 1 315px;
	min-width: 0;
}

#courseHomePage .pageContent,
#courseHomePage .rssAndTwitterColumn,
#courseHomePage .courseRSSContent,
#courseHomePage div#twitter,
#courseHomePage .searchSection {
	box-sizing: border-box;
}

#courseHomePage .courseRSSContent {
	padding:10px;
	margin-left:10px;
	font-size:12px;
	background-color:transparent;
	border:1px solid #002548;
	margin-bottom:15px;
}

#courseHomePage .courseRSSContent p {
	margin-top:2px;
	margin-bottom:10px;
}

#courseHomePage .rssTitle {
	margin-top:4px;
	font-weight:bold;
}

#courseHomePage .rssTitleText {
	color:#4E7EAD;
}

#courseHomePage .rssNewsTitle {
	float:left;
	margin-top:5px;
	margin-bottom:10px;
	margin-left:5px;
}

#courseHomePage .rssIcon {
	float:left;
}

#courseHomePage .rssDate {
	color:#666666;
}

#courseHomePage .courseRSSContent h3 {
	padding-top:0px;
}

#courseHomePage .rssLink {
	font-size:11px;
}

#courseHomePage div#twitter {
	font-size:11px;
	margin-left:10px;
	padding:10px;
	min-height:140px;
	background-color:transparent;
	border:1px solid #002548;
	margin-bottom:15px;
}

#courseHomePage .searchSection {
	font-size:11px;
	margin-left:10px;
	padding:10px;
	background-color:transparent;
	border:1px solid #002548;
	margin-bottom:15px;
}

#courseHomePage .twitterIcon {
	float:left;
}

#courseHomePage .twitterTitle {
	float:left;
	margin-bottom:10px;
	margin-left:5px;
}

#courseHomePage .noRecentTweets,
#courseHomePage .noRecentNews  {
	color:#444444;
}

#courseHomePage div#twitter h2 {
	margin: 0;
	padding: 0.4em 1em;
	font-size: 1.1em;
}

#courseHomePage ul#twitter_update_list {
	margin: 0;
	padding-bottom: 15px;
	padding-top:5px;
	list-style-type: none;
}

#courseHomePage ul#twitter_update_list li span {
	display: block;
}

#courseHomePage ul#twitter_update_list li span a {
	color: #00f;
}

#courseHomePage a#profileLink {
	font-size:10px;
}

#courseHomePage .noRecentTweets {
	color:#888888;
	font-style:italic;
}

#courseHomePage .noRecentNews {
	color:#888888;
	margin-top:5px;
	margin-bottom:15px;
}

/* ===================== Course  (notes) ====================*/

#courseNotesPage .courseSession {
	margin-bottom: 35px;
}

#courseNotesPage .courseDate {
	float:left;
	width:100px;
	text-align:right;
	padding-right:10px;
	color: #474747;
}

#courseNotesPage .courseDate a:hover {
	color:#474747;
	text-decoration:none;
}

#courseNotesPage .courseInfo {
	float:left;
	padding-left:10px;
	width:475px;
	min-height:70px;
	border-left:1px solid #9cbfe6;
}
#courseNotesPage p {
	margin-top:0px;
}

#courseNotesPage .courseNotes {
	color:#222222;
}

/* ===================== Course  (work) ====================*/

#courseWorksPage {
	padding:10px;
}

#courseWorksPage .workDiv {
	margin-bottom:45px;
}

#courseWorksPage .workInfo {
	color: #474747;
	margin-top:10px;
}

#courseWorksPage .workDocs {
	margin-top:10px;
	margin-bottom:10px;
	color: #474747;
}

/* ===================== Course  (contact) ====================*/

#courseContactPage {
	padding-left:10px;
}

#courseContactPage .mainText {
	margin-top:10px;
}

/* ===================== Course  (Blog) ====================*/

#courseMiscPage .miscDiv {
	margin-bottom:45px;
	text-align:justify;
	padding:10px;
	padding-right:0px;
}


#courseMiscPage .miscDivList {
	float:right;
	padding:10px;
	margin-left:10px;
	font-size:11px;
	margin-bottom:10px;
	border:1px solid #9CBFE6;
	width:220px;
}

#courseMiscPage .miscMetaInfo {
	color:#4b78ab;
	font-size:12px;
}

#courseMiscPage .miscInfo {
	margin-top:10px;
	color: #000000;
	margin-bottom:25px;
	font-size:12px;
	float:left;
	width:500px;
}

#courseMiscPage .miscDocs {
	margin-top:10px;
	margin-bottom:10px;
	color: #474747;
}

#courseMiscPage .miscList {
	margin-top:5px;
	list-style-type:none;
}

#courseMiscPage .miscListItem {
	margin-bottom:10px;
	color:#474747;
}

#courseMiscPage .miscListItemInfo {
	font-size:0.85em;
	font-style:italic;
	color:#999999;
}

@media (max-width: 760px) {
	.page_layout {
		margin-top: 0.75rem;
	}

	.site_layout {
		width: calc(100% - 1rem);
		padding: 0 0.75rem 1rem;
		border-radius: 10px;
	}

	.title h1,
	.title h2,
	.title h3.teacherTitle {
		float: none;
		text-align: left;
		margin: 0.25rem 0;
	}

	.site_header_delimiter {
		height: 8rem;
		margin-bottom: 0.75rem;
	}

	.leftColumn,
	.rightColumn {
		float: none;
		width: 100%;
		margin: 0;
		min-height: 0;
	}

	.leftColumn {
		margin-bottom: 1rem;
	}

	.menu ul,
	.otherCourses ul {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
		gap: 0 0.75rem;
	}

	.menu li,
	.otherCourses li {
		border-bottom: 1px solid #e6eff0;
	}

	#courseHomePage .pageContent,
	#courseHomePage .rssAndTwitterColumn,
	#courseHomePage .miscInfo,
	#courseNotesPage .courseInfo {
		float: none;
		width: 100%;
		margin-left: 0;
	}

	#courseHomePage {
		display: block;
	}

	#courseHomePage .rssAndTwitterColumn {
		margin-top: 1rem;
	}

	#courseHomePage .courseRSSContent,
	#courseHomePage div#twitter,
	#courseHomePage .searchSection {
		margin-left: 0;
	}

	#courseNotesPage .courseDate {
		float: none;
		width: auto;
		margin-bottom: 0.35rem;
		text-align: left;
	}

	#courseMiscPage .miscDivList {
		float: none;
		width: 100%;
		box-sizing: border-box;
		margin: 0 0 1rem;
	}

	.page_footer {
		margin-top: 3rem;
	}
}