@font-face {
    font-family:"ABCOracleTriple-Book";
    src:url("../fonts/EduOracleTriple-Book.woff2") format("woff2"),url("../fonts/EduOracleTriple-Book.woff") format("woff");
    font-style:normal;
    font-weight:400;
}

@font-face {
    font-family:"Control Cursive";
    src:url("../fonts/ControlCursive-Regular.woff2") format("woff2"),url("../fonts/ControlCursive-Regular.woff") format("woff");
    font-style:normal;
    font-weight:400;
}

* {
	margin: 0;
	box-sizing: border-box;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	font-family: "Helvetica Neue", "Arial", sans-serif;
	font-weight: normal;
	font-size: 2.4vw;
	line-height: 1.1;
	transition: color 0.5s ease;
}

.nav-content {
	text-decoration: none;
}

*::selection {
	background: #ffffba;
	color: #000;
}

h3,
p {
	font-size: 2.4vw;
	line-height: 1.1;
	transition: color 0.5s ease;
}

.highlight {
	font-family: 'Control Cursive', "Helvetica Neue", "Arial", sans-serif;
	/*font-size: 2.8vw;
	line-height: 1.1;*/
}

.d-principle {
	font-family: "ABCOracleTriple-Book";
}

a {
	text-decoration: none;
	color: #000;
	transition: color 0.5s ease;
}

a:hover {
	color: blue;
}

a:hover#fall  {
	color: blue;
}

a:hover#spring  {
	color: darkviolet;
}

h3 a,
p a {
	text-decoration: none;
	color: #000;
	transition: color 0.5s ease;
}

.course-info {
	position: fixed;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 36%;
    height: 100%;
    padding: 2%;
}

.nav-content,
.page-content {
	width: 64%;
	margin-left: 36%;
	padding: 2%;
}

.assignment {
	display: flex;
}

.week{
	width: 8%;
}

.page-content a {
	border-bottom: 2px solid #000;
}

#heading-tb {
	padding-bottom: 1.6%;
}

#fall a:hover {
	color: blue;
}

#spring a:hover {
	color: darkviolet;
}

.selected {
	text-decoration: none;
}

.indent,
p .indent {
	text-indent: 0;
	display: block;
	font-family: "times New Roman", times, serif;
	font-size: 2.8vw;
}

.caps {
	text-transform: uppercase;
}

.no-indent {
	text-indent: 0;
}

s {
    text-decoration: line-through;
}

.nav {
	position: fixed;
	top: 0;
	margin-top: 40px;
}

.nav p {
	text-indent: 0;
}

img {
	width: 100%;
}

.rule {
	display: block;
	border-bottom: 2px solid #000;
	transition: border-bottom-color 0.5s ease;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#mobile {
	display: none;
}

#quote {
	margin: -0.8%;
}

/* Default light mode styles - ensure white background and black text */
html {
	background-color: #fff;
	transition: background-color 0.5s ease;
}

body {
	background-color: #fff;
	color: #000;
	transition: background-color 0.5s ease, color 0.5s ease;
}

/* Dark mode styles - only applied when body has dark-mode class */
body.dark-mode,
html.dark-mode {
	background-color: #000;
}

body.dark-mode {
	color: #fff;
}

body.dark-mode * {
	color: #fff;
	transition: color 0.5s ease;
}

body.dark-mode a {
	color: #fff;
	transition: color 0.5s ease;
}

body.dark-mode a:hover {
	color: #ffffba;
}

body.dark-mode .rule {
	border-bottom-color: #fff;
	transition: border-bottom-color 0.5s ease;
}

body.dark-mode *::selection {
	background: #ffffba;
	color: #000;
}

@media only screen and (max-width : 900px) {

	.hide-mobile {
		display: none;
	}
	
	*,
	h3,
	h3 a,
	p,
	a,
	.highlight,
	.d-principle {
		font-size: 4.2vw;
		line-height: 1.3;
	}

	.assignments {
		margin-left: 0;
	}

	.assignment {
		padding:  0.7%;
		flex-wrap: wrap;
	}

	.course-info {
		position: inherit;
		width: 100%;
	}

	.col {
		padding-bottom: 8%;
	}

	.nav-content,
	.page-content {
		width: 100%;
		margin-left: 0;
	}

	.page-content {
		padding-left: 2%;
		padding-right: 2%;
	}

	.page-content a {
    	border-bottom: 1px solid #000;
	}

	.rule {
		border-bottom: 1px solid #000;
	}

	.nav-content p {
		line-height: 1.2;
	}

	.principle {
		width: 100%;
		padding-left: 12%;
	}

	.week,
	.number {
		display: none;
	}

	.date {
		width: 15%;
	}

	.presentation {
		width: 25%;
		order: -1;
	}

	.title {
		width: 60%;
		order: -1;
		padding-right: 4%;
	}

}