:root {
  --purple: #4B306A;
  --dark-purple: #322046;
  --light-purple: #e5dcef;
  --gold: #FFC845;
  --light-yellow: #ffffdd;
  --light-gold: #fff0cc;
  --light-gray: #e6e6e6;
  --med-gray: #bfbfbf;																
  --text-color1: #ffffff;
  --body-bg: #ffffff;
  --link: var(--purple);
  --visited: var(--dark-purple);
  --hover: #63408c;
  --today: #dfffdf;
  --quote-accent: #808080;
}
 
html {
	font-size: 13px;
  --font-size: calc(10px + (22 - 8) * ((100vw - 375px) / (1920 - 375)));
    font-size: var(--font-size);
}

body {
	background-color: var(--body-bg);
	font-family: arial, helvetica, sans-serif; 
	color: black;
}

table {font-size: inherit;}

button { font-size: inherit; }
input { font-size: inherit; }

header {
	background-color: var(--purple);
	color: var(--text-color1);
	padding: 0.75em;
}
	
main.syllabus, main.assignment  {
	width: min(1024px, 90vw);
display: block;
margin-left: auto;
margin-right: auto;
}

	
main.syllabus>p, main.syllabus>ul, main.syllabus>ol, main.syllabus>dl, main.syllabus>table  {
    margin-left: 1em;
}
main.syllabus>table>tbody>tr>td>ol {margin-top: 0px; margin-bottom: 0px;}

main.assignment>p, main.assignment>ul, main.assignment>ol, main.assignment>dl main.assignment>code {
    margin-left: 1em;
}

div.header {
	display: flex;
	justify-content: space-between;
}

div.albion {text-align: center; font-size: 1.7em; font-weight: bold; font-family:"Georgia", times, serif;}

h1, h2, h3, h4, h5, h6 {text-align: left; font-weight: bold;}

h1 {font-size: 1.7em; margin-top: 1em; margin-bottom: 0.125em;}
h2 {font-size: 1.4em; margin-top: 1em; margin-bottom: 0.125em;}
h3 {font-size: 1.2em; margin-top: 1em; margin-bottom: 0.125em;}
h4 {font-size: 1.0em; margin-top: 1em; margin-bottom: 0.125em;}
h5 {font-size: 1.0em; margin-top: 1em; margin-bottom: 0.125em;}
h6 {font-size: 1.0em; margin-top: 1em; margin-bottom: 0.125em;}

main.assignment h2 {border-bottom: solid black 0.125em;}
main.syllabus h3, main.assignment h3 {border-bottom: solid black 0.125em;}

div.calendar h3 {margin-top: 0px;}

h1.header, h2.header, h3.header {display: inline-block; font-size: 1.7em; font-weight: normal; margin-top: 0em; margin-bottom: 0px;}
h1.header {text-align: center; font-weight: bold;}
h2.header {text-align: left; width: 20vw;}
h3.header {text-align: right; width: 20vw;}

a {color: var(--link); text-decoration: solid underline;}
a:visited  {color: var(--visited); }
a:hover {color: var(--hover); text-decoration-color: var(--hover); text-decoration: solid underline;}

header hr {background: var(--gold); border: 0px; height: 0.25em;}

/* Calender specific things */

table.month {
	margin-bottom: 1em;
	border: 2px solid var(--body-bg);
	table-layout: fixed;
	width: 100%;
	}

h3.month {
	margin: 0px;}
}

td {vertical-align: top;}


td.day, td.blank, td.normal, td.mute, td.normal {height: 7em; vertical-align: top; }

td.month {column-span: all;}
td.day {background-color: var(--gold); height: 0; font-style: italic; font-weight: bold;text-align: center; } 
span.day {font-size: 0.5em;}
td.blank {background-color: var(--light-gold);} 
td.normal {background-color: var(--light-gray);} 
td.mute {background-color: var(--med-gray); } 
td.today {background-color: var(--today); vertical-align: top;} 

div.calday {font-size: 0.8em;font-style: italic; font-weight: bold;}
span.calgen {font-size: 0.64em; font-weight: normal; } 
span.caltopic {font-size: 0.8em; font-weight: bold;} 
span.calread {font-size: 0.8em; font-weight: normal; } 
span.caltest, span.caltest > a {font-size: 1.2em; color: #ff0000; font-weight: bold; } 
span.caldue {font-size: 0.8em; color: #ff0000; border-style: dotted; 
	border-width: 1px; background-color: #ffcfcf; display: inline-block; margin: 2px;} 
span.callab, span.callab > a {color: #cc0000; font-size: 0.8em; font-weight: bold;} 
span.callecture, span.callecture > a {color: #00cc00; font-size: 0.8em; font-weight: bold;} 

div.callegend {
  margin: 0;
  line-height: 1.1;
  text-align: center;
  position: fixed;
  top: 6em;
  left: auto;
  width: 8.5em;
  right: 2em;
  border-color: #3300cc;
  border-style: solid;
  border-width: 1px;
  padding: 10px;
  background: #ffffcc;
}

dl {
  display: grid;
  grid-template-columns: max-content auto;
	font-size: 1em;
}

dt {
	width: 7em;
	font-style: italic;
	font-weight: bold;
	grid-column-start: 1;
	margin-bottom: 0.5em;
	text-align: right;
	font-size: 1em;
}

dd {
	font-size: 1em;
	text-align: left;
  grid-column-start: 2;
	margin-bottom: 0.5em;
	margin-left: 1em;
}

dd br {margin-bottom: 0.5em;}


table.points {
  border-collapse: collapse;
}
table.points>thead>tr>th, table.points>tbody>tr>td {
  border: 1px solid black;
  padding: 0.25em;
}


dd>p {margin-top: 0px;margin-bottom: 0px;}
dd > p+ol, dd > p+ul, dd>p+table {margin-top: 0.25em;}
dd *+p {margin-top: 1em;}


footer {
	background: #c0c0c0;
	padding: 0.5em;
	font-size: 0.8em;
	}
	
kbd {
	font-family: Consolas, Monaco, monospace;
}

figure.quote {
width: 70vw;
display: block;
margin-left: auto;
margin-right: auto;
  padding: 1em;
  border-radius: 1em;
  background: var(--light-purple);
  max-width: 100%;
}

figure.quote>blockquote {
	margin: 0;
	margin-left: 0.5em;
	padding: 0;
	position: relative;
	line-height: 1.4;
  font-style: italic;
}

figure.quote>blockquote:before {
	content: '\201c';
	position: absolute;
	left: -.5em;
  color: var(--quote-accent);
}

figure.quote>blockquote:after {
	content: '\201d';
	position: absolute;
  color: var(--quote-accent);
}

figure.quote>figcaption {
  display: block;
  text-align: right;
  font-variant: small-caps;
  /* line-height: 0.8em;*/
}

div.quote {
	width: 50%;
	text-align: left;
	margin-left: auto;
}

a.quote {
	text-decoration: none;
}

/*
figure.quote>figcaption:before {
content: '\2014';
padding-right: 0.25em;
  color: var(--quote-accent);
}
*/

span.label {
font-variant: normal;
font-size:0.7em;
}

div.label {
font-variant: normal;
font-size:0.7em;
}

figure.quote>figcaption>a {
color: inherit;
text-decoration: inherit;
}

figure.pic {text-align: center;}
figure.pic>img {max-width: 100%;}

a.long { word-break: break-word;}

code {font-family: Consolas, Monaco, monospace;letter-spacing: -0.05em;}
code.scrollx {font-size: 0.8em; letter-spacing: 0px; white-space: pre;  overflow: auto;  scrollbar-width: thin;  width: calc(100% - 2em);  display: block;  background: var(--light-purple); padding: 0.5em;}

main.assignment>code.scrollx {margin-left: 1em;}

figure.alert {
	font-size: 1.1em;
	font-variant: all-small-caps;
	text-align: center;
	font-weight: bold;
	font-style: italic;
	width: calc(100% - 3.25em);
	border-radius: 3em;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25em;
	padding-right: 1.5em;
	border: solid red 0.25em;
	background: var(--light-yellow);
	max-width: 100%;
	display: block;
}

span.alert {
	font-weight: bold;
	font-style: italic;
	width: calc(100% - 3.25em);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25em;
	padding-right: 1.5em;
	border: solid red 0.25em;
	background: var(--light-yellow);
	max-width: 100%;
	display: block;
	margin-top: 1em;
}