body { 
	width:100svw;
	overflow-x:hidden;
}

.pageHolder {
	position:fixed;
	top:0;
	left:0;
	width:100svw;
	height:100svh;
	overflow-y: hidden;
	overflow-x: scroll;
}
.covers {
	position:relative;
	top:0;
	left:0;
	width:200svw;
	height:100svh;
	overflow-y: hidden;
	overflow-x: scroll;
}
.frontPage {
	width:100svw;
	height:100svh;
	overflow-y: hidden;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-bottom:10px;
}
.titleSection {
	margin:0;
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--storm); 
    color: var(--electric);
	clear: both;
	height: 91svh;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	text-align:center;
	justify-content: space-around;
	align-items: stretch;
	font-size: clamp( 2em, 4.5vw, 4em );
}
.titleSection > div {
	text-align:center;
	font-weight:700;
	display: flex;
	flex-direction:column;
	justify-content: center; 
	height: 100px;
}
.titleSection .title { font-size: 1.3em; flex:2;	}
.titleSection .subTitle { font-size: 1em; flex:1; }
.titleSection .base { font-size: 0.8em; flex:1; }
.titleSection .pic {
	background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
	background-color: transparent;
	flex: 7;
	position:relative;
	top:0;
	left:0;
}
.titleSection div.bottom {
	font-size:0.7em;
	flex: 1;
	flex-direction:row;
	justify-content: space-around;
	gap: 5vw;
}
.titleSection .bottom .typeImage img {
	width:100%;
	height:100%;
	object-fit: contain;
}
.titleSection .bottom .scroll, .titleSection .bottom .swipe, .titleSection .bottom .typeImage {
	background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
	background-color: transparent;
}
.titleSection .bottom .swipe {
	background-image: url('https://static.bandfinder.uk/images/siteIcon/swipe.png');
	flex:2;
}
.titleSection .bottom .scroll {
	background-image: none;
	flex:1;
}
.titleSection .bottom .typeImage {
	flex:2;
}
.pic .imageSource {
	display:inline-block;
	height:1.3em;
	border-radius:0.6em;
	position:absolute;
	bottom:1px;
	right:2em;
	font-size:0.3em;
	padding:0.2em 0.6em;
	background-color:rgba(255,102,0,0.7);
	color: var(--storm);
}

.mainBookFrame {
	width:95svw;
	position:absolute;
	top:0;
	left:100svw;
	overflow-x:scroll;
	overflow-y:hidden;
}
.mainBookSlider {
	height:100svh;
	padding-right:10svw;
	position:relative;
	top:0;
	left:0;
}

.tabs {
	font-size:1.4svh;
	position:absolute;
	top:0;
	left:200svw;
	background-color: var(--storm);
	height:5svw;
	width:100svh;
	transform: rotate(90deg);
	transform-origin:top left;
	z-index: 10;
	display: flex;
	flex-direction: row;
	gap:0;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-content: stretch;
	align-items:flex-end;
	padding-left:1.1em;	
}

.tab {
	display:inline-block;
	padding:0.1em 1.5em 0.2em;
	clip-path: polygon(
		0% 30%,      /* 1. Start of top-left diagonal */
		20% 0%,      /* 2. End of top-left diagonal */
		80% 0%,      /* 3. Start of top-right diagonal */
		100% 30%,    /* 4. End of top-right diagonal */
		100% 100%,   /* 5. Bottom-right square corner */
		0% 100%      /* 6. Bottom-left square corner */
	  );
	  border-bottom: 2px solid #404040;
	  margin-left:-1em;
	  margin-top:0.2em;
	  z-index:10;
	  height:4.2svw;
	  display:flex;
	  flex-direction:column;
	  justify-content:center;
}

.selectedTab {
	z-index: 12;
	margin-top:0;
	font-weight:700;
	padding-top:0.4em;
	border-bottom-color: transparent;
	height:4.5svw;
}

.page {
	width:95svw;
	height:100svh;
	text-align:center;
	position:absolute;
	top:0;
	overflow-x:hidden;
	overflow-y:auto;
	display:block;
	padding:1em 0.5em 0;
}

/*
.page:has(.baseAd) {
	padding-bottom: max(60px, 11svh);
}*/

.pageTitle {
	display:none;
}

.page:nth-of-type(1), .tab:nth-child(1) { background-color: #FFF8D5; }
.page:nth-of-type(2), .tab:nth-child(2) { background-color: #D5F6FB; }
.page:nth-of-type(3), .tab:nth-child(3) { background-color: #D1FEB8; }
.page:nth-of-type(4), .tab:nth-child(4) { background-color: #EFDFD8; }
.page:nth-of-type(5), .tab:nth-child(5) { background-color: #EBCCFF; }
.page:nth-of-type(6), .tab:nth-child(6) { background-color: #FAF8F6; }
.page:nth-of-type(7), .tab:nth-child(7) { background-color: #FFFEE0; }
.page:nth-of-type(8), .tab:nth-child(8) { background-color: #DAD4B6; }
.page:nth-of-type(9), .tab:nth-child(9) { background-color: #E9C9AA; }
.page:nth-of-type(10), .tab:nth-child(10) { background-color: #F6F3A9; }


divider {
	position:relative;
	top:0;
	left:0;
	display: none;
	background-color: var(--storm);
	border: 1px solid var(--electric);
	height:3svw;
	width:110vw;
	background-repeat: repeat-x;
	background-size: auto 95%;
	background-position: center;
	background-image: url(https://static.bandfinder.uk/images/title/funuity.png);
	z-index:10;
}

divider:nth-of-type(odd) {
    transform: rotate(2deg);
}

divider:nth-of-type(even) {
    transform: rotate(-2deg);
}

divider:nth-of-type(1) {
    transform: rotate(0deg);
	margin:0 0 1em;
}

.baseAd {
	text-align:left;
	height:10svh;
	min-height:50px;
	width:100%;
	position:sticky;
	bottom:0;
	align-self: flex-end;
	border-top: 1px solid var(--storm);
	background-color:white;
	z-index:20;
}

.baseAd .tag {
	font-size:0.5em;
	display:inline-block;
	background-color:var(--storm);
	color:var(--cloud);
	padding:0.4em;
	height:1.8em;
	position:relative;
	top:0;
	left:0;
	transform: translateY(-130%);
	border-radius:0.2em;
}


@media (orientation: landscape) and (min-width: 800px) {
	  /* CSS rules to apply when the screen is in landscape mode */
	  
	.pageHolder, .covers, .frontPage, .mainBookFrame, .mainBookSlider, .page {
	  height:auto;
	  min-height:0;
	  width:100svw;
	  overflow:hidden;
	  position:relative;
	  top:0;
	  left:0 !important;
	}
		
	.tabs { display:none; }
	divider { display: block; }
	
	.page {
		margin: -1.5svw 0;
		padding: 5svh 1em;
	}
	
	.pageTitle {
		font-size:1.3em;
		padding: 0.5em;
		border-radius:5px;
		background-color:var(--storm);
		color: var(--electric);
		border: 1px solid var(--electric);
		margin: 5px auto 1em;
		display:block;
		width: fit-content;
	}
	
	.titleSection .bottom .scroll {
		background-image: url('https://static.bandfinder.uk/images/siteIcon/scroll.png');
	}

	.titleSection .bottom .swipe {
		background-image: none;
	}
	
	.baseAd {
		margin: 1.5em auto;
		display:block;
		width:80%;
		height:auto;
		position:relative;
		top:0;
		left:0;
	}
}