/* all screens - common and defaults */
:root{
	--Color1-full: #660000ff;
	--Color2-full: #0000aaff;
	--Color1-high: #660000aa;
	--Color2-high: #0000aaaa;
	--Color1-med: #66000055;
	--Color2-med: #0000bb55;
	--Color1-low: #66000011;
	--Color2-low: #0000cc11;
}

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border-width: 0;
	overflow: hidden;
	scrollbar-width: none;
	color:#ffffff;
}

body{
	background-color: #000000;
	background-image: "/images/cassette-tape.png";
	height: 100vh;
	width: 100vw;
	font-family: 'emotion_engineregular', Verdana, Geneva, Tahoma, sans-serif;
	font-size: 5vmin;
	display: grid;
}

::-webkit-scrollbar{
	display: none;
}

.grid-topleft{
	grid-row: 1;
	grid-column: 1;
}

.flex-center{
	display: flex;
	text-align: center;
	align-items: center;
	align-content: center;
	justify-content: center;
}
/* Video background */
.background{
	min-width: 100vw;
	min-height: 100vh;
	width: auto;
	height: auto;
	position: absolute;
	align-items: center;
	justify-content: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.background video{
	position: relative;
	min-width: 100vw;
	min-height: 100vh;
	align-items: center;
	justify-content: center;
}

/* rotating full page container */
.full-page-container {
	background-image: none;
	background-color: none;
	width: 100vmin;
	height: 100vmax;
	transform-origin: 50vmin 50vmin;
	border-radius: 0;
	overflow-y: scroll;
	z-index: 1;
}

/* rotating full page container */
.full-page-container-item {
	background-image: linear-gradient(60deg,  var(--Color1-low), var(--Color2-low));
	width: 96vmin;
	height: 67vmin;
	margin: 2vmin;
	border-radius: 9vmin;
	transform-origin: center;
}
/* rotating content container */
.item-name{
	background-image: linear-gradient(135deg, var(--Color1-high), var(--Color2-med));
	width: 84vmin;
	height: 10vmin;
	margin: 0vmin;
	padding: 2.5vmin;
	border-radius: 5vmin;
	transform: translate(6vmin, 3.5vmin);
}

/* non-rotating content containers */
.item-content{
	background-image: linear-gradient(135deg, var(--Color1-low), var(--Color2-low));
	width: 82vmin;
	height: 43vmin;
	margin: 7vmin;
	padding: 2vmin;
	border-radius: 2vmin;
	color: #ffffffff;
	display: grid;
	transition-property: width, height, margin, padding, border-radius;
	transition-duration: 50ms;
	transition-timing-function: cubic-bezier(0.69, 0.9, 0.88, 1.21);

}
.item-content:hover{
	background-image: linear-gradient(135deg, var(--Color1-med), var(--Color2-med));
	width: 84vmin;
	height: 45vmin;
	margin: 6vmin;
	padding: 3vmin;
	border-radius: 3vmin;
}

.item-404{
	background-image: linear-gradient(135deg, var(--Color1-low), var(--Color2-low));
	width: 82vmin;
	height: 43vmin;
	margin: 7vmin;
	padding: 2vmin;
	border-radius: 2vmin;
	color: #ffffffff;
	transition-property: width, height, margin, padding, border-radius;
	transition-duration: 50ms;
	transition-timing-function: cubic-bezier(0.69, 0.9, 0.88, 1.21);
}
.item-404:hover{
	background-image: linear-gradient(135deg, var(--Color1-high), var(--Color2-high));
	width: 84vmin;
	height: 45vmin;
	margin: 6vmin;
	padding: 3vmin;
	border-radius: 3vmin;
}

.content{
	background-image: linear-gradient(135deg, var(--Color1-low), var(--Color2-low));
	width: 35vmin;
	height: 35vmin;
	margin: 2vmin;
	padding: 2vmin;
	border-radius: 0vmin;
	transition-property: width, height, margin, padding, border-radius;
	transition-duration: 50ms;
	transition-timing-function: cubic-bezier(0.69, 0.9, 0.88, 1.21);
}
.content:hover{
	background-image: linear-gradient(135deg, var(--Color1-high), var(--Color2-high));
	width: 37vmin;
	height: 37vmin;
	margin: 1vmin;
	padding: 3vmin;
	border-radius: 1vmin;
}

.content-404{
	width: 35vmin;
	height: 35vmin;
	margin: 2vmin;
	padding: 2vmin;
}

/* actual content */
.youtube-container{
	grid-row: 1;
	grid-column: 2;
}

.youtube-square{
	min-width: 33vmin;
	min-height: 33vmin;
}

.bandcamp-container{
	grid-row: 1;
	grid-column: 1;
}

#filler-404{
	background-image: none;
	background-color: none;
}

/* Header - menu and home logo */
#header-pad{
	background-color: #00000088;
	width: 100%;
	height: 5vmin;
}

#hover-header{
	background-image: linear-gradient(45deg, var(--Color1-med), var(--Color2-med));
	width: 100vmin;
	height: 5vmin;
	z-index: 1;
	color:#ffffff;
	text-align: right;
	transition-property: height, font-size, background-image, transform;
	transition-duration: 100ms;
	transition-timing-function: cubic-bezier(0.69, 0.9, 0.88, 1.21);

}
#hover-header:hover{
	background-image: linear-gradient(45deg, var(--Color1-full), var(--Color2-high));
	height: 10vmin;
	font-size: 10vmin;
}

#header{
	height: 100%;
	width: 100%;
}

#menu-title{
	align-items: center;
	align-content: center;
	padding-left: 2vmin;
	padding-right: 2vmin;
}

#avatar-container{
	height: 10vmin;
	width: 10vmin;
	position: fixed;
	z-index: 5;
	top: 2;
	left: 2;
}
#avatar{
	z-index: 9;
}
	
/* wide screen - uses screen height for sizing */
@media (min-aspect-ratio: 1/1) { /* rotate the container */
	.full-page-container{
		transform: rotate(-90deg);
	}
	
	.content{ /* rotate the content back to level */
		transform: rotate(90deg);
		background-image: linear-gradient(45deg, var(--Color1-low), var(--Color2-low));
	}
	.content:hover{
		background-image: linear-gradient(45deg, var(--Color1-high), var(--Color2-high));
	}
	
	#filler-404{ /* rotate the content back to level */
		transform: rotate(90deg);
	}
	
	#hover-header{ /* rotate the header, but find the rotation point first */
		transform-origin: 50vh 50vh; 
		transform: rotate(-90deg);
		text-align: left;
	}

	#hover-header:hover{
		background-image: linear-gradient(45deg, var(--Color1-high), var(--Color2-full));
	}

	#avatar{
		top: 2;
		right: 2;
	}
}

/* tall screen - uses screeen width for sizing 
@media (max-aspect-ratio: 1/1) {
}
*/