/* theme */

:root {
	color-scheme: dark;
	--bg: #000;             /* page + panels (was white) */
	--fg: #eee;             /* body text (was #333) */
	--fg-strong: #fff;      /* emphasized text (was black) */
	--muted: #8a8a8a;       /* secondary text (was #858585 / darkgrey) */
	--surface: #1a1a1a;     /* raised boxes, code (was #eee / #f2f1f1) */
	--border: #e6e6e6;      /* primary rules + outlines (was black) */
	--border-subtle: #444;  /* faint dividers (was lightgray) */
	--link: #ff4a4a;        /* accent (was red) */
}

/* webfonts */

@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  src: url("../fonts/Pretendard-Light.woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  src: url("../fonts/Pretendard-Regular.woff");
}


@font-face {
  font-family: "SF Text";
  font-weight: 100;
  src: url("../fonts/SF-Pro-Text-Regular.otf");
}

@font-face {
  font-family: "SF Text";
  font-weight: 300;
  src: url("../fonts/SF-Pro-Text-Semibold.otf");
}

@font-face {
  font-family: "SF Mono";
  font-weight: 300;
  src: url("../fonts/SF-Mono-Medium.otf");
}


*,
*:after,
*:before {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

/* type */
html, h1, h2, h3, h4, h5, h6, table, th, tr, td {
	font-family: "SF Text", "Pretendard", arial, helvetica;
	font-size: 16px;
	line-height: 22px;
	font-weight: 100;
	color: var(--fg);
}

h1, h2, h3, strong, b, tr {
	font-family: "SF Text", "Pretendard", arial, helvetica;
	font-weight: 300;
}

h2 {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
}

h3 {
	padding-top: 20px;
}

code, footer, pre {
	font-family: "SF Mono", arial, helvetica;
	font-weight: 300;
	font-size: 14px;
}

.number, .dates {
	font-family: "SF Mono", arial, helvetica;
	font-size: 13px;	
}

header, #class-info, footer, h5, #schedule-section .more h2, #tabletops-section .more h2, #menu {
	font-size: 13px;
	line-height: 16px;
}

a {
	/*color: red;*/
	text-decoration: none;
	/*background: #eee;*/
	color: var(--link);
}

h1 {
	margin-bottom: 10px;
}

p {
	margin-bottom: 20px;
}

ul li {
	list-style-type: circle;
}

ol li {
	list-style-type: decimal;
}

#schedule-section .more em {
	background: yellow;
	color: #000;
	font-style: normal;
}

small {
	font-size: 13px;
	color: var(--muted);
}

/* colors */

body {
	background: var(--bg);
	color: var(--fg);
}

body.Statements {
	/*background: Beige;*/
}

body.CV {
	background: Chocolate;
}

body.Timeline .page {
	/*background: beige;*/
}

body.Personal.Website {
	background: Coral;
}

body.HTML {
	background: DarkGoldenRod;
}

body.CSS {
	background: DarkKhaki;
}

body.Collection {
	background: RosyBrown;
}

body.Favicon {
	background: DodgerBlue;
}

body.Media {
	background: IndianRed;
}



/* navigation */

#reset {
	position: absolute;
	right: 20px;
	top: -10px;
	font-size: 16px;
	line-height: 13px;	
}

/* header and footer */

header {
	position: fixed;
	top: 10px;
	left: 10px;
	width: 200px;
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 10px;
	background: var(--bg);
}

header p, #logo {
	margin-bottom: 10px;
	display: block;
}

header>*{
	padding-right: 20px;
}

header a {
}

#menu {
	z-index: 100;
	height: auto;
	padding: 10px 0px;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	background: var(--bg);
	margin: 10px 0px;
	display: block;
}

#menu ul {
	margin: 5px 0px 5px 5px;
}

#menu li {
	display: block;
	/*border-top: 1px solid black;*/
	margin-bottom: 2px;
}

#menu li a {
	font-size: 13px;
	line-height: 16px;
	font-style: normal;
	text-decoration: none;	
	cursor: pointer;
	color: var(--fg-strong);
}

#menu li a:hover {
	padding-left: 5px;
}

#menu li a::before {
	content: '→';
}

#menu li.deactivated {
	opacity: .25;
}


footer {
	z-index: 0;
	position: fixed;
	left: 10px;
}

footer {
	bottom: 10px;
}

#container {
/*	display: flex;
	flex-direction: row;
	height: 100vh;*/
	width: 800px;
	margin: auto;
	background: var(--bg);
	margin: 0px 0px 0px 250px;
	border-radius: 0px;
}

.home #container {
/*	width: 3900px;	*/
	background: transparent;
}

.home #container.collapse {
/*	width:  900px;*/
}

.home section#schedule-section {
	margin: 8px 0px;
}

.home section#home-overview {
	margin: 0px 0px;
	background: var(--bg);
	margin-bottom: 100px;
	border-radius: 20px;
}

.Home #assignments {
	display: grid;
	grid-template-columns: 1fr 1fr;	
	grid-gap: 10px;	
	margin-bottom: 20px;
}

.Home #assignments div {
	border: 1px solid var(--border);
	border-radius: 0px;
	padding: 20px;
}

.Home #assignments div img{
	width: auto;
	height: 40px;
	margin: 5px 10px;
}

/* pages */

#sections {
}

section {
	display: block;
	overflow: scroll;
	z-index: 0;
	margin: 0px;
}

.border {
	/*border: 1px solid black;*/
	margin: 20px auto;
	max-width: 800px;
	border-radius: 50%;
	padding: 20px 0px;
	/*box-shadow: 0px 0px 10px rgba(0,0,0,.5);	*/
	transition:  all 500ms ease;
	/*background: white;*/
}

.border:hover {
/*	box-shadow: 0px 0px 2px rgba(0,0,0,0);	*/
}

section h1, section .more {
	padding: 20px 00px 10px;
	margin: 0px;
}

section h1:hover {
	cursor: pointer;
	border-radius: 16px;
}

hr {
	margin: 36px 0px 18px;
}

section img {
	max-width: 80%;
	height: auto;
	/*filter: hue-rotate(180deg);*/	
	margin: 20px 0px;
}

.top {
	z-index: 10;
}

section ul, section ol, .Schedule ul, .Course.Overview ul, .Exercises ul, .Schedule ol, .Course.Overview ol, .Exercises ol {
	margin: 10px 10px 20px 40px;
}

section ul {
/*	background: white;	*/
}

#overview-section ul {
	background: transparent;
}

code, pre {
	padding: 0px 2px;
	background: var(--surface);
	color: #ddd;
}

pre {
	padding: 12px 10px;
	margin-bottom: 20px;
}


h5 {
	margin-bottom: 24px;
}

table {
	width: 100%;
	margin-bottom: 36px;
}

th {
	text-align: left;
}

em a {
	font-style: normal;
	display: block;
	margin-bottom: 36px;
	text-decoration: none;
}

em a::before {
	content: '↪';
}

/*#references-section .more{
	columns: 2;
}*/


.break-stop {
	break-inside: avoid;	
}

blockquote {
	padding-left: 10px;
	margin-left: 20px;
	border-left: 1px solid var(--border);
}

.highlight {
	background: rgba(255,255,0,.22);
	padding: 10px 10px 1px;
	border-radius: 5px;
	margin-bottom: 10px;
}

.expander {
	margin: 5px 0px 10px;
	text-decoration: underline;
	font-size: 14px;
	font-weight: 400;
	padding: 2px 5px;
	margin-left: -5px;
}

.expander:hover {
	text-decoration: none;
	cursor: pointer;
	background: rgba(255,255,255,.15);
}

.expand.disable {
	display: none;
}

/* schedule */

.weeks {
/*	box-shadow: 0px 0px 10px rgba(0,0,0,.5);		*/
	margin: 0px 0px;
}

.page .weeks {
	margin: 10px 0px 20px;
}


.week {
	border-top: 1px solid var(--border);	
	border-right: 1px solid var(--border);	
	border-left: 1px solid var(--border);	
	margin: 0px 0px;
	background: var(--bg);
	padding: 5px;
}

.week:last-child {
	border-bottom: 1px solid var(--border);	
}

.week:hover {
	background: rgba(255,255,255,.08);
}

section .week ul {
	background: transparent;
}

h3.title {
	padding: 5px 10px;
	margin: 0px;
	display: block;
	cursor: pointer;
	font-weight: 100;
	/*text-decoration: underline;*/
}

h3.title:hover {
	text-decoration: none;
}

.dates {
	float: right;
}

.activities {
	padding-bottom: 0px;
	margin: 0px;
}

.key, .class-doc {
	font-size: 13px;
	border: 1px solid var(--border);
	border-radius: 8px;
	margin: 5px 0px 10px 0px;
	padding: 0px 10px;
	display: inline-block;
	background: var(--bg);
}

.page .key {
	margin: 5px 0px 0px;
}

.class-doc {
	margin-left: 0px;
}

/* content types */

.week ul {
  margin-bottom: 0px;
}

.week ul li{
  list-style-type: none;
  margin: 0px;  
  padding: 0px 0px 0px 10px;
}

#container .week ul ul{
	padding: 0px;
}

ul li::before {
    display: inline-block;
    width: 30px;
    margin-left: -30px;
}

.in-class ul li::before {
  content: '☀︎';
}

.due ul li::before {
  content: '✔︎';
}

.in-class, .homework {
	border-top: 1px solid var(--border-subtle);
	/*color: blue;*/
}

.homework ul li::before {
  content: '→';
}

/* hide and show dates */

.activities.disable {
	display: none;
}

/* table */

table, th, td {
  border: 1px solid var(--border);
  border-collapse: collapse;
}

th, td {
	padding: 5px 10px;
	/*background: white;*/
}

.Schedule tr:nth-of-type(4) td{
	background-color: rgba(255,0,255,.3);
}

.Schedule tr:nth-of-type(3) td, .Schedule tr:nth-of-type(5) td, .Schedule tr:nth-of-type(10) td {
	background-color: rgba(0,255,0,.3);
}

.Schedule tr:nth-of-type(6) td, .Schedule tr:nth-of-type(8) td{
	background-color: rgba(0,255,255,.3);
}

.Schedule tr td:first-of-type {
	font-family: "SF Mono", arial, helvetica;
	font-weight: 300;
	font-size: 14px;
}

/* colors */

.red {
	background: rgba(255,0,0,.22);
	background: linear-gradient(0deg, rgba(255,0,0,0) 0%, rgba(255,0,0,.35) 100%);
	background: rgba(255,0,0,.22);
}

.blue {
	background: rgba(0,0,255,.35);
	background: linear-gradient(0deg, rgba(0,0,255,0) 0%, rgba(0,0,255,.5) 100%);
	background: rgba(0,0,255,.35);
}

.green {
	background: rgba(0,255,0,.2);
	background: linear-gradient(0deg, rgba(0,255,0,0) 0%, rgba(0,255,0,.35) 100%);
	background: rgba(0,255,0,.2);
}

.purple {
	background: rgba(255,0,255,.25);
	background: linear-gradient(0deg, rgba(255,0,255,0) 0%, rgba(255,0,255,.45) 100%);	
	background: rgba(255,0,255,.25);
}

.yellow {
	background: rgba(255,255,0,.2);
	background: linear-gradient(0deg, rgba(255,255,0,0) 0%, rgba(255,255,0,.45) 100%);	
	background: rgba(255,255,0,.2);
}

/* prompts */

body.Portfolio .page ul, body.Interview .page ul, #portfolio-section ul, #interview-section ul{
	border: 1px solid var(--border);
	background: var(--bg);
	border-radius: 10px;
	margin: 0px 0px 20px;
	padding: 10px 0px;
/*	box-shadow: 0px 0px 10px rgba(0,0,0,.5);	*/
}

body.Portfolio .page ul li, body.Interview .page ul li, #portfolio-section ul li, #interview-section ul li{
	padding-left: 40px;
	list-style-type: none;
}

body.Portfolio .page ul li::before, body.Interview .page ul li::before, #portfolio-section ul li::before, #interview-section ul li::before {
	list-style-type: none;
  display: inline-block;
  width: 26px;
  margin-left: -26px;
  content: '⏰';
}

body.Portfolio .page ul.reqs li::before, body.Resource .page ul.reqs li::before, #portfolio-section ul.reqs li::before, #interview-section ul.reqs li::before {
 content: '🪲';
}

body.Portfolio .page ul.qs li::before, body.Resource .page ul.qs li::before, #portfolio-section ul.qs li::before, #interview-section ul.qs li::before {
 content: '🙋';
}

body.Resource .page ul.ref li::before {
 content: '🐢';
}

.due-date {
	font-family: "SF Mono", monospace;
	font-size: 15px;
}

/* exercises */

#exercises-section p {
	margin: 0px;
}

#container ul, #container ol {
	padding: 10px 5px;
}

.Exercises #container ul {
	margin-left: 0px;
}

/* resources */

body.Links .page ul, body.Resources li, #resources-section ul, #resources-section li {
	list-style-type: none;
	margin: 0px;
	background: transparent;
}


body.Links .page li, #resources-section li {
	display: inline-block;
	margin-bottom: 7px;
}

body.Links .page a, #resources-section a {
	background: var(--bg);	
	display: inline-block;
	border: 1px solid var(--border);
/*	box-shadow: 0px 0px 10px rgba(0,0,0,.5);*/
	border-radius: 20px;
	padding: 3px 14px;
	text-decoration: none;
	color: var(--fg-strong);

	transition: all 500ms ease;
}

body.Resources .page a:hover, #resources-section a:hover {
	transform: translateY(-10px);
/*	box-shadow: 0px 10px 18px rgba(0,0,0,.75);	*/
}

body.Resources .page ul.break li, #resources-section ul.break li{
	/*border-radius: 20px;
	padding: 3px 14px;
	background: black;
	color: white;
	margin-left: 20px;*/
	margin-top: 20px;
	clear: both;
}

body.Links #container ul {
	padding-left: 0px;
}


/* hiding and showing sections */

section.disable, section.disable .more {
	display: none;
}

#menu .disable {
	opacity: .2;
} 

#menu .disable:hover , #menu li.disable:hover a{
	color: var(--link);
	opacity: 1;
} 

.active {
	z-index: 10;
} 

/* q+a */


div.qa {
	color: var(--muted);
}

div.qa.active {
	color: var(--fg-strong);
}

.question {
	cursor: pointer;
}

.question:hover {
	color: var(--link);
}

div.answer.disable {
	display: none;
}

div.answer {
	border-top:  1px dotted var(--border);
	margin-top: 10px;
	padding-top: 10px;
}

div.answer pre, div.answer code{
	background: var(--bg);
}

.qa {
	border-radius: 20px;
	padding: 10px 20px;
	margin-bottom: 20px;
	background: var(--surface);
}

/* single page */

#back {
	display: block;
	font-size: 13px;
	background: var(--bg);	
	display: inline-block;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 2px 8px;
	margin: 10px 20px;
	text-decoration: none;
	color: var(--fg-strong);

	transition: all 500ms ease;
}

.page {
	padding: 20px 0px;
	width: auto;
}

#content {
	padding: 20px;
	max-width: 800px;
 	margin: 20px auto;
}

/*.page #content ul, .page #content ol {
	padding: 10px 10px 10px 30px;
	display: block;
	margin: 0px 0px 10px;
}
*/
.page #content img {
	height: auto;
	width: auto;
	max-width: 500px;
	max-height: 300px;
	margin-bottom: 20px;
}


@media only screen and (max-width: 800px) {
	
	html, h1, h2, h3, h4, h5, h6, table, tr, td {
		font-size: 14px;
		line-height: 20px;
	}

	h2 {
		font-size: 11px;
		line-height: 14px;
	}

	header, footer, h5 {
		font-size: 13px;
		line-height: 18px;
	}

	#menu {
		display: block;
		position: relative;
		left: 0px;
		bottom: auto;
		width: 100%;
		z-index: 100;
		height: auto;
		padding: 20px;
		/* background: rgba(255, 255, 0, .9); */
		margin: 0px 0px 20px 0px;
		top: 0px;
		padding: 10px 0px;
		border-top: 1px dotted var(--border);
		border-bottom: 1px dotted var(--border);
	}

	#container {
		padding: 0px 0px;
		display: block;
		height: auto;
	}

	.home #container, .home #container.collapse {
		width: 100vw;	
	}

	/* pages */

	header, section {
		position: relative;
		display: block;
		width: calc(100vw);
		height: auto;
		border: none;
		margin: 0px;
		top: 0px;
		left: 0px;
		padding: 20px;
	}

	header {
		border-bottom: 1px solid var(--border);
	}

	.home section#schedule-section, .home section#home-overview {
    margin: 20px 0px;
    width: calc(100%);
	}

	.Home #assignments {
		display: block;
		margin-bottom: 20px;
	}

	.Home #assignments div{
		margin-bottom: 20px;
	}

	section h1, section .more {
		padding: 20px 20px 10px;
		margin: 0px;
	}

	.week {
		margin: 0px;
	}

	.key {
		font-size: 10px;
		margin: 5px 0px 10px 10px;
	}

	#content {
		padding: 0px;
	}

	.page #content img {
		max-width: calc(100% - 40px);
		height: auto;
	}

	#container {
		width: calc(100% - 20px);
		margin: 20px 10px;
		padding: 10px;
	}

	.Home #container {
		width: calc(100% - 20px);
		margin: 20px 10px;
		padding: 0px;
	}

	.Home .key {
		margin: 0px;
	}

	#back {
		margin: 0px;
	}


}