/*--------------FONT IMPORT------------*/
@font-face {
	font-family: "DT Nouveau";
	src: url("FONTS/DTNouveau-Regular.otf") format("opentype");
	font-weight: normal;
}

@import url(https://db.onlinewebfonts.com/c/d53e8c324d86f4bd809f2421498b1f1f?family=BlurWeb-Medium+W03+Regular);

/*--------------DESIGN SYSTEM------------*/
:root {
	overflow-x: hidden;
	/* setting fonts variables */
	--body-font: 'Chillax', sans-serif;
	--body-font-style: normal;
	--body-size: clamp(1rem, 2vw, 2rem);
	/* Learnt this originally in class but used mdn and claude to understand it further and use it as a variable. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value. it goes rem unit - vw - rem. this allows the type to scale resposively - explained more in the disc size */
	--header-font: "BlurWeb-Medium W03 Regular";
	/* I know we shouldn't be using fonts like this but I wanted a very specific vibe to the typography and tried a bunch i couldn't get to work in the design system/unable to add it to my html - I looked into purchasing it but that site seemed just as sketchy */
	--heading-size: clamp(5rem, 10vw, 10rem);
	--subheader-size: clamp(1.25rem, 2vw, 1.75rem);

	/* setting color variable */
	--active: rgb(103, 103, 103);
	--selected: rgb(146, 130, 255);
	--links: rgb(57, 57, 57);
	--ring: rgb(180, 180, 180);
	--main: rgb(79, 79, 79);
	--border: rgb(206, 206, 206);
	--white: white;
	--grey: rgb(45, 45, 45);
	--black: black;


	/* setting disc and filmstrip variables */
	--disc-size: clamp(14rem, min(70vw, 48vh), 26rem);
	/* The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value. it goes rem unit - vw - rem. this allows the disc to be resposively scaled - we also covered this in class but i needed a refresher on the synthex https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp. Increasing the middle value, it hits the maximum sooner and grows faster as you drag the viewport wider. disc with stay between min and max - will always choose between 70vw - 70% of viewport width and 48vh - 48% of viewport height based on whichever is smaller*/
	--block-size: clamp(5.5rem, 10vw, 8rem);
	/* I experimented with the values here - and thought the logic was max width is the smaller then the preferred value. but this just means that the clamp works faster and stops at 12rem*/
	--gap-size: 0.25rem;
	--padding-size: 1rem;
	--border-radius: 10%;
	--button-size: clamp(2.75rem, 70vw, 3rem);
}

/*--------------BASE------------*/
html,
body {
	display: flex;
	/* Putting a flex around my entier body block so it's easier to control the movement for a more responsive layout :) */
	height: 100dvh;
	/* I remember Micheal/Eric mentioning  svh in class during the reviews with Riya & over slack, since my design is capped at the screen size I wanted to use this. Upon looking this up, I found an article on https://learnbricksbuilder.com/demystifying-vh-dvh-svh-and-lvh-in-css/ that explained "DVH, or dynamic viewport height, is a newer unit that adjusts according to changes in the viewport size. It reacts to events like window resizing or device rotation, keeping your layout consistent DVH is ideal for elements that need to maintain size or position relative to the viewport, even when it changes" which is why it works better for my design*/
	flex-direction: column;
	/* if you dont add a direction - default is row */
	overflow: hidden;
	font-variant-emoji: text;
	/* My arrow was showing up as an emoji on iphone - learnt this from binding project https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-variant-emoji */
}
h1,
h2,
h3 {
	font-family: var(--header-font);
}

a {
	color: var(--links);
	font-family: var(--body-font);
	font-weight: 500;
	font-size: var(--body-size);
	text-decoration: underline;
	/* Learnt this in class but refresher https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-decoration*/
	text-underline-offset: 0.15rem;
	/* This is new - wanted to adjust the underline https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-underline-offset - you can set the underline offset (to better accomodate for the y in playlist)*/
}
.arrow {
    font-size: 1.2rem;
	font-weight: 200;
	font-variant-emoji: text;
	font-family: monospace, serif, sans-serif; /* Adding this as a backup as it mentioned setting the font family to monospace as it seems to help remove the emojies on iphone and default to emoticons https://stackoverflow.com/questions/32915485/how-to-prevent-unicode-characters-from-rendering-as-emoji-in-html-from-javascrip#:~:text=is%20completely%20broken.-,%E4%B8%80%E4%BA%8C%E4%B8%89,5%2C%202017%20at%201:49 )*/
}

p {
	color: var(--main);
	font-family: var(--body-font);
	font-weight: 400;
	font-size: var(--body-size);
}

/*--------------HEADER------------*/
/* HEADER - flex is simplier for this since it I want to create a single column layout for the header for now */
header {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-inline: var(--padding-size);
	padding-block: var(--padding-size);

	h1 {
		padding-block-start: var(--gap-size);
		margin-block: -1rem;
		margin-inline: -0.25rem;
		font-size: var(--heading-size);
		color: var(--active);
		filter: blur(0.05rem);
		/* Learnt about filters from your suggestions in class https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/filter-function/blur but here's were I found the correct way to write it - number is blur with a radius of x in my case its very very small */
	}
}
#volume-btn {
		z-index: 100;
		width: calc(var(--body-size) * 3);
		/* relative to text size - I keep forgetting how to properly space the calc function - use claude to remember this calc(var(--body-size) * 3) - no spaces until you do calc and put a space between * and 3*/
		height: calc(var(--body-size) * 3);
	}

	#modal {
		z-index: 100;
		width: calc(var(--body-size) * 3);
		/* relative to text size - I keep forgetting how to properly space the calc function - use claude to remember this calc(var(--body-size) * 3) - no spaces until you do calc and put a space between * and 3*/
		height: calc(var(--body-size) * 3);
	}

body:has(dialog[open]) {
	overflow: hidden;
}

.dialog-header {
	/* This wasnt working when nested but I did try */
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}

dialog {
/* From class - Style the `dialog` itself, which is `display: none;` to start. */
	position: fixed; /* In the viewport. */
	translate: -50% -50%; /* In the viewport. */
	width: clamp(20rem, 55vw, 70rem);
	height: auto;
	max-width: 100ch;

	padding:calc(var(--gap-size) * 1.5); /* useful resource: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units */
	inset-block-start: 50%; /*The inset-inline-start CSS property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset-inline-start */
	inset-inline-start: 50%;
	border-radius: 1.2rem; 

	background-image: url('Illustrations/web-modal.png');
	background-size: fill;
	background-position: center;
	background-repeat: no-repeat;

	#modal-text {
		display: flex;
		flex-direction: column;
		padding: var(--gap-size);

		background-color: var(--white);
		border-radius: 0.7rem;
		/* Chareese taught me this trick to make the borders look better - outside border is more curved then inner border */
		box-shadow: 0.3rem /* Writing it like this so I can understand the values better - using box shadow because I want to add a border radius. horizontal offset — pushes shadow right */
		0.3rem /* vertical offset — pushes shadow down */
		0.6rem /* blur radius — how soft the shadow is */
		0.125rem /* spread radius — how much it expands before blurring */
		var(--grey); /* color of box shadow — grey at 50% opacity */
	}
	h3 {
		margin-block: 0.5rem;
		padding: 0.5rem;
		text-align: left;
		font-size: clamp(1.5rem, 2.5vw, 2.5rem);
		/* smallest, preferred, max */
		color: var(--main);
	}

	button {
		width: calc(var(--body-size) * 3); /*smallest button size */
		height: calc(var(--body-size) * 3);
	}

	p,
	a { /* you can select multiple elements by using the comma between to set common styles */
		padding-block-end: var(--padding-size);
		padding-inline: 0.5rem;
		margin-block-start: var(--padding-size);
		font-size: clamp(1rem, 1.25vw, 1.25rem);
		line-height: 1.4;
		font-weight: 450;
	}

	&::backdrop {
		background-color:var(--black); /* A dark overlay. */
		opacity: 60%;
		pointer-events: none; /* Let clicks pass through to our `document` listener. */
	}
}

&[open] { display: grid }
/* This outsides of the dialog because it's targeting a completely different element, the <body> tag, not the dialog itself. `block` is default, but we can override. */

/*--------------MENU------------*/
.menu {
	z-index: 1000;
	display: flex;
	list-style: none;
	justify-content: space-between; /*equally space at viewport width*/
	align-items: center;
	gap: calc(var(--padding-size) * 2);
	font-family: var(--font);

	/*This is a simple interaction to make the link clickable */
	a {
		font-size: var(--body-size);
	}

	a:hover {
		color: var(--selected);
	}
}

/*--------------MAIN------------*/
main {
	display: flex;
	flex-direction: column;
	flex: 1; /*I learnt this on Claude and watched this video to understand it better https://www.youtube.com/watch?v=_tlxwc9ssH4&t=784s. Telling the flex to take up all the avalible space, body is a flex column with header, main, and the film strip,  flex: 1 on main is saying "give me all the leftover height that header doesn't use.*/
	justify-content: center; 
	min-height: 0; 
	padding-block-end: calc(var(--block-size) * 2);
	margin-block-start: -2rem;
}

/* using flex here (defaults to row) as the main horizonal axis for the disc and moving it to the right side of the mobile frame*/
#disc-wrapper {
	display: flex; /* This puts the entier disc block into a wrapper that i can set to align on the edge of the screen */
	flex: 1;
	position: relative;
	width: 100%;
	justify-content: center; /*right aligns*/
	align-items: center;
	overflow: visible;

}

/*--------------DISC------------*/
/*....ROTATE ANIMATION....*/
@keyframes spin {
/* used to define the CSS animation at various points during its duration - in my case it's faily simple because its a continuous rotate*/
to { rotate: 360deg; }
/* learnt this on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/rotate, connects with the #disc element and sets the keyframe animation to rotate*/
}

/* DISC - setting up the sizing for the main circle*/
/* DISC - attributions needed here and in disc-player*/
#disc-container {
	position: relative;
	width: calc(var(--disc-size) + 2rem);  /* Adds the padding for the disc player background*/
	height: calc(var(--disc-size) + 2rem); 


	display: flex; 
	flex-shrink: 0;  /* Item will NOT shrink, it keeps its size even if container overflows.*/
	justify-content: center; 
	align-items: center;
}

#disc-player {
	width: calc(var(--disc-size) + 2rem); /* Places the disc ring image with the padding above for the disc player background using calc here because I want it relative to to disc size*/
	height: calc(var(--disc-size) + 2rem);
	position: relative; /* relative to parent*/
	
	display: flex; /* /Creates a flex container so child elements can be aligned easily — learned in class flexbox layout */
	align-items: center; /* Claud suggested using this specific command - vertical alignment on the disc container - align-items  only valid for items inside a flex/grid */
	justify-content: center; /* Claud suggested using this specific line - horizontal alignment on the disc container - only valid for items inside a flex/grid*/
	
	background-image: url("Illustrations/Disc-ring.png"); /* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-image setting background image, learnt this in class needed clarification on the synthx but this just selects a background image from file folder. */
	background-size: cover; /* This is like object-fit for backgrounds */
	border: 0.125rem double var(--ring);
	border-radius: 50%;
}

#disc {
	width: var(--disc-size);
	height: var(--disc-size);
	overflow: hidden;
	position: relative; /* remove the right/top/transform positioning */

	animation: spin 8s linear infinite;
	transform-origin: center center; /* Claud suggested using this to get the spin to orignate from the beginning. This line allows the animation to start in the center point, kind of thought of this like an anchor point in after effect - rotates around its exact center point, making the spin smooth and stable without wobble. */
	
	border: 0.125rem double var(--ring); /* css border styles - refresher from MDN */
	border-radius: 50%;
	background-image: url("Illustrations/Disc.png");
	background-size: 110%; /* Similar to object fit but with the background size, https://www.w3schools.com/css/css3_background_size.asp I had some space between the edge and disc image - you can use either auto/contain/cover or percentages/relative units here */
	background-position: center; /* I learnt this using claude since it wasn't 100% in the center. This sets the background to perfectly center */

}


/* DISC FILL */
#disc-image {
	overflow: hidden;
	display: flex; /* ensures centering works */
	width: var(--disc-size);
	height: var(--disc-size);

	justify-content: center; /* aligns horizontally (main axis - assuming this matches the flex direction) */
	align-items: center; /* aligns vertically - more attributions on this above */
	border-radius: 50%; /* making the content disc shaped - border-radius 50% just means fully rounded */
	object-fit: cover; /* Crops image to full bleed */
}

/* selecting all the content types and making them fit into the circle */
#disc-image img,
#disc-image iframe,
#disc-image video,
#disc-image embed {
	width: 100%; /* makes each media element fill the entier parent container */
	height: 100%;
	object-fit: cover; /* ensures cover style on the blocks themselves */
}

/* MUSIC IFRAMES FROM YOUTUBE/SPOTIFY/SOUNDCLOUD */
#disc-image iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 10; /* a bit of overkill but make sure all iframes sit ontop of the disk */
	
	transform: translateY(0%) scale(200%) translateX(0%); /* learnt how to write this synthx using claude: first translateY, then scale, then translateX - the order here is important */
	will-change: transform;
	backface-visibility: hidden;
}

#disc-image:has(iframe)::before { /* Used Claude to help me figure out how to select this and put the background below the iframe/embeds for the music player */
/* creates a pseudo-element before the content */
	content: ''; /*  creates an empty pseudo-element (required for ::before) */
	position: absolute; /* positions it over the disc */
	width: 100%;
	height: 100%;

	background-image: url('Illustrations/songs-embeds.png');
	background-size: 150%;
	background-position: center;
	border-radius: 50%;
	z-index: 100; /* layers it above the disc content but below the actual embed (which has z-index: 10)*/
	will-change: opacity; /* Learnt this from Claude - This tells the browser: "Hey, this element's transform is going to change, so prepare for it." basically prepares the browser to understand that this will change and to fade in and out opacity, was helping with the glitching animation and optimizes background rendering - there are 3 common values for will change - transform, opacity and auto (browser decideds - default) PLEASE NOTE - This makes the whole website loading slower use with caution*/
}

#disc-image iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 10;
}


/* PDF EMBEDS  */
/* PDF wrapper with background */ 
/* PDF EMBEDS */
#disc-image.is-pdf {
	width: var(--disc-size);
	height: var(--disc-size);
	border-radius: 50%;

	background-image: url('Illustrations/Bookmarks.png');
	background-size: 150%;
	background-position: center;	
}

#disc-image.is-pdf img {
	mix-blend-mode: multiply;
	opacity: 0.85;
	z-index: 10;
}


/* TEXT BLOCKS */
#disc-image:has(.text) {
	display: flex; /* using flex here to organize content */
	flex-direction: column; /* vertical */
	text-align: center;
	background-image: url('Illustrations/lyrics-text.png');
	background-size: 140%;
	background-position: center;

/* selecting the actual text elements */
	.text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: var(--white);
	}

	h3 {
		overflow: hidden;
		text-overflow: ellipsis; /* Displays ... at the point where text is clipped. Only works when paired with overflow:hidden and white-space:nowrap.I think Lucy originally showed me this but also had to find the right synthx on MDN. */
		text-wrap: balance; /* Learnt this in class but using it here, used mdn to refresh my knowledge of it. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-wrap I think balance works on most browser types  */
		width: 20ch; /* talked about this in class but also referenced Mdn and Claud for this - it restricts the number of characters - you can use a percentage, rem, or percent for width*/
		
		white-space: nowrap; /* learnt this through Claude means don't wrap to more then 1 line */
		overflow: hidden;  /* nessessary to hide the overflow */
		padding-block-end: 8rem; /* from old clamp thing I tried learning to intergrate this more throughout my design more attributions above I feel like the one I wrote below is hard to understand but works for very specific disc stuff*/
		font-size:0.9rem;
		/* using the logic from the clamp() on disc size, it's used here to scale the fixed margin fluidly. Syntax via MDN: developer.mozilla.org/en-US/docs/Web/CSS/clamp, help intergrating the logic/variable assisted by Claude.By writing each value relative to --disc-size, the bleed stays proportional to the disc as it grows (on ipad and up). The three values are: calc(var(--disc-size) * -0.8) for max bleed, calc(var(--disc-size) * -0.7 + 2vw) for preferred value that shifts with viewport width, and calc(var(--disc-size) * -0.6) the min bleed.  */
	}

	p {
		width: 20ch; /* talked about this in class but also referenced Mdn and Claud for this - it restricts the number of characters - you can use a percentage, rem, or percent for width*/
		font-size:calc(var(--body-size)*0.75);
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* Limits text to 2 lines then truncates with ellipsis. Requires display:-webkit-box and -webkit-box-orient:vertical to work, Standard for doing this sort of thing. ChatGPT + MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/line-clamp  */
		text-wrap: balance; /* more info on this above */
		-webkit-box-orient: vertical; /* Required along with line clamp tells the webkit box to flow children vertically so line counting works. MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/box-orient */
	
		overflow: hidden;
		text-overflow: ellipsis; /* more info on this above */
		color:var(--white);
	}
}
#disc-hole {
	position: absolute; /* Positioning the disc hole absolute so it stablizizes in the center of the discplate - kind of thinking about building this part as if it was a physical object*/

	/* Similar to object fit but with the background size, https://www.w3schools.com/css/css3_background_size.asp this makes it fit the disc size perfectly as a cover rather than cropping it */
	width: 33%;
	/* sets to 1/3 of the disc size */
	height: 33%;
	z-index: 1000;
	border-radius: 50%;
	border: 0.5rem solid var(--ring);
	top: 50%;
	left: 50%;
	/* tell it where to go — 50% from the top and 50% from the left from the edges of the frame -  learnt from claude*/
	transform: translate(-50%, -50%);
	/* Asked Claude to help make this in the center of my circle - kept forgetting the synthx. moves - vertically then horizontally */
	/* FYI align-items: center; - you keep doing this! this ONLY APPLIES to FLEX/GRID...same with justify-content */
	
	background-image: url("Illustrations/disc-hole.png");
	background-size: cover;
}
/*--------------LISTEN MODAL------------*/
#listen-dialog {
	position: fixed;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	width: clamp(20rem, 40vw, 40rem);
	height: auto;
	overflow: hidden;

	box-shadow: 0.3rem /* Writing it like this so I can understand the values better - using box shadow because I want to add a border radius. horizontal offset — pushes shadow right */
	0.3rem /* vertical offset — pushes shadow down */
	0.6rem /* blur radius — how soft the shadow is */
	0.125rem /* spread radius — how much it expands before blurring */

	var(--grey); /* color of box shadow — grey at 50% opacity */
	padding:calc(var(--gap-size) * 1.5); /* useful resource: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units */
	border-radius: 1.2rem; 
	background-image: url('Illustrations/web-modal.png');

.dialog-header { /* button spacing and placement  */
	display: flex; 
	justify-content: flex-end;
	padding: 0.3rem;
}

#listen-modal-title {
	display: none; /* Used Claude to search how to do this, turns the display off on the title since you can see it below */
}

#listen-embed {
	width: 100%;
	aspect-ratio: 16/9; /* Used claude to figure out the synthx here -  many ways to format this synthx you can use this link as a reference https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/aspect-ratio#syntax since this is standard video size, 16/9 means width of 16 and height of 9*/
	overflow: hidden;
}

#listen-embed iframe {
	width: 100%;
	height: 100%;
	border-radius: 0.7rem; /* Thought about the logic of a smalled inner border inside outer border */
}

#close-listen-modal { /* Sets button size */
	width: var(--button-size);
	height: var(--button-size);
}
}

/*--------------MIDDLE NAVIGATION------------*/
#middle-nav {
	position: fixed; /* Always confused about position fixed or absolute - since middle nav is a child element I'm going to eleminate the chance for it to become absolute to the parent."Fixed element is positioned relative to the viewport (the browser window) and stays in the same place even when the page is scrolled." absolute element is positioned relative to its nearest ancestor with a position value other than static. https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/#:~:text=A%20fixed%20position%20element%20is,when%20the%20page%20is%20scrolled. */
	bottom: var(--block-size);
	/* find relative units for this!!! sits exactly on top of the film strip */
	left: 0; /* No relative units for this - I think! This controls the inherited positioning - touch the left and right side  */
	right: 0;
	
	display: flex;
	flex-direction: column-reverse; /*reverses the direction of my html*/
	width: 100%;
	align-items: center;
}

.block-info {
	display: flex; /* I explain this and the next few lines in detail above*/
	flex-direction: column;
	text-align: center;
	justify-content: center;
	align-items: center;
	padding-block: var(--padding-size);

	#block-title {
		max-width: 25ch;
		white-space: nowrap; /* I explain this and the next few lines in detail above, stops overflowing*/
		overflow: hidden;
		text-overflow: ellipsis;
	}
	#block-link {
		text-decoration: none;
	}
	#block-link:not([href="placeholder"]) {
	text-decoration: underline; 
	} /* Claude helped me figure this out, I wanted it so the placeholder link wasnt underlined but everything else was - i used the :not() element, it is a CSS pseudo-class that matches everything EXCEPT what's in the brackets — so this only underlines the link when the href is no longer "placeholder", i.e. when a real block is selected.*/
}

.block-info h2 {
	font-size: 1rem;
	color: var(--main);
}

.controls {
	display: flex;
	flex-direction: row;
	gap: var(--padding-size);
	align-items: center;
	width: auto;
	/* MDN and Claude, lets the browser determine the element’s width based on its layout and available space, helping me learn that elements don’t always need fixed widths because CSS can size them if they're set up properly. */
}

.controls button {
	width: var(--button-size);
	/* relative to text size - 2.75rem is the min button size*/
	height: var(--button-size);
}

#pause-play {
	width: var(--button-size);
	height: var(--button-size);
}

.controls button img {
	width: 100%;
	height: 100%;
	object-fit: contain; /* get's the whole image in the frame*/
}

/*--------------FILM------------*/
/* I knew I wanted a fixed horizontal film strip that stuck to the bottom of the bottom of the viewport, scrolls horizontally, displays square content blocks and adds soft fade edges to imply overflow. I used MDN, Claude to help with parts of this, but I'll explain it in more detail below */

.film-wrapper {
	position: fixed; /* like I mentioned before, this fixed position removes an element from the normal page flow and positions it relative to the viewport, keeping it locked in place even when the page scrolls. */
	width: 100vw;
	/* Full viewport width - taking up the entier horizontal space along the bottom */
	overflow-x: auto;
	/* we learnt this in class but this allows you to scroll horizontally. I was confused about this so I looked it up on mdn. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow-x Unlike scroll, user agents display scroll bars only if the content is overflowing and hide scroll bars by default*/
	overflow-y: hidden;
	
	left: 0;
	/* Resets to position 0*/
	right: 0;
	/* Used Claude to troubleshoot bottom spacing by applying fixed positioning and removing margin and padding to align the element to the viewport edge. - it makes sense because we are resetting position and margin/padding.*/
	bottom: 0;
	padding: 0;
	margin: 0;
	display: flex;
	
	gap: var(--gap-size);
	/* ADDING IMAGES TO EACH CONTENT BLOCK as a background - used claude to help me figure this out, for each content type i want the image i set to be the background in the film strip. This is setting a background * targets everything inside that li and hides the visibility inside the block (other than the background*/
	background-color: white;
	/* the element fades to transparent at both the top and bottom edges, while remaining fully visible in the middle 80%. */


	#channel-blocks {
		display: flex;
		flex: 1;
		overflow-y: hidden;
		overflow-x: auto; /* horizontal scroll explained above*/
		gap: var(--gap-size);
		list-style: none;  /* gets the bullets to stop showing up - but also you can do fun stuff with this https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/list-style - like making bullet points squared! */
		padding: 0;
		margin: 0;
		width: 100%;
		flex-wrap: nowrap;
		/* keep in one row - specifies that flex items within a flex container will not wrap onto multiple lines learnt from https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-wrap  */

		/* figured this out with Claude, horizontal edge fade using mask-image gradient runs left→right. The colors and numbers mean transparent at both edges, fully visible in the middle black = show, transparent = hide — webkit and standard need to match or it breaks. I learnt CSS mask-image uses a gradient where black = show and transparent = hide,  */
		/* figured this out with Claude, horizontal edge fade using mask-image gradient runs left→right. The colors and numbers mean transparent at both edges, fully visible in the middle black = show, transparent = hide — webkit and standard need to match or it breaks. I learnt CSS mask-image uses a gradient where black = show and transparent = hide - thats why im doing it in both right and left direction  */
		mask-image: linear-gradient(to right,
			transparent 0%,
			black 10%,
			black 80%,
			transparent 100%);
		-webkit-mask-image: linear-gradient(to left,
			transparent 0%,
			black 10%,
			black 80%,
			transparent 100%);
		}

	#channel-blocks li {
		width: var(--block-size);
		height: var(--block-size);
		aspect-ratio: 1;
		display: flex;
		margin-block-end: -0.25rem;
		flex-shrink: 0;
		/* keep this to prevent shrinking. I think I explained this before but in case, this is a CSS property applied to a flex item to prevent it from shrinking smaller than its width or flex-basis when the container has limited space. https://stackoverflow.com/questions/43360735/prevent-flex-item-from-shrinking */
		align-items: center;
		justify-content: center;
		overflow: hidden;
		border-block: 0.7rem solid rgb(255, 255, 255);/*i thought of this makeshift solution basically I created these custom thumbnails for some elements but not all - this makes the images look the same size as the discs*/
		box-sizing: border-box;
		/* adds border calculated inside box size - prevents overflow on images. */
	}

	#channel-blocks li.active {
		scale: 1.1;
		filter: blur(0.15rem) grayscale(100%);
		/* learnt this on mdn https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/filter - there are different types of filters that you can combine - this is adding a blur and grayscale */
	}

	/* External links */
	#channel-blocks li:has(a) {
		background-image: url('./Illustrations/Link.png');
		background-size: 102%; /* I wanted to make the background size bigger slightly to fix the croping here */
		background-position: center; /* Learnt this from Claude, it centers the background position - adding this fixes the vertical postion */

		* {
			visibility: hidden;
		}
		/* used Claude to figure out visibility: hidden on the wildcard selector - selecting all its childern elements and hides them. it hides all the text/icons inside the li so only the background image shows through. The reason you target children with * rather than the li itself is that visibility: hidden on the parent would also hide the background, but background images aren't affected by visibility, so hiding just the children lets the background show while clearing everything on top of it. */
	}

	#channel-blocks li:has(iframe) {
		background-image: url('./Illustrations/Listen.png');
		background-size: 102%;
		background-position: center;

		* {
			visibility: hidden;
		}
	}

	/* External embedded audio same attribution as above */
	#channel-blocks li:has(.text) {
		background-image: url('./Illustrations/read.png');
		background-size: 102%;
		background-position: center;

		* {
			visibility: hidden;
		}
	}
}
#channel-blocks li {
	/* similar to a hover - attribution above, here's a reference https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/transform-function/scale*/
	scale: 1;
	transition: scale 0.2s ease;
}
#channel-blocks li:hover {
	scale: 1.15;
}

#channel-blocks img,
#channel-blocks iframe {
	object-fit: cover;
	scale: 80%;
	object-position: center;
	aspect-ratio: 1;
	overflow: hidden;
}

#channel-blocks li img {
	box-sizing: border-box;  /*this includes border in box sizing - really trying to get the scaling down*/
	aspect-ratio: 1;
	width: 100%;
	height: 100%;
}

#channel-blocks .text,
#channel-blocks .image,
#channel-blocks embed,
#channel-blocks iframe {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	aspect-ratio: 1;
}




/*-------------- RESPONSIVE DESIGN ------------*/


@media (width > 420px) {
	:root {
		 --disc-size: clamp(18rem, min(30vw, 35vh), 25rem);
	}
	#disc-wrapper{
	margin-block-start: -3rem;
	}
	#disc-image:has(.text) {
		h3 {
			padding-block-end: 8rem;
			font-size: 1.1rem;
		}
		
		p {
			font-size: 0.9rem;
		}
	}
}

@media (width > 700px) {
	:root {
		 --disc-size: clamp(22rem, min(50vw, 55vh), 40rem);
	}

	header {
		button img {
			width: calc(var(--body-size) * 1.5);
			/* relative to text size - I keep forgetting how to properly space the calc function - use claude to remember this calc(var(--body-size) * 3) - no spaces until you do calc and put a space between * and 3*/
			height: calc(var(--body-size) * 1.5);
			margin-inline: calc(var(--padding-size) * 1.8);
			margin-block: calc(var(--padding-size) * 0.5);
		}
	}

	#middle-nav {
		flex-direction: row;
		
	}

	.block-info {
		display: flex;
		flex-direction: column;
		margin-right: auto;
		/* vw spacing between the text and the buttons */
		padding: var(--padding-size);
		align-items: flex-start; /* not left */
		text-align: left;

		#block-title {
			font-size: calc(var(--body-size) * 1);
			max-width: 30ch;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: left;
		}

		#block-link {
			padding: 0; 
			text-align: left;
			font-size: calc(var(--body-size) * 0.75);
			text-decoration: none;
		}
	}

	#volume-btn {
		width: calc(var(--body-size) * 1.5);
		/* relative to text size - 1.5rem is okay for desktop*/
		height: calc(var(--body-size) * 1.5);
	}

	#modal {
		width: calc(var(--body-size) * 1.5);
		/* relative to text size - 1.5rem is okay for desktop*/
		height: calc(var(--body-size) * 1.5);
	}

	.controls {
		display: flex;
		flex-direction: row;
		gap: var(--gap-size);
		align-items: center;
		padding: 0;
		padding-inline: var(--padding-size);

	.controls button {
		width: calc(var(--body-size) * 1.5);
		/* relative to text size - 1.5rem is okay for desktop*/
		height: calc(var(--body-size) * 1.5);
	}

	#pause-play {
		width: calc(var(--body-size) * 2);
		height: calc(var(--body-size) * 2);
	}
	}
	
	#disc-image:has(.text) {
	h3 {
		padding-block-end: 9rem;
		font-size: 1.5rem; /* learning to intergrate this more throughout my design more attributions above I feel like the one I wrote below is hard to understand but works for very specific disc stuff*/
	}
	p {
		font-size: 1.1rem;
	}
}
}

@media (width > 800px) {
	#disc-image:has(.text) {
	h3 {
		padding-block-end: 10rem;
		font-size: 1.5rem; /* learning to intergrate this more throughout my design more attributions above I feel like the one I wrote below is hard to understand but works for very specific disc stuff*/
	}
	p {
		font-size: 1.1rem;
	}
}
}

@media (width > 1400px) {
:root {
 --disc-size: clamp(30rem, min(25vw, 30vh), 40rem);
}
#disc-container {
	margin-block-end: 2rem;
	position: relative;
	width: calc(var(--disc-size) + 2rem);
	height: calc(var(--disc-size) + 2rem);
}
	#disc-image:has(.text) {
	h3 {
		padding-block-end: 16rem;
		font-size: 1.5rem; /* learning to intergrate this more throughout my design more attributions above I feel like the one I wrote below is hard to understand but works for very specific disc stuff*/
	}
	p {
		font-size: 1.1rem;
	}
}
}

@media (width > 1800px) {
:root {
 --disc-size: clamp(40rem, min(25vw, 40vh), 45rem);
}
#disc-container {
	margin-block-end: 2rem;
	position: relative;
	width: calc(var(--disc-size) + 2rem);
	height: calc(var(--disc-size) + 2rem);
}
#disc-image:has(.text) {
	h3 {
		padding-block-end: 16rem;
		font-size: 1.5rem; 
		font-size: 1.1rem;
	}
}
}
@media (width > 2000px) {
:root {
 --disc-size: clamp(50rem, min(25vw, 40vh), 55rem);
}
#disc-container {
	margin-block-end: 2rem;
	position: relative;
	width: calc(var(--disc-size) + 2rem);
	height: calc(var(--disc-size) + 2rem);
}
#disc-image:has(.text) {
	h3 {
		padding-block-end: 27rem;
		font-size: 2rem; 
	}
	p {
		font-size: 1.5rem;
	}
}
}