/*****************************************************************************************/
/* 											CSS REMEDY 							   	 */
/*****************************************************************************************/
*, *::after, *::before {
  box-sizing:border-box;  
}

/*****************************************************************************************/
/* 											CUSTOM PROPERTIES 						   	 */
/*****************************************************************************************/
:root {
	/* tekst */
	--text-ProximaRegular: "ProximaNovaRegular";
	--text-ProximaItalic: "ProximaNovaItalic";
	--text-ProximaBold:"ProximaNovaSemiBold";
}
/*****************************************************************************************/
/* 											Fonts		 							   	 */
/*****************************************************************************************/
@font-face {
	font-family:"ProximaNovaRegular" ;
	src: url(../fonts/ProximaNova-Regular.woff);
}

@font-face {
	font-family:"ProximaNovaItalic" ;
	src: url(../fonts/ProximaNova-RegularIt.woff);
}

@font-face {
	font-family:"ProximaNovaSemiBold" ;
	src: url(../fonts/ProximaNova-Semibold.woff);
}



/*****************************************************************************************/
/* 											Jouw Styling 							   	 */
/*****************************************************************************************/
body {
	margin:0;

	font-family: var(--text-ProximaRegular), "Montserrat", Arial, sans-serif;

	overflow-x:hidden
}

h1{
	font-family: var(--text-MerriweatherBold), Georgia, 'Times New Roman', Times, serif;
}

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

p{
	color: var(--color-text-heading);
}

main ul{
	list-style-type: "";
}

main   details summary::marker{
	content: ' ';
}


/*****************************************************************************************/
/* 											Main elementen 							   	 */
/*****************************************************************************************/

/* ***************************************************************** */
/* Info boek */
main > section{
	display: grid;
	grid-template-columns: repeat(2, 50%);
	grid-template-rows: 1fr 3em 1.5em 1.5em 2em 1em;
	column-gap: .5em;
	
	margin-bottom: 1em;
}

main > section > h1{
	grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: 2;
	grid-row-end: 3;

	font-size: 1.5em;
	text-align: center;
}

main > section > img{
	height: 60vw;
	border-top-right-radius:1em;
	border-bottom-right-radius:1em;
	box-shadow: .1em .3em .3em rgba(0, 0, 0, 0.25);

	grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: 1;
	grid-row-end: 2;
	
	margin-left: auto;
	margin-right: auto;
}

main > section > button:nth-of-type(1){
	grid-column-start: 2;
	grid-column-end: -1;
	grid-row-start: 1;
	grid-row-end: 2;
	
	z-index: 0;
    appearance: none;
    border-color: transparent;
    background: none;

	display: flex;
	justify-content: flex-end;
	align-items:flex-start;
}
main > section > button:nth-of-type(1) img{
	width: 1.5em;
	height: auto;
}
main > section > a{
	font-size: 1em;
	font-family: var(--text-MerriweatherRegular), Georgia, 'Times New Roman', Times, serif;
	color: var(--color-text);
	text-decoration: none;
}
main > section > a:nth-of-type(1){
	grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: 3;
	grid-row-end: 4;

	text-align: center;
}
main > section > a:nth-of-type(2){
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 4;
	grid-row-end: 5;

	display: flex;
	justify-content: flex-end;
	align-items: center;
}
main > section > p{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 4;
	grid-row-end: 5;

	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: 0;
	padding: 0;

	font-family: var(--text-MerriweatherRegular), Georgia, 'Times New Roman', Times, serif;
	color: var(--color-greytext);
}
/* sterren rating */
main > section > ul{
	grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: 5;
	grid-row-end: 6;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	padding: 0;
	margin: 0;
}
main > section > ul img {
	width: 2em;
}
main > section > ul li:nth-of-type(6) {
	font-size: 1.5em;
	font-family: var(--text-MerriweatherBold), Georgia, 'Times New Roman', Times, serif;
}
main > section > a:nth-of-type(3){
	grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: 6;
	grid-row-end: 7;

	display: flex;
	justify-content: center;
	align-items: center;

	font-size: .9em;
	font-family: var(--text-ProximaRegular), "Montserrat", Arial, sans-serif;
	color: var(--color-carousel-grey-text-light);
}



main > button:nth-of-type(1){
	background-color: var(--color-wit);
	border: .15em solid var(--color-button-border-detail);
	border-radius: 3rem;

	font-size: 1em;
	font-family: var(--text-ProximaBold), "Montserrat", Arial, sans-serif;

	display: inline-flex;
    align-items: center;
    justify-content: center;
	gap: .4em;

	height: 2.75em;
	width: 16rem;
	padding: 0 1em;
	margin: 0 2em 1em 2em;
}
main > button:nth-of-type(1) img{
	width: 1.3em;
	height: auto;
} 

main > button:nth-of-type(2){
	background-color: var(--color-wit);
	border: .15em solid var(--color-button-border-buy);
	border-radius: 3rem;

	font-size: 1em;
	font-family: var(--text-ProximaBold), "Montserrat", Arial, sans-serif;

	display: inline-flex;
    align-items: center;
    justify-content: flex-end;
	gap: .4em;

	height: 2.75em;
	width: 16rem;
	padding: 0 1em;
	margin: 0 2em 1em 2em;
}
main > button:nth-of-type(2) img{
	width: 2.75em;
	height: auto;
	margin-left: 2em;
	padding: .75em;
	border-left: .1em solid var(--color-button-border-buy);
} 




/*****************************************************************************************/
/* 											Sterren input			 					 */
/* 			bron:https://codepen.io/AnneStaal/pen/YPqdxBy?editors=1100 van Sanne		 */
main label {
  display:inline-grid;

  display: flex;
  justify-content: center;
  align-items: center;
}

main input[type="range"] {
  --max: attr(max type(<integer>));
  /* de maat van een ster */
  /* wat robuustheid voor als max hoog is en/of het scherm smal */
  --s: min(4em, 40vw / var(--max));

  /* in de eerste gridcel - samen met de after for focus */
  grid-area:1/1;
  
  /* anders moet je raar max - 1 doen */
  box-sizing: border-box;
  height: var(--s);
  /* geen aspect-ratio, maar width - anders rare overflow op kleine schermen */
  width: calc(var(--s) * var(--max));
  padding-inline:
    calc(var(--s) * .75)
    calc(var(--s) * .25);

  /* Surprise! I am using an SVG but you can get the same visual using the gradients below */
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 5 L79 95 L2 40 L98 40 L21 95 Z'/></svg>")
    0 / var(--s) 100%;

  /*   mask: 0 calc(.4*var(--s))/var(--s);  */
  /*   mask-image: conic-gradient(from 162deg at 50% 65%,#000 .1turn,#0000 0), conic-gradient(from 18deg at 21% 55%,#000 .1turn,#0000 0), conic-gradient(from 306deg at 79% 55%,#000 .1turn,#0000 0);  */

  appearance: none;
  cursor: pointer;
  
  background-color:var(--color-star-empty);
}

main input[value="x"] {
    scale:2;
}

/* de thumb wordt vergroot door aan weerzijde een border-image uit te breiden */
main input[type="range"]::-webkit-slider-thumb {
  width: 1px;
  
  /* vind een linear-gradient meer gepast dan een conic-gradient */
  border-image-source:
    linear-gradient(
      90deg,
      /* alles voor de thumb en de thumb zelf */
      var(--color-star-fill) calc(50% + var(--s) * .25),
      /* alles na de thumb */
      var(--color-star-empty) 0
    );
  /* met fill wordt de thumb gevuld */
  border-image-slice: fill 0;
  /* 100vw --> om zeker te zjn dat de uitbreiding van de border-image groot genoeg is */
  border-image-outset: var(--s) 100vw;
  appearance: none;
}

main input[type="range"]::-moz-range-thumb {
  width: 1px;
  border-image-source:
    linear-gradient(
      90deg,
      var(--color-star-fill) calc(50% + var(--s) * .25),
      var(--color-wit) 0
    );
  border-image-slice: fill 0;
  border-image-outset: var(--s) 100vw;
  appearance: none;
  appearance: none;
}

/* focusring */
main label:has(:focus-visible)::after {
  content:"";
  grid-area:1/1;
  
  border-radius:.5em;
  outline:solid .25em var(--rating-focus);
  outline-offset:.25em;
}



/* ***************************************************************** */
/* RATE THIS BOOK + ACTIVITY */
main > p:nth-of-type(1){
	text-align: center;
	margin: 0;

	font-size: 1.1em;
}

main > button:nth-of-type(3){
	text-decoration: none;
	font-size: 1em;
	font-family: var(--text-ProximaBold), "Montserrat", Arial, sans-serif;
	color: var(--color-text-heading);

	appearance: none;
    border-color: transparent;
    background: none;

	font-size: 1em;
	font-family: var(--text-ProximaBold), "Montserrat", Arial, sans-serif;

	display: inline-flex;
    align-items: center;
    justify-content: center;
	gap: .6em;

	height: 2.75em;
	width: 100%;
	padding: 0 1em;
	margin: 1em 0;
}
main > button:nth-of-type(3) > img{
	width: 1.5em;
	height: auto;
}

/* ***************************************************************** */
/* UITLEG OVER BOEK*/
main p:nth-of-type(2){
	font-family: var(--text-ProximaItalic), "Montserrat", Arial, sans-serif;
	font-size: 1.05em;
}
main p:nth-of-type(2) > a{
	font-family: var(--text-ProximaItalic), "Montserrat", Arial, sans-serif;
	font-size: 1.05em;
	color:var(--color-text-heading);
}



main> details:nth-of-type(1){
	position: relative;
	margin: -1em 0 3em 0;
	padding: 0;
}

main p:nth-of-type(3){
	font-size: 1em;
	font-family: var(--text-ProximaBold), "Montserrat", Arial, sans-serif;
}

main > details:nth-of-type(1){
	position: relative; 
	margin: 0 0 3em 0; 
	padding: 0;
}
main > details:nth-of-type(1) summary {
	display: flex;
	align-items: center;
	
	font-size: 1.1em;
	font-family: var(--text-ProximaBold), "Montserrat", Arial, sans-serif;
	padding: 0;
	
}

main > details:nth-of-type(1)  summary::after{
	content:"Show more " ;

	text-decoration: underline;

	position: absolute;
	top: 100%;
	margin-left: .5em;
}
main > details[open]:nth-of-type(1) summary::after{
	content: "Read less";
	
	text-decoration: underline;

	margin: 1em 0 0 .5em;
}

main > details:nth-of-type(1) p{
	font-size: 1em;
	font-family: var(--text-ProximaRegular), "Montserrat", Arial, sans-serif;
}

/****************************************************************/
/* extra info */
main > ul:nth-of-type(1){
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 1em;

	margin: 0;
	padding: 0;
}
main > ul:nth-of-type(1) > li:nth-of-type(1){
	color: var(--color-greytext);
	font-size: .9em;
}
main > ul:nth-of-type(1) a{
	color: var(--color-text-heading);
	font-family: var(--text-ProximaBold), "Montserrat", Arial, sans-serif;
	font-size: 1em;

	text-decoration: underline;
	text-decoration-color: var(--color-underline);
	text-decoration-thickness: .1em;
}

main > ul:nth-of-type(1) button{
	color: var(--color-text-heading);
	font-family: var(--text-ProximaBold), "Montserrat", Arial, sans-serif;
	font-size: 1em;

	appearance: none;
    border-color: transparent;
    background: none;
	
	text-decoration: underline;
	text-decoration-color: var(--color-underline);
	text-decoration-thickness: .1em;
}

main.is-open > ul:nth-of-type(1){
	display: none;
}

main.is-open > ul:nth-of-type(2){
	display: block;

	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 1em;

	margin: 0;
	padding: 0;
}
main.is-open > ul:nth-of-type(2) > li:nth-of-type(1){
	color: var(--color-greytext);
	font-size: .9em;
}
main.is-open > ul:nth-of-type(2) a{
	color: var(--color-text-heading);
	font-family: var(--text-ProximaBold), "Montserrat", Arial, sans-serif;
	font-size: 1em;

	text-decoration: underline;
	text-decoration-color: var(--color-underline);
	text-decoration-thickness: .1em;
}

main.is-open > ul:nth-of-type(2) button{
	color: var(--color-text-heading);
	font-family: var(--text-ProximaBold), "Montserrat", Arial, sans-serif;
	font-size: 1em;

	appearance: none;
    border-color: transparent;
    background: none;
	
	text-decoration: underline;
	text-decoration-color: var(--color-underline);
	text-decoration-thickness: .1em;
}

main p:nth-of-type(4), p:nth-of-type(5){
	color: var(--color-carousel-grey-text-dark);
}

/****************************************************************/
/* book details & editions klapmenu */
main> details:nth-of-type(2){
	position: relative;
	margin: 2em 0 3em 0;
	padding: 0;
	display: flex;
	align-items: center;
}


main > details:nth-of-type(2) > summary{
	font-size: 1.2em;
	text-decoration: underline;
	font-family: var(--text-ProximaBold), "Montserrat", Arial, sans-serif;
}

main > details:nth-of-type(2) > summary::after{
	content:"Book details & editions" ;

	text-decoration: underline;

	position: absolute;
	top: 100%;
	margin-left: .5em;
}
main > details[open]:nth-of-type(2) > summary::after{
	content: "Fewer details";

	text-decoration: underline;

	margin: 1em 0 0 .5em;
}

/****************************************************************/
/* INHOUD INHOUDbook details & editions klapmenu INHOUD INHOUD */
main details:nth-of-type(2) > dl {
  display: grid;
  grid-template-columns: 5em 1fr;
  column-gap: 1em;
}

main details:nth-of-type(2) > dl dt, dd {
  margin: .2em 0;
  color: var(--color-carousel-grey-text-light);
}

main details:nth-of-type(2) > dl ul{
	margin: 0;
	padding: 0 0 1em 0;
}

main details:nth-of-type(2) > dl  details{
	position: relative;
	margin: 1em 0 1em 0;
	padding: 0;
	display: flex;
	align-items: center;
}
main > details:nth-of-type(2) > dl  details > summary{
	font-size: 1em;
	color: var(--color-carousel-grey-text-dark);
	text-decoration: underline;
	font-family: var(--text-ProximaBold), "Montserrat", Arial, sans-serif;
}
main > details:nth-of-type(2) > dl  details  summary::after{
	content:"Show more" ;

	text-decoration: underline;

	position: absolute;
	top: 100%;
	margin-left: .5em;
}
main > details:nth-of-type(2) > dl details[open] > summary::after{
	content: "Show less";

	text-decoration: underline;

	margin: 0 0 1em 0;
}



main > details:nth-of-type(2) > h2 {
	color: var(--color-text-heading);
	font-size: 1.2em;
	font-family: var(--text-MerriweatherBold), Georgia, 'Times New Roman', Times, serif;;
}



main > details:nth-of-type(2) > ul {
	display: flex;
	flex-direction: row;
	gap: 1em;

	overflow-x: auto;
	margin: 0 0 .5em 0;
	padding: 0;
	width: calc(100dvw - 1em);
} /* carousel werkt niet meer geen idee waarom */
main > details:nth-of-type(2) > ul li {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 10em;
	margin: 0;
}
main > details:nth-of-type(2) > ul li a {
	margin: 0;
	text-decoration: none;
}
main > details:nth-of-type(2) > ul li img {
	height: 13.6em;
	width: auto;

	border-top-right-radius:1em;
	border-bottom-right-radius:1em;
	box-shadow: .3em .3em .3em rgba(0, 0, 0, 0.25);

	transition: 1s;
}
main > details:nth-of-type(2) > ul li img:hover {
	height: 14.1em;
	width: auto;

	border-top-right-radius:1em;
	border-bottom-right-radius:1em;
}
main > details:nth-of-type(2) > ul li p {
	margin: .2em;
	font-size: .9em;

	color: var(--color-carousel-grey-text-light);
}
main > details:nth-of-type(2) > ul li p:nth-of-type(1) {	
	color: var(--color-carousel-grey-text-dark);
}

main > details:nth-of-type(2) > ul::scroll-button(*){
  width:3em;
  aspect-ratio:1;
  margin:0;
  padding:0;

  background-color:var(--color-button);
  border:0.01em solid var(--color-button-border);
  border-radius:50%;
  cursor:pointer;

  font-size:1em;
  
  position:absolute;

}
main > details:nth-of-type(2) > ul::scroll-button(right) {
  content: '→' / 'Next';
  right:clamp(1.5rem, 5vw, 2rem);
}

main > details:nth-of-type(2) > ul::scroll-button(left) {
  content: '←' / 'Previous';
  left:clamp(1.5rem, 5vw, 2rem);
}
  
main > details:nth-of-type(2) > ul::scroll-button(*):disabled {
  opacity:.5;
}



main > details:nth-of-type(2) > button:nth-of-type(1){
	background-color: var(--color-wit);
	border: .15em solid var(--color-button-border-detail);
	border-radius: 3rem;

	font-size: 1em;
	font-family: var(--text-ProximaBold), "Montserrat", Arial, sans-serif;

	display: inline-flex;
    align-items: center;
    justify-content: center;
	gap: .4em;

	height: 2.75em;
	width: 16rem;
	padding: 0 1em;
	margin: 5em 2em 1em 2em;
}

main > details:nth-of-type(2) > h3{
	color: var(--color-text-heading);
	font-size: 1em;
	font-family: var(--text-MerriweatherBold), Georgia, 'Times New Roman', Times, serif;

	margin: 0;
}

main > details:nth-of-type(2) > h3 > a{
	text-decoration: none;
	color: var(--color-text-heading);
}

main > details:nth-of-type(2) > button:nth-of-type(2){
	appearance: none;
    border-color: transparent;
    background: none;

	font-size: 1em;
	font-family: var(--text-ProximaBold), "Montserrat", Arial, sans-serif;

	display: inline-flex;
    align-items: center;
    justify-content: center;
	gap: .4em;

	padding: 1em 0;
	margin: 0;
}
main > details:nth-of-type(2) > button:nth-of-type(2) > img{
	height: 1em;
	width: 1em;
}


/* ***************************************************************** */
/* MORE ALSO ENJOYED */
main > h2{
	border-top: .05em solid var(--color-divider);
	padding-top: 1em;
}

main > ul:nth-of-type(3){
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	gap: 4em;
	scrollbar-width:thin;
	scrollbar-color: var(--color-selecttext);
	
}
main > ul:nth-of-type(3) li{
	list-style-type:"";
}

main > ul:nth-of-type(3) li a{
	display: grid;
	grid-template-columns: 1em 100%;
	grid-template-rows: 13em 2em 2em 1em;

	text-decoration: none;
}

main > ul:nth-of-type(3) li a:hover{
	text-decoration: underline;
}

main > ul:nth-of-type(3) li a img:nth-of-type(1){
	grid-column-start: 1;
	grid-column-end: -1;
    grid-row-start: 1;
    grid-row-end: 2;

	display: flex;
	justify-content: center;
	align-items: center;

	height: 13em;
	width: auto;
}
main > ul:nth-of-type(3) li a h3{
	grid-column-start: 1;
	grid-column-end: -1;
    grid-row-start: 2;
    grid-row-end: 3;

	margin:.5em 0 0 0;
	display: flex;
	align-items: center;

	font-size: .9em;
	font-family: var(--text-MerriweatherBold), Georgia, 'Times New Roman', Times, serif;
}

main > ul:nth-of-type(3) li a p:nth-of-type(1){
	grid-column-start: 1;
	grid-column-end: -1;
    grid-row-start: 3;
    grid-row-end: 4;

	margin: 0;
	display: flex;
	align-items: center;

	font-size: .9em;
	font-family: var(--text-ProximaRegular),"Montserrat", Arial, sans-serif;
}
main > ul:nth-of-type(3) li a img:nth-of-type(2){
	grid-column-start: 1;
	grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 5;

	width: 1em;
	height: auto;
}
main > ul:nth-of-type(3) li a p:nth-of-type(2){
	grid-column-start: 2;
	grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;

	display: flex;
	align-items: center;

	margin: 0;
	font-size: .8em;
	font-family: var(--text-ProximaRegular), "Montserrat", Arial, sans-serif;
}
main > ul:nth-of-type(3) li a p:nth-of-type(2) strong{
	font-size: 1em;
	font-family: var(--text-ProximaBold), "Montserrat", Arial, sans-serif;
}

main > ul:nth-of-type(3)::scroll-button(*) {
  width:3em;
  aspect-ratio:1;
  margin:0;
  padding:0;

  background-color:var(--color-button);
  border:0.01em solid var(--color-button-border);
  border-radius:50%;
  cursor:pointer;

  font-size:1em;
  
  position:absolute;
}

main > ul:nth-of-type(3)::scroll-button(right) {
  content: '→' / 'Next';
  right:clamp(1.5rem, 5vw, 2rem);
}

main > ul:nth-of-type(3)::scroll-button(left) {
  content: '←' / 'Previous';
  left:clamp(1.5rem, 5vw, 2rem);
}
  
main > ul:nth-of-type(3)::scroll-button(*):disabled {
  opacity:.5;
}


main > button:nth-of-type(4){
	background-color: var(--color-wit);
	border: .2em solid var(--color-button-border-detail);
	border-radius: 3rem;

	font-size: 1em;
	font-family: var(--text-ProximaBold), "Montserrat", Arial, sans-serif;;

	height: 2.75em;
	width: 100%;
	padding: 0 1.25em;
	margin:5em 0 1em 0;
}


/* ***************************************************************** */
/* SEARCHBAR */
main ul:nth-of-type(4){
	display: flex;
	justify-content: center;
	flex-direction: row;

	gap: 1em;
	

	margin: 0;
	padding: 0;
}

main ul:nth-of-type(4) li{
	margin: 0;
	padding: 0;
}

main ul:nth-of-type(4) form:nth-of-type(1) {
    position: relative;
    width: 100%;
    max-width: 25em;

    grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}
main ul:nth-of-type(4) form:nth-of-type(1) label{
    display: none;
}
main ul:nth-of-type(4) form:nth-of-type(1) input{
    width: 100%;
    box-sizing: border-box;
    padding: .8em .75em;

    font-size: .6em;
    border: .15em solid var(--color-greytext);
    border-radius: 3rem;
    outline: none;
}
main ul:nth-of-type(4) form:nth-of-type(1) button {
    position: absolute;
    right: .95em;
    top: 50%;
    transform: translateY(-50%);
            
    /*reset button styles */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex; 
}       
main ul:nth-of-type(4) form:nth-of-type(1) button img {
    width: 1.5em;
    height: 1.5em;
}

main ul:nth-of-type(4) li > button{
	background-color: var(--color-wit);
	border: .15em solid var(--color-button-border-detail);
	border-radius: 3rem;

	font-size: 1em;
	font-family: var(--text-ProximaBold), "Montserrat", Arial, sans-serif;;

	display: inline-flex;
	align-items: center;
	gap: 1em;

	height: 2em;
	width: 100%;
	padding: 0 1.25em;
	margin: 0;
}
main ul:nth-of-type(4) li > button img{
	width: 1em;
	height: auto;
}

/****************************************************************/
/* lists with this books, from our members */

main > ul:nth-of-type(5){
	margin:0 0 0 .5em;
	padding: 0;
	gap: 1em;

	display: flex;
	flex-direction: row;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width:thin;
	scrollbar-color: var(--color-selecttext);
}

main > ul:nth-of-type(5)::scroll-button(*) {
  width:3em;
  aspect-ratio:1;
  margin:0;
  padding:0;

  background-color:var(--color-button);
  border:0.01em solid var(--color-button-border);
  border-radius:50%;
  cursor:pointer;

  font-size:1em;
  
  position:absolute;
}

main > ul:nth-of-type(5)::scroll-button(right) {
  content: '→' / 'Next';
  right:clamp(1.5rem, 5vw, 2rem);
}

main > ul:nth-of-type(5)::scroll-button(left) {
  content: '←' / 'Previous';
  left:clamp(1.5rem, 5vw, 2rem);
}
  
main > ul:nth-of-type(5)::scroll-button(*):disabled {
  opacity:.5;
}


main > ul:nth-of-type(5) li h3 {
	margin: 0;
}
main > ul:nth-of-type(5) li h3 a{
	font-family: var(--text-ProximaRegular), "Montserrat", Arial, sans-serif;;
	font-weight:200;
	font-size: .9em;
	text-decoration: none;
	color: var(--color-text-heading);

	margin: 0;
}

main > ul:nth-of-type(5) li p{
	font-family: var(--text-ProximaRegular), "Montserrat", Arial, sans-serif;;
	font-size: .8em;
	color: var(--color-greytext);

	margin: 0;
}

main > ul:nth-of-type(5) li ul{
	gap: 1em;
	margin: 0;
	padding: 0;

	width: 17em;
    height: 12.6em;
	border-radius: 0.8em;

	display: flex;
	justify-content: center;
	align-items: center;
	overflow-x: hidden;
	overflow-y: hidden;
}

main > ul:nth-of-type(5) li ul li img{
	width: 6em;
	height: auto;

	border-radius: .5em;
}

main > ul:nth-of-type(5) li:nth-of-type(1) ul{
	background-color:var(--color-list-books-1);
}
main > ul:nth-of-type(5) li:nth-of-type(2) ul{
	background-color:var(--color-list-books-2);
	
}
main > ul:nth-of-type(5) li:nth-of-type(2) ul li{
	transform: rotate(20deg);
	display: flex;
	gap: 1em;
}
main > ul:nth-of-type(5) li:nth-of-type(3) ul{
	background-color:var(--color-list-books-3);
}
main > ul:nth-of-type(5) li:nth-of-type(3) ul li:nth-of-type(1){
	margin-top: 3.7em;
}
main > ul:nth-of-type(5) li:nth-of-type(3) ul li:nth-of-type(3){
	margin-bottom: 3.7em;
}

main > button:nth-of-type(5){
	background-color: var(--color-wit);
	border: .2em solid var(--color-button-border-detail);
	border-radius: 3rem;

	font-size: 1em;
	font-family: var(--text-ProximaBold), "Montserrat", Arial, sans-serif;;

	height: 2.75em;
	width: 100%;
	padding: 0 1.25em;
	margin:5em 0 1em 0;
}

/****************************************************************/
/* 		 			Dark mode header							*/
/****************************************************************/
@media (prefers-color-scheme: dark) {
	main button img{
		filter: invert();
	}
}