* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-touch-callout: none; 
	-webkit-user-select: none; 
	-khtml-user-select: none; 
	-moz-user-select: none; 
	-ms-user-select: none; 
	user-select: none; 

	/*hide scollbar in Firefox*/
	scrollbar-width: none;
}

/*hide scollbar in Chrome/Safari*/
*::-webkit-scrollbar {
	width: 0;
	height: 0;
}

body {
	width: 100vw;
	margin: 0;
	font-family: Hoefler Text, Times New Roman, serif; 
}

#menu {
	position: fixed;
	width: 20vw;
	height: 100%;
	overflow-y: scroll;
}

.expo {
	position: relative;
	margin-bottom: 2vw;
	cursor: pointer;
}

.expo > :not(.title), 
#canvas > .title {
	display: none;
}

.expo:hover, 
.selected:not(:first-child) {	
	color: rgb(226,83,3); 
}

.title {
	width: 100%;
	display: block;
}

#canvas {
	position: absolute;
	top: 0;
	left: 20vw;
	width: 80vw;
	height: 100%;
	padding-bottom: 4vw;
	overflow-y: scroll;	
}

h1, h2, h3, h4, h5 {
	display: inline;
	position: relative;
	padding: 0;
	margin: 0;
	vertical-align: bottom;
}

h4:empty {display: none;}

#canvas img, video, audio {
	max-width: 78vw;
	max-height: calc(100vh - 4vw);
	margin-top: 2vw;
	margin-right: 2vw;
}

#canvas img {vertical-align: bottom;}

#canvas video, #canvas audio {
	background-color: black;
}

.text {
	width: 100%; 
	max-width: calc(100vh - 2vw);
	text-align: left;
	margin-top: 2vw;
	padding-right: 2vw;
}

.text * {
	margin: 0;
	padding: 0;
}

iframe {
	border: none;
	margin-top: 2vw;
	background-color: black;
}

iframe[src*='vimeo'] {
	width: 78vw !important;
	height: calc((9/16)*78vw);
}

iframe[src*='youtube'] {
	width: 78vw;
	height: calc((9/16)*78vw);
}

iframe[src*='bandcamp'] {
	width: 78vw !important;
	max-width: calc(100vh - 4vw) !important;
	/* min height for 9 songs before scrollbar*/
	height: 439px !important; 
}

@media (min-aspect-ratio: 3/2) {
  iframe[src*='bandcamp'] {
	max-width: calc(80vw - 100vh)!important;
	height: calc(100vh - 4vw) !important;
  }
}








iframe[src*='spotify'] {
	width: 78vw !important;
}

a {color: black;}

@media (orientation: landscape) {

	#menu {padding: 2vw 1vw 2vw 1.5vw;}

	h1 {font-size: calc(1.25 * 2vw);}

	h2 {font-size: calc(1.25 * 1.625vw);}

	h3 {font-size: calc(1.25 * 1.375vw);}

	h4 {font-size: calc(1.25 * 1.25vw);}

	h5 {font-size: calc(1.25 * 1vw);}
	
	.text, .text * {font-size: 18px;}
}

@media (orientation: portrait) {

	#menu {
		padding: 2vw 2vw 2vw 0;
		text-align: right;
	}

	.expo:last-of-type .title {
		/* 7 because "Contact" has seven letters */
		height: calc(4*3*1.625vw)!important;
	}

	#canvas {z-index: 1;}

	.title {
		max-height: auto;
		writing-mode: vertical-rl;
		white-space: nowrap;
		text-align: left;
	}

	.title br {display: none;}

	.title h1, 
	.title h2,
	.title h3 {display: block;}

	.title h2 {margin-top: 0;}

	h1 {font-size: calc(3 * 2vw);}

	h2 {font-size: calc(3 * 1.625vw);}

	h3 {font-size: calc(3 * 1.375vw);}

	h4 {font-size: calc(3 * 1.25vw);}

	h5 {font-size: calc(3 * 1vw);}

	.text, .text * {font-size: calc(3 * 1vw);}

	.title h5::before,
	.title h5::after {
		content: ' ';
	}
}