#calendar {
	--char-height: 20px;
	--char-width: calc(var(--char-height) / 1600 * 675);

	--header-fg: #0b0a01;
	--header-bg: #d8cecb;
	--header-deco-fg: #000000;

	--card-fg: #054b59;
	--card-bg: #c5cc92;
	--card-frame-fg: #5a3a1a;

	--bar-fg: #f0deb4;
	--bar-bg: #2a1a08;

	--class-bg: var(--bar-bg);
	--note-bg: #1c1107;

	--note-fg: #f0deb4;

	--topic-bg: #d5d5d5;
	--topic-fg: #e7e3d9;
	--topic-deco-fg: #fff;

	--a-fg: #ee5300;
	--a-hover-fg: #e8d2c3;
	--a-hover-bg: #ee5300;
	--a-visited-fg: #b18e00;
	--a-visited-gb: transparent;

	--assign-out-fg: #dfd8c9;
	--assign-out-bg: #6449b2;
	--assign-border: #cbcdc6;

	--assign-fg: #d1d5db;
	--assign-bg: #c8a46e;

	--assign-due-fg: #dfd8c9;
	--assign-due-bg: #812410;

	--assign-deco-fg: #34567f;
}

#calendar-sec {
	background:#d8cecb;
	margin: 24px 0 0 0;
	padding: 2px 0 0 0;
	border-radius: 0 0 2px 2px;
	width:fit-content;
}

#calendar-sec::before {
	position: relative;
	z-index: 2;
}

#calendar {
	margin:0;
	padding:0;
	max-width:calc( var(--char-width) * 70);
	display:grid;
	grid-template-columns: 4fr calc( 13 * var(--char-width) );
	grid-template-rows: [begin] auto [aug] auto [aug-25] auto [aug-27] auto [sep] auto [sep-1] auto [sep-3] auto [sep-8] auto [sep-10] auto [sep-15] auto [sep-17] auto [sep-22] auto [sep-24] auto [sep-29] auto [oct] auto [oct-1] auto [oct-6] auto [oct-8] auto [oct-13] auto [oct-15] auto [oct-20] auto [oct-22] auto [oct-27] auto [oct-29] auto [nov] auto [nov-3] auto [nov-5] auto [nov-10] auto [nov-12] auto [nov-17] auto [nov-19] auto [nov-24] auto [nov-26] auto [dec] auto [dec-1] auto [dec-3] auto [dec-4] ;
}


#calendar .card {
	box-sizing:border-box;
	font-size:14px;
	font-weight:800;
	line-height:1;
	width:60px;
	padding:6px 6px 7px 6px;

	border-radius:0;
	background: var(--card-bg);
	color: var(--card-fg);

	position:relative;
	text-align:center;

	float:left;

	margin:2px;
}

#calendar .card:before {
	content:'';
	display:block;
	position:absolute;
	top:2px;
	left:2px;
	bottom:2px;
	right:2px;
	border-radius:0;
	border: 1px solid rgba(90,58,26,0.35);
}


#calendar .card.Thur {
	margin-left: 10px;
}

#calendar .card.Fri {
	margin-left: calc(var(--char-width) * 2);
}
#calendar .card .day {
	display:block;
	position:relative;
	z-index:1;
}
#calendar .card .month {
	display:block;
	position:relative;
	z-index:1;
}
#calendar .card .date {
	display:block;
	position:relative;
	z-index:1;
	font-size:36px;
	white-space:nowrap;
	padding:0;
	margin:0;
	margin-right:-1px;
}

#calendar .header {
	color:var(--header-fg);
	background:var(--header-bg);
}
#calendar .header p {
	margin:0px 0 0 calc(2 * var(--char-width));
	padding: 0.5em 1em 0.25em 0;
}
#calendar .header p:before {
	content:'♦';
	color:var(--header-deco-fg);
	margin:0 0 0 calc(-1 * var(--char-width));
}


#calendar a {
	color:var(--a-fg);
	text-decoration:none;
}

#calendar a:visited {
	color:var(--a-visited-fg);
	background:var(--a-visited-bg);
}

#calendar a:hover {
	color:var(--a-hover-fg);
	background:var(--a-hover-bg);
}


#calendar > .class , #calendar > .note {
	margin:0;
	padding:3px 0;
	display:block;
	min-height:var(--card-height);
	box-sizing:border-box;

	z-index:1;
}

#calendar .class > .topics {
	display:block;
	margin:0;
	padding:0;
	font-size:16px;
	line-height:28px;
}
.topic {
	display:inline;
	margin:0;
	padding:3px;
	color:var(--topic-fg);
	/*background: linear-gradient(80deg,
		#1c1a1699 50%,
		#1c1a1633 90%,
		#81461400 100%);*/
	background: #1c1a1699;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.topic::before {
	content: '◎';
	color: var(--topic-deco-fg);
	display: inline-block;
	width: 14px;
	margin: 0 5px 0 5px;
	text-align: center;
}

.topic ~ .topic {
	margin-left:10px;
}

#calendar > .note > .contents {
	display:inline;
	color:var(--note-fg);
	margin-left:var(--char-width);
}

#calendar .class > .topics > .topic.activity {
}

#calendar .class > .topics > .topic.critique {
}

#calendar .class > .topics > .topic.discussion {
}

#calendar > .back-class,
#calendar > .back-note,
#calendar > .back-month {
	grid-column: 1 / 3;
	position:relative;
	background:var(--class-bg);
}
#calendar > .back-class {
	background: linear-gradient(-60deg, rgba(0,0,0,0), #322a1bcc 30%, #322a1bbb 80%, rgba(0,0,0,0));
}
#calendar > .back-note {
	background: linear-gradient(60deg, rgba(0,0,0,0), rgba(94, 62, 32, 0.85) 10%, rgba(28,17,7,0.6) 60%, rgba(0,0,0,0));
}
#calendar > .R {
	margin-left:var(--char-width);
}

#calendar > .F {
	margin-left:calc(2 * var(--char-width));
}

#calendar > .back-class:before,
#calendar > .back-note:before {
	content:'';
	display:block;
	background: #e1d1d1;
	position:absolute;
	left:-6px;
	right:-6px;
	top:0;
	height:2px;
}

#calendar > .back-class:after {
	top:unset;
	bottom:0;
}

#calendar > .back-month {
	background: #757770;
	position:relative;
}

#calendar > .back-month:before {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	content:'';
	background:
		repeating-linear-gradient(
			-18deg,
			transparent 0px,
			transparent 1px,
			rgba(255, 255, 255, 0.268) 2px,
			rgba(255,255,255,0.16) 3px,
			transparent 1px,
			transparent 3px
		),
		repeating-linear-gradient(
			-13deg,
			transparent 0px,
			transparent 23px,
			rgba(0, 0, 0, 0.375) 4px,
			rgba(0,0,0,0.14) 6px,
			transparent 2px,
			transparent 6px
		);

	opacity: 0.55;
	mix-blend-mode: screen;
	font-size:0;
	line-height:0;
}

#calendar > .narrow {
	grid-column: 1 / 2 ;
}
#calendar > .wide {
	grid-column: 1 / 3 ;
}

#calendar > .month {
	grid-column: 1 / 2;
	z-index:1;
	text-align:center;
}
#calendar > .month > .contents {
	display:inline;
	background: linear-gradient(80deg,
		#81461400 0%,
		#1c1a16cc 7%,
		#1c1a16ff 50%,
		#1c1a16cc 93%,
		#81461400 100%);
	color: #d1d5db;
	font-weight:1000;
	font-family: "Cal Sans", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	-webkit-text-stroke: 0.2px #d1d5db;
	padding: 0.05em var(--char-width) 0em var(--char-width);
	white-space:pre;
}
#calendar > .month > .contents.odd {
	margin-right:var(--char-width);
}


#calendar .assignment {
	color: var(--assign-fg);
	background: rgba(0, 0, 0, 0.8);
	z-index:2;
	margin:0;
	padding:0;
	margin-top:calc(2 * var(--char-height));
	margin-bottom:calc(-2 * var(--char-height));
	position:relative;
	width:calc(12 * var(--char-width));
	border-left: 5px solid var(--assign-border);
	border-right: 5px solid var(--assign-border);
}

#calendar .assignment.sharedOut {
	margin-top:calc(3 * var(--char-height));
}

#calendar .assignment > .out {
	background:var(--assign-out-bg);
	color:var(--assign-out-fg);
	margin-right: 16px;
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:0;

	white-space:pre;
}

#calendar .assignment > .due {
	background:var(--assign-due-bg);
	color:var(--assign-due-fg);
	margin-left: 16px;
	display:block;
	position:absolute;
	bottom:0;
	right:0;
	left:0;
	z-index:4;

	white-space:pre;
}

#calendar .assignment > .description {
	display:block;
	position:absolute;
	top:var(--char-height);
	bottom:var(--char-height);
	left:var(--char-width);
}