:root {

	/* asymptotes palette */
	--ivory: #fff5e2;
	--green: #73ae56;
	--amber: #ff9f0c;
	--lavender: #b277cf;

	/* website colours */
	--background: var(--ivory);
	--foreground: black;

}

@font-face {
    font-family: 'CMU Typewriter';
    src: url('fonts/CMUTypewriterVariable-Italic.woff2') format('woff2'),
        url('fonts/CMUTypewriterVariable-Italic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'CMU Typewriter';
    src: url('fonts/CMUTypewriterVariable.woff2') format('woff2'),
        url('fonts/CMUTypewriterVariable.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saniretro';
    src: url('fonts/SaniretroRegular.woff2') format('woff2'),
        url('fonts/SaniretroRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; }

::selection { background-color: #ff9f0c20; }

html { font-size: 16px; }

body {
	margin: 0;
	background-color: var(--background);
	font-family: 'CMU Typewriter';
	font-size: clamp(1em, 1vw, 1.2em);
	min-height: 100vh;

	display: grid;
	grid-template-rows: 1fr 3em;
	grid-template-columns: 20% 80%;
	grid-template-areas: 
		"header content" 
		"footer footer";
}

.mobile { display: none; }
a:hover { opacity: 0.8; }

#sidebar { 
	display: flex;
	flex-flow: column;
	padding: 1em;

	grid-area: header;
	position: relative;
}
#title { line-height: 1; font-size: clamp(1.2em, 2vw, 2em) }

#logo { cursor: pointer; }

#navigation {
	position: sticky;
  	top: 0;

	ul { 
	list-style-type: '⇢ ';
	text-transform: uppercase;
	padding-left: 1em;
	font-size: clamp(1.4em, 2vw, 1.8em); 
	font-family: 'Saniretro';
	color: var(--amber);
		a { 
			color: var(--lavender); 
			&:hover { font-style: italic; }
		}
		a[href^="https://events.humanitix.com/"] { color: var(--green) }
	}
}

#acknowledgement {
	padding-right: 1em;
	bottom: 0;
	font-size: 0.8em; color: var(--green); font-style: italic; 
	max-width: 95ch;
}

footer { 
	grid-area: footer; 

	display: flex; gap: 1em; justify-content:space-between; padding: 1em; align-items: center;

	a { color: var(--amber); }

}

#content { 
	grid-area: content;

	background-color: var(--background);
	padding: 2em;

	border-style: solid;
	border-width: 0 0 4px 4px;
	border-left-color: var(--amber);
	border-bottom-color: var(--amber);
	border-bottom-left-radius: 64px;

	section { 
		max-width: 65ch; 
		border-bottom: 4px dotted var(--green); 
	}

	a { color: var(--green); }

	blockquote { 
		border-left: 1px solid var(--lavender); 
		margin-left: 1em; padding-left: 1em; 
		font-style: italic;
	}

	strong { color: var(--lavender) }

	#get-tickets { font-size: 1.3em; a { font-weight: bold; font-style: italic; } }

	.blurb { font-size: clamp(1.1em, 2vw, 1.3em); }
}

#event-info h2 { margin: 0; }

#schedule {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1em;

	th, td { padding: 4px; border: 1px dotted var(--lavender); }

	th { text-align: left; font-style: italic; }

	.schedule_break { font-style: italic; text-align: center; }
}

@media screen and (max-width: 800px) {
	#sidebar {display: none;}
	.mobile { display: block; }

	body { display: flex; flex-flow: column; }
	#title { font-size: 1.5em; }
	#content { margin-left: 2em; }
	#banner { 
		padding-block: 1em;
		margin-left: 2em;
		border-left: 4px solid var(--amber);

		text-align: center;

		#logo { width: 50%; margin-inline: auto; }

	}

	#navigation.mobile {
		margin-left: 2em;
		border-left: 4px solid var(--amber);
		border-bottom: 1px dashed var(--amber);
		position: sticky;
		top: 0;
		background-color: var(--background);

		ul {
			display: flex;
			flex-flow: row wrap;
			list-style-type: none;
			justify-content: space-between;
			padding-inline: 0.5em;
			margin-block: 0.5em;

		}
	}

	#content { padding-top: 0; }

	#event-info { border-top: 4px dotted var(--lavender); padding-top: 4em; }

	footer { flex-flow: column; gap: 0em; p { margin-block: 0.2em; } align-items: unset; }

}