@font-face{
	font-family:'Caveat';
	src: url('Caveat-Regular.ttf') format('truetype');
}
html {
  overscroll-behavior-y: none;
}
html, body{
	height:100%;
	width:100%;
	margin:0;
	padding:0;
	font-family: 'Caveat';
}
body{
	background-image:url('Wood2.png');
}
a{
	color:inherit;
	font-weight:bold;
}
a[href*="jamendo.com"]::after{
	margin-left:0.2em;
	content:url('jamendo.png');
}
.navigation{
	position:absolute;
	top:0;
	left:0;
}
.navigation .pencil{
	position:absolute;
	display:block;
	background-image:url('Pencil_Orange.png');
	background-repeat: no-repeat;
	height:38px;
	width:135px;
	left:-120px;
	text-align:center;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-top:2px;
	padding-right:100px;
	transition: 1s;
	z-index:2000;
}
/*top:calc:(calc(height / (NumberOfAlbums + 2)) * albumNumber)*/
.navigation .pencil:nth-child(1){ top:-15 * 0 ;left:-120px;text-shadow:-1px 1px 1px black;background-image:url('Pencil_Black.png'); color:white;}
.navigation .pencil:nth-child(2){ top:-15 * 1 ;left:-125px;text-shadow:-1px 1px 1px black;background-image:url('Pencil_Gray.png'); color:white;}
.navigation .pencil:nth-child(3){ top:-15 * 2 ;left:-130px;text-shadow:-1px 1px 1px white;background-image:url('Pencil_White.png')}
.navigation .pencil:nth-child(4){ top:-15 * 3 ;left:-128px;text-shadow:-1px 1px 1px white;background-image:url('Pencil_Yellow.png');}
.navigation .pencil:nth-child(5){ top:-15 * 4 ;left:-115px;text-shadow:-1px 1px 1px white;background-image:url('Pencil_Orange.png');}
.navigation .pencil:nth-child(6){ top:-15 * 5 ;left:-123px;text-shadow:-1px 1px 1px black;background-image:url('Pencil_Brown.png'); color:white;}
.navigation .pencil:nth-child(7){ top:-15 * 6 ;left:-129px;text-shadow:-1px 1px 1px black;background-image:url('Pencil_Red.png'); color:white;}
.navigation .pencil:nth-child(8){ top:-15 * 7 ;left:-122px;text-shadow:-1px 1px 1px white;background-image:url('Pencil_Pink.png');}
.navigation .pencil:nth-child(9){ top:-15 * 8 ;left:-132px;text-shadow:-1px 1px 1px black;background-image:url('Pencil_Purple.png'); color:white;}
.navigation .pencil:nth-child(10){top:-15 * 9 ;left:-120px;text-shadow:-1px 1px 1px black;background-image:url('Pencil_Blue.png'); color:white;}
.navigation .pencil:nth-child(11){top:-15 * 10;left:-118px;text-shadow:-1px 1px 1px white;background-image:url('Pencil_Cyan.png');}
.navigation .pencil:nth-child(12){top:-15 * 11;left:-124px;text-shadow:-1px 1px 1px white;background-image:url('Pencil_Green.png');}
.navigation .pencil:nth-child(13){top:-15 * 12;left:-130px;text-shadow:-1px 1px 1px white;background-image:url('Pencil_Yellow.png');}
.navigation .pencil:nth-child(14){top:-15 * 13;left:-128px;text-shadow:-1px 1px 1px black;background-image:url('Pencil_Blue.png'); color:white;}
.navigation .pencil:nth-child(15){top:-15 * 14;left:-115px;text-shadow:-1px 1px 1px black;background-image:url('Pencil_Red.png'); color:white;}
.navigation .pencil:nth-child(16){top:-15 * 15;left:-123px;text-shadow:-1px 1px 1px black;background-image:url('Pencil_Purple.png'); color:white;}
.navigation .pencil:nth-child(17){top:-15 * 16;left:-129px;text-shadow:-1px 1px 1px white;background-image:url('Pencil_Orange.png');}
.navigation .pencil:nth-child(18){top:-15 * 17;left:-124px;text-shadow:-1px 1px 1px white;background-image:url('Pencil_Green.png');}
.navigation .pencil:nth-child(19){top:-15 * 18;left:-134px;text-shadow:-1px 1px 1px black;background-image:url('Pencil_Brown.png'); color:white;}
.navigation .pencil:hover{
	left:0px;
	z-index:2001;
}
.navigation .pencil a{
	display:inline-block;
	width:100%;
	font-size:1.2em;
	font-weight:normal;
	text-decoration:none;
}
.page{
	position:absolute;
	top:0;
	left:235px;
	left:100px;
	perspective: 270px;
	perspective-origin:bottom;
}
.page > div{
	position:absolute;
	top:0;
	border:0.2em solid rgb(170,170,170);
	background-image:url('Paper.png');
	transform-style: preserve-3d;
	transform: translate(0px, -30px) rotateZ(-5deg);
	min-height:80vh;
	min-width:80vw;
	box-shadow:0.2em 0.2em 0.5em black;
	font-size:1.5em;
}
.page .page1{
	padding:2em 2em;
	transform-origin:left top;
	transform: translate(0px, -30px) rotateZ(-90deg);
}
.page .page2{
	padding:2em 2em;
	transform-origin:left top;
	transform: translate(0px, -30px) rotateZ(-90deg);
}
.page .page3{
	min-height:80vh;
	width:80vw;
	transform-origin:left top;
	transform: translate(0px, -30px) rotateZ(-90deg);
}
.page .page3 .lyrics{
	background:none;
	box-shadow:none;
	padding:1em 2em;
	z-index:1000;
}
.page .page3 .lyrics .AlbumImg{
	margin:0.2em 0.5em;
	margin-left:0;
	border:0.2em inset black;
}
.page .page3 .lyrics li{
	margin-bottom:0.5em;
}
.page .page3 .lyrics .song{
	text-decoration:underline;
	cursor:pointer;
}
.page .page3 .lyrics .song::after{
	margin-left:0.2em;
	content:'\1f3a7';
	text-decoration:none;
}
.page .page3 .lyrics .song[href]::after{
	margin-left:0.2em;
	content:url('jamendo.png');
}
.page .lyrics .toAlbumListing:hover{
	text-decoration:underline;
}
.page .page4{
	padding-left:2em;
	transform: translate(-10px, -10px) rotateZ(-90deg);
}
/*.page .page4 .intro{
	display:block;
	background-image:url('Intro.png');
	background-repeat:no-repeat;
	height:291px;
	width:191px;
	margin-top:40px;
}
.page .page4 .showHelp{
	display:block;
	cursor:pointer;
	text-decoration:underline;
	margin-top:1em;
}*/
.page .page5{
	padding:2em 2em;
	transform-origin:left top;
	transform: translate(-10px, -10px) rotateZ(-90deg);
	white-space: pre;
}
.page .page5 .backToAlbum{
	font-weight:bold;
	text-decoration:underline;
	cursor:pointer;
}
.page .page6{
	width:100%;
	height:100%;
	overflow:hidden;
}
.page .page6 > span{
	position:relative;
	display:block;
	width:100%;
	top:10%;
	cursor:pointer;
	font-size:14vw;
	text-align:center;
}
.twistOutOfView{
	transition:1s;
	transform-origin:left top;
	transform:rotate(-90deg);
}
.contact{
	position:absolute;
	top:-8vmin;
	left:230px;
	border-right:1em solid rgb(255,150,150);
	border-radius:0.5em;
	box-shadow:0.2em -0.1em 0.2em black;
	background-color:rgb(255,80,80);
	padding:1em;
	transform:rotate(80deg);
	font-size:1.5em;
	font-weight:bold;
	text-shadow:-1px 1px 1px white;
	transition: 1s;
}
.contact:hover{
	top:0.8em;
}
.about{
	position:absolute;
	top:-10vmin;
	left:100px;
	height:71px;
	width:101px;
	background-image:url('LeftOvers.png');
	padding-top:30px;
	padding-left:30px;
	font-size:1.5em;
	font-weight:bold;
	color:white;
	text-shadow:-1px 1px 1px black;
	transform:rotate(20deg);
	transition: 1s;
}
.about:hover{
	top:-1em;
}
.helpMessage{
	/*display:none;*/
	position:absolute;
	top:60px;
	left:110px;
	min-width:20em;
	font-size:2em;
	font-weight:bold;
	color:white;
	text-shadow:1px 1px 1px black;
	z-index:0;
}
.helpMessage ul{
	list-style-type:none;
}
.helpMessage li{
	margin:0.2em 0;
}
.portrait{
	width:6em;
	margin-right:0.5em;
	margin-bottom:0.2em;
	float:left;
	border:0.2em inset black;
}
.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

@media screen and (max-width: 570px) {
	.page{
		left:5em;
		perspective:none;
	}
	.page .page2 .portrait{
		float: none;
	}
}
@media screen and (max-width: 400px) {
	body{
		background-image:url('Wood.png');
	}
	.page{
		perspective:none;
	}
	.page .page3{
		padding-top:0.5em;
	}
	.page .page3 .lyrics{
		background:none;
		border:none;
		font-size:1em;
		transform: none;
	}
	.contact{
		left:180px;
	}
	.about{
		left:75px;
	}
}