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






/*********************/
/* CUSTOM PROPERTIES */
/*********************/
:root {
	/* startje */

	/* thema kleur light */

	--color-background-root: rgb(255, 255, 255);
	--color-background-raised: rgb(225, 224, 224);

	--album-top-color: rgb(255, 255, 255);
	--album-playbutton: rgb(30, 215, 96);

	--text-color-title: rgb(0, 0, 0);
	--fallback-fonts: Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic;

	--color-fill: rgb(0, 0, 0);
	--color-fill-black: rgb(255, 255, 255);
	--color-fill-grey: rgb(30, 215, 96);

	/* states kleuren */
	--color-hover: rgba(255, 255, 255, 0.475);
	--color-focus-background: rgba(2, 14, 246, 0.701);
	--color-focus-text: rgb(30, 215, 96);
	--color-active-button: rgb(30, 215, 96);

	/* border opties */
	--border-radius: 0.4em;
	--border-radius-button: 2em;

}


/* dark theme */

@media (prefers-color-scheme:dark) {
	:root {
		--color-background-root: rgb(0, 0, 0);
		--color-background-raised: rgb(18, 18, 18, 1);

		--text-subdued: rgb(181, 53, 53);
		--album-top-color: rgb(179, 179, 179, 0.2);
		--album-playbutton: rgb(30, 215, 96);

		--text-color-title: rgb(255, 255, 255);
		--fallback-fonts: Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic;

		--color-fill: rgb(255, 255, 255);
		--color-fill-black: rgb(8, 8, 8);
		--color-fill-grey: rgb(125, 121, 121);

		/* states kleuren */
		--color-hover: rgba(245, 243, 243, 0.303);
		--color-focus-background: rgba(131, 137, 239, 0.701);
		--color-focus-text: rgb(137, 232, 170);
		--color-active-button: rgb(30, 215, 96);

		/* border opties */
		--border-radius: 0.4em;
		--border-radius-button: 2em;
	}
}

html {
	height: 100dvh;
}


.visually-hidden {
	position: absolute;
	left: -9999em;
}



/****************/
/* JOUW STYLING */
/****************/

/* jouw code */

body {
	height: 100dvh;
	background-color: var(--color-background-root);
	color: var(--color-text);
	margin: 0;
	display: grid;
	grid-template-columns: 5em 1fr;
	grid-template-rows: calc(100dvh - 10em) 10em;
	color: var(--text-color-title)
}

img {
	border-radius: var(--border-radius);
}


header {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	background-color: var(--color-background-root);
	left: -1em;
	padding: .5em;
	display: grid;
	gap: .5em;
}

header ul {
	padding: 0;
}


nav ul li {
	font-weight: 900;

}

/* nav 1 home en zoeken*/

nav:first-of-type {
	background-color: var(--color-background-raised);
	border-radius: var(--border-radius);
	padding: .5em;
	font-family: var(--fallback-fonts);
}

header nav:nth-of-type(1) ul {
	margin: 0;
}


header nav:nth-of-type(1) li a {
	display: grid;
	grid-template-columns: 3em;
	grid-template-rows: 3em;
	place-items: center;
}

header nav:nth-of-type(1) li a:hover {
	background-color: var(--color-hover);
	border-radius: var(--border-radius);
}

header nav:nth-of-type(1) li a:focus {
	background: var(--color-focus-background);
	color: var(--color-focus-text);
}




header nav:nth-of-type(1) li a svg {
	width: 1.5em;
	fill: var(--color-fill)
}


header nav:nth-of-type(1) li a span {
	position: absolute;
	left: -999em;
}


/* nav 2 bibliotheek*/


header nav:nth-of-type(2) h2 {
	font-size: 1em;
	display: grid;
	grid-template-columns: 4em;
	grid-template-rows: 4em;
	place-items: center;
	margin: 0;
}


header nav:nth-of-type(2) h2 span {
	position: absolute;
	left: -999em;
}


header nav:nth-of-type(2) h2 svg {
	width: 1.5em;
	fill: var(--color-fill);
}


header nav:nth-of-type(2) ul:nth-of-type(1) {
	position: absolute;
	left: -999em;
}


nav:nth-of-type(2) {
	background-color: var(--color-background-raised);
	border-radius: var(--border-radius);
	font-family: var(--fallback-fonts);
	height: calc(100vh - 8.5em - 10em);
}


header nav:nth-of-type(2) ul:nth-of-type(2) {
	margin: 0;
	height: calc(100vh - 8.5em - 4em - 10em);
	overflow-y: auto;
}


header nav:nth-of-type(2) ul:nth-of-type(2) li {
	position: relative;
	font-weight: 300;
	font-family: var(--fallback-fonts);
}


header nav:nth-of-type(2) ul:nth-of-type(2) a {
	display: grid;
	grid-template-columns: 3em;
	grid-template-rows: 3em;
	place-items: center;
	padding: .5em;
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
}

header nav:nth-of-type(2) ul:nth-of-type(2) a:hover {
	background-color: var(--color-hover);
}

header nav:nth-of-type(2) ul:nth-of-type(2) a:focus {
	background: var(--color-focus-background);
	color: var(--color-focus-text);
}

header nav:nth-of-type(2) ul:nth-of-type(2) img {
	height: 100%;
	width: 100%;
	display: block;
}


header nav:nth-of-type(2) ul:nth-of-type(2) h3,
header nav:nth-of-type(2) ul:nth-of-type(2) p {
	position: absolute;
	left: -999em;
}


li {
	list-style-type: none;
}


@media(width>52em) {
	body {
		grid-template-columns: 20em 1fr;

	}

	header nav:nth-of-type(1) li a {
		grid-template-columns: 3em 1fr;
		gap: .5em;
	}

	header nav:nth-of-type(1) li a span {
		left: 0;
		position: relative;
		order: 1;
		justify-self: start;
	}


	header nav:nth-of-type(2) {
		width: 19em;
	}

	header nav:nth-of-type(2) h2 {
		grid-template-columns: 4em 1fr;
		gap: .5em;
	}

	header nav:nth-of-type(2) h2 span {
		left: 0;
		position: relative;
		order: 1;
		justify-self: start;
	}



	header nav:nth-of-type(2) ul:nth-of-type(1) {
		display: flex;
		overflow: auto;
		left: 0;
		position: relative;
		gap: 0.5em;
		padding: 0 .5em;
	}

	header nav:nth-of-type(2) ul:nth-of-type(1) li {
		flex-shrink: 0;

	}

	header nav:nth-of-type(2) ul:nth-of-type(1) li button {
		font: inherit;
		font-weight: 400;
		height: 2.5em;
		appearance: none;
		border: none;
		border-radius: 1.5em;
		background-color: var(--album-top-color);
		color: var(--text-color-title);
		cursor: pointer;
	}

	header nav:nth-of-type(2) ul:nth-of-type(1) li button:hover {
		background-color: var(--color-hover);

	}

	header nav:nth-of-type(2) ul:nth-of-type(1) li button:focus {
		background: var(--color-focus-background);
		color: var(--color-focus-text);
	}

	header nav:nth-of-type(2) ul:nth-of-type(1) li button:active {
		background-color: var(--color-active-button);

	}

	header nav:nth-of-type(2) ul:nth-of-type(2) {
		height: calc(100vh - 8.5em - 4em - 4em - 12em);
	}


	header nav:nth-of-type(2) ul:nth-of-type(2) a {
		grid-template-columns: 3em 1fr;
		grid-template-rows: 1.5em 1.5em;
		column-gap: .5em;
	}

	header nav:nth-of-type(2) ul:nth-of-type(2) a h3 {
		left: 0;
		position: relative;
		order: 1;
		justify-self: start;
		font-size: 1em;
		align-self: end;
		margin: 0;
	}

	header nav:nth-of-type(2) ul:nth-of-type(2) a p {
		left: 0;
		position: relative;
		order: 1;
		justify-self: start;
		font-size: .8em;
		margin: 0;
	}

	header nav:nth-of-type(2) ul:nth-of-type(2) a img {
		grid-column-start: 1;
		grid-row-start: 1;
		grid-row-end: 3;
	}
}




form {
	background-color: var(--color-background-muziek);
	font-family: var(--fallback-fonts);
	display: grid;
	margin: 0;
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 3;
	grid-row-end: 2;
	padding: 0em 0.5em 0.5em 0.5em;
}

@media (width > 40em) {

	/* bron waardes online forum stackoverflow */
	form {
		grid-template-columns: auto auto;
	}

	.row-1 {
		grid-column: 1/2;
		grid-row: 1;
	}

	.row-2 {
		grid-row: 1;
	}

	form h2 {
		font-size: 1em;
		padding-left: 1em;
	}

	form h2:hover {
		text-decoration: underline;
	}

	form ul:first-of-type li h2 a:focus {
		background: var(--color-focus-background);
		color: var(--color-focus-text);
	}

	form img {
		width: 8.5em;
	}
}

form h2 a {
	display: flex;
}

form ul:nth-of-type(1) li {
	display: flex;
	align-items: center;
}

form ul {
	margin: 0;
	padding: 0;
	display: flex;
}

@media (width < 40em) {

	form ul {
		justify-content: space-evenly;
		display: flex;
	}

	form img {
		display: none;
	}

	form h2:hover {
		text-decoration: underline;
	}

	form ul:first-of-type li h2 a:focus {
		background: var(--color-focus-background);
		color: var(--color-focus-text);
	}
}

form ul:nth-of-type(1),
form ul:nth-of-type(2) {
	align-items: center;
}

form ul:nth-of-type(1) img {
	margin: 0.5em 0em 0.5em 0.5em;
}

form ul:nth-of-type(2) li button svg {
	width: 2em;
	fill: var(--color-fill);
	align-items: center;
}

form ul:nth-of-type(2) li button {
	fill: var(--color-fill);
	cursor: pointer;
	padding: 1em;
	background: transparent;
	border: none;
}

@media (width > 32em) {
	form ul:nth-of-type(2) li button {
		padding: 1.5em;
	}
}

form ul:nth-of-type(2) li button#play svg:nth-of-type(2) {
	display: none;
}

form ul:nth-of-type(2) li button#play.playing svg:nth-of-type(2) {
	display: block;
}

form ul:nth-of-type(2) li button#play.playing svg:nth-of-type(1) {
	display: none;
}


form ul:nth-of-type(2) li button:hover {
	background-color: var(--color-hover);
	border-radius: 50%;
}

form ul:nth-of-type(2) li button:focus {
	background: var(--color-focus-background);
	color: var(--color-active-button);
	border-radius: 50%;
}