:root{
	/*--color-primary: #fac748;*/
	--color-primary: #B132BB;
	/*--color-secondary: #70A37F;*/
	--color-secondary: #3A1342;
	--color-dark: #0f1a20;
	--color-grey-mid: #6e7578;
	--color-light: #f4f4f8;
	
	--transition-duration-fast: 0.2s;
	--transition-duration-mid: 0.4s;
	
	--font-size-micro: 10px;
	--font-size-info: 12px;
	--font-size-body: 16px;
	--font-size-button: 16px;
	--font-size-title: 22px;
	--font-size-over:36px;
	
	--border-radius-circle: 100vh;
	--border-radius-normal: 7px;
	--border-radius-small: 1.5px;
}

@media screen and (min-width: 700px){
	:root{
		--font-size-micro: 12px;
		--font-size-info: 16px;
		--font-size-body: 20px;
		--font-size-button: 24px;
		--font-size-title: 36px;
		--font-size-over:48px;
	}
}@font-face {
  font-family: open-sans;
  src: url(/assets/fonts/OpenSans-VariableFont_wdth,wght.ttf);
}

/* Browser Compatibility Check */

.browser-support-checker{
	z-index:100;
	width:100vw;
	height:100vh;
	position:fixed;
	padding-top:30vh;
	text-align:center;
	background-color:black;
	color:white;
}

body{
	&:has(div){
		.browser-support-checker{
			display:none;
		}
	}
}


body{
	margin:0;
	color: var(--color-dark);
	background-color:var(--color-light);
	font-family: open-sans, arial;
	-webkit-tap-highlight-color: transparent;
}

.play-pause-switcher{
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	
	& svg{
		pointer-events:none;
		fill:var(--color-light);
		width:60%;
		&:first-child{
			display:block;
		}
		
		&:last-child{
			display:none;
		}
	}
	
	&.playing{
		& svg{
			&:first-child{
				display:none;
			}
			
			&:last-child{
				display:block;
			}
		}
	}
}body {
	--header-height:60px;
	--controls-height:60px;
	
	&:has(.body-no-scroll){
		overflow:hidden;
	}
}

.app-container {
	position:relative;
	z-index:10;
	width:100%;
	
	.app-header {
		position:fixed;
		top:0;
		width:100%;
		height: var(--header-height);
		background-color: var(--color-dark);
		color:var(--color-light);
		display:grid;
		grid-template-columns: 1fr auto 1fr;
		z-index:10;
		
		.logo-section{
			grid-column-start:2;
			grid-column-end:3;
			transition:background-color var(--transition-duration-fast);
			user-select: none;
			
			& a {
				height:var(--header-height);
				display:block;
			
				& img{
					height:calc(var(--header-height) * 0.7);
					margin:calc(var(--header-height) * 0.15);
					transition: transform var(--transition-duration-fast);
					
					&:hover{
						transform:scale(0.8);
					}
				}
			}
				
			&:hover{
				background-color:#ffffff22;
			}
		}
		
		.main-nav-section{
			display:none;
		}
		
		.mobile-hamburger-section{
			grid-column-start:1;
			grid-column-end:2;
			grid-row-start:1;
			grid-row-end:2;
			
			& svg{
				fill:var(--color-light);
				cursor:pointer;
				height:calc(var(--header-height) * 0.7);
				margin:calc(var(--header-height) * 0.15);
				transition: transform var(--transition-duration-fast);
				
				&:hover{
					transform:scale(0.8);
				}
			}
		}
		
		.utils-section{
			display:flex;
			justify-content:flex-end;
			.extra-menu-items{
				height:var(--header-height);
				cursor:pointer;
				display:none;
				transition:background-color var(--transition-duration-fast);
				
				&:has(.secondary-menu-popup.active){
					background-color:#ffffff22;
				}
				
				&:hover{
					background-color:#ffffff22;
				}
				
				.extra-menu-items-button{
					& svg{
						height:calc(var(--header-height) * 0.7);
						margin:calc(var(--header-height) * 0.15);
						fill:white;
					}
				}
				
				.secondary-menu-popup{
					position:absolute;
					width:fit-content;
					background-color:var(--color-dark);
					color:var(--color-light);
					border-radius: 0 0 0 var(--border-radius-normal);
					bottom:0;
					right:0;
					transform: translateY(100%);
					display:none;
					
					& a{
						color:inherit;
						text-decoration:none;
						font-weight:bold;
						display:block;
						width:100%;
						padding:10px 40px 10px 20px;
						
						&:hover{
							background-color:#ffffff22;
						}
					}
					
					
					&.active{
						display:block;
					}
				}
			}
		}
	}
	
	.app-content{
		margin-top:var(--header-height);
		margin-bottom:var(--controls-height);
		min-height:20vh;


		&:has(.partial-container:empty)::before{
			content: url(/assets/images/loader-dark.svg);
			height: 100px;
			padding:20px;
			display:flex;
			justify-content:center;
		}
		
		#main-content-partial-container{
			width:100%;
			opacity:1;
			transition:opacity 0.25s ease-out;

			&:empty{
				opacity:0;
			}
		}
	}
	
	.app-controls{
		width:100%;
		height: var(--controls-height);
		background-color: var(--color-dark);
		position:fixed;
		bottom:0;
		display:grid;
		grid-template-columns:var(--controls-height) 1fr var(--controls-height);
		transition:transform 0.15s ease-out;
		transform:translateY(100%);
		
		&.has-audio{
			transform:translateY(0);
		}
		
		.play-button-section{
			width: var(--controls-height);
			height: var(--controls-height);
		}
		
		.progress-bar-section{
			flex-grow:1;
			.progress-bar{
				height: var(--controls-height);
				margin-left:20px;
				margin-right:20px;
				padding-top:calc(var(--controls-height) / 2 - 2px);
				cursor:pointer;
				
				.progress-bar-line{
					width:100%;
					overflow:hidden;
					height:3px;
					background-color:var(--color-grey-mid);
					
					.progress-bar-position{
						width:0;
						height:3px;
						background-color:var(--color-primary);
					}
				}
			}
		}
		
		.artwork-section{
			display:block;
			cursor:pointer;
			
			& img{
				margin:calc(var(--controls-height) * 0.15);
				width:calc(var(--controls-height) * 0.7);
				height:calc(var(--controls-height) * 0.7);
				border-radius:var(--border-radius-small);
				object-fit:cover;
			}
		}
	}
}

.slideout-menu{
	position:relative;
	height:100vh;
	width:100vw;
	position:fixed;
	transition: transform var(--transition-duration-mid);
	background-color:var(--color-primary);
	display:block;
	z-index:20;
	top:0;
	left:0;
	transform:translateX(-100%);
	
	&.active{
		transform:translateX(0);
		box-shadow: 0px 0px 25px rgba(0,0,0,0.5);
	}
	
	.close-button-row{
		height: var(--header-height);
		display:flex;
		justify-content:flex-end;
		
		& svg{
			fill:var(--color-light);
			height:calc(var(--header-height) - 20px);
			width:calc(var(--header-height) - 20px);
			padding-top:10px;
			padding-right:10px;
			transition: transform var(--transition-duration-fast);
			cursor:pointer;
			
			&:hover{
					transform:scale(0.8);
			}
		}
	}
	
	.slideout-nav-section{
		width:100%;
		margin-top:16px;
		
		& a{
			display:block;
			width:100%;
			color:var(--color-light);
			text-decoration:none;
			padding:16px;
			box-sizing:border-box;
			
			& span{
				text-transform:uppercase;
				font-weight:700;
				font-size:var(--font-size-button);
				display:block;
			}
					
			&:hover{
				background-color:#ffffff22;
			}
					
			&.selected{
				background-color:#ffffff22;
			}
		}
		
		.secondary{
			padding-bottom:10px;
			padding-top:10px;
			& span{
				font-size:var(--font-size-info);
			}
		}
		
	}
}

@media screen and (min-width: 700px){
	body{
		--header-height:48px;
		--controls-height:48px;
	}

	.app-container {
		.app-header {
			grid-template-columns: auto 16px auto 1fr auto;
			
			.logo-section{
				grid-column-start:1;
				grid-column-end:2;
			}
			
			.main-nav-section{
				grid-column-start:3;
				grid-column-end:4;
				display:block;
				
				& a{
					color:var(--color-light);
					text-decoration:none;
					padding-left:8px;
					padding-right:8px;
					box-sizing:content-box;
					height:48px;
					display:inline-block;
					transition:background-color var(--transition-duration-fast);
					user-select:none;
					
					& span{
						text-transform:uppercase;
						font-weight:700;
						font-size:16px;
						padding-top:14px;
						display:block;
					}
					
					&:hover{
						background-color:#ffffff22;
					}
					
					&.selected{
						background-color:var(--color-primary);
					}
				}
			}
			
			.mobile-hamburger-section{
				display:none;
			}
		
			.utils-section{
				.extra-menu-items{
					display:block;
				}
			}
		}
	}
	
	.slideout-menu{
		display:none;
	}
}.modal-container{
	display:flex;
	z-index:30;
	backdrop-filter:brightness(80%) blur(10px);
	width:100vw;
	height:100vh;
	position:fixed;
	top:100vh;
	left:0;
	opacity:0;
	justify-content:center;
	align-items:flex-start;
	transition:opacity 0.15s ease-out, top 0s linear 0.25s;
	padding-top:15vh;
	
	&:has(.modal.active){
		top:0;
		opacity:1;
		transition:opacity 0.25s ease-out;
	}
}

.modal{
	position:fixed;
	
	&.active{
		position:relative;
	}
}

.modal-basic{
	background-color:white;
	box-shadow: 0 0 20px #00000022;
	border-radius:var(--border-radius-normal);
	min-width:200px;
	max-width:90%;
	padding:20px;
	margin:20px;
	transition:transform 0.15s ease-out;
	transform: scale(0);
	
	&.active{
		transform: scale(1);
	}
	
	.modal-x-row{
		padding-bottom:10px;
		cursor:pointer;
		margin-left:auto;
		width:fit-content;
		text-align:right;
		font-size:var(--font-size-button);
		line-height:calc(var(--font-size-button)*0.8)
	}
}

.mobile-controls{
	background-color:var(--color-dark);
	color:white;
	border-radius:var(--border-radius-normal);
	padding:20px;
	transform: translateY(100vh);
	transition:transform 0.25s ease-out;
	
	&.active{
		transform: translateY(0);
	}
}.wavepin-artist-container{
	width:100%;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	flex-direction:column;
	align-items:center;
	padding:20px;
	box-sizing:border-box;
	
	.wavepin-artist-inner{
		background-color:white;
		color:var(--color-dark);
		border-radius: var(--border-radius-normal);
		width:100%;
		max-width:1024px;
		
		.artist-details-header{
			padding:20px;
			display:flex;
			flex-direction:column;
			flex-wrap:wrap;
			justify-content:center;
			align-items:center;
			
			.artist-image-wrapper{
				user-select:none;
				overflow:hidden;
				height:fit-content;
				width:100%;
				display:flex;
				justify-content:center;
				
				& img{
					width:100%;
					max-width:200px;
					border-radius:var(--border-radius-circle);
				}
			}
			
			.artist-main-details{
				width:100%;
				padding:20px;
				box-sizing:border-box;
				
				.content-type{
					user-select:none;
					width:100%;
					font-size:var(--font-size-body);
					font-weight:bold;
					letter-spacing: 8px;
					text-align:center;
					color: var(--color-grey-mid);
				}
				
				.artist-name{
					width:100%;
					font-size:var(--font-size-title);
					font-weight:bold;
					text-align:center;
				}
				
				.control-buttons{
					padding-top:20px;
					display:flex;
					
					.play-button{
						background-color:var(--color-primary);
						border-radius:var(--border-radius-circle);
						width:50px;
						height:50px;
						cursor:pointer;
					}
				}
			}
		}
		
		.artist-details-tab-section{
			.bio-container{
				width:100%;
				padding:10px;
				text-align:center;
			}
			
			.details-table-wrapper{
				display:flex;
				flex-direction: column;
				justify-content:center;
				
				> div{
					margin:10px auto;
					width:60%;
					min-width: min(100%, 600px);
					
				}
			}
		}
	}
	
	.artist-works-divider{
		display: flex;
		flex-direction: row;
		align-items: center;
		width:100%;
		margin:10px 0px;
		color:var(--color-grey-mid);
		max-width:1024px;
		
		& div{
			padding:0 20px;
		}
		
		& hr{
			flex-grow:1;
		}
	}
	
	.artist-works{
		width:100%;
		max-width:1024px;
		background-color:white;
		border-radius: var(--border-radius-normal);
		padding:10px;
		box-sizing:border-box;
	}
}

@media screen and (min-width: 700px){
	.wavepin-artist-container{
		
		.artist-works{
			padding:0;
		}
	}
}.wavepin-collection-container{
	width:100%;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	flex-direction:column;
	align-items:center;
	padding:20px;
	box-sizing:border-box;
	
	.wavepin-collection-inner{
		background-color:white;
		color:var(--color-dark);
		border-radius: var(--border-radius-normal);
		width:100%;
		max-width:1024px;
		
		.collection-details-header{
			padding:20px;
			display:flex;
			flex-direction:column;
			flex-wrap:wrap;
			justify-content:center;
			align-items:center;
			
			.collection-image-wrapper{
				user-select:none;
				overflow:hidden;
				height:fit-content;
				width:80%;
				
				& img{
					width:100%;
					border-radius:var(--border-radius-normal);
				}
			}
			
			.collection-main-details{
				width:100%;
				padding:20px;
				box-sizing:border-box;
				
				.content-type{
					user-select:none;
					text-transform:uppercase;
					width:100%;
					font-size:var(--font-size-body);
					font-weight:bold;
					letter-spacing: 8px;
					text-align:center;
					color: var(--color-grey-mid);
				}
				
				.collection-title{
					width:100%;
					font-size:var(--font-size-title);
					font-weight:bold;
					text-align:center;
				}
				
				.control-buttons{
					padding-top:20px;
					display:flex;
					
					.play-button{
						background-color:var(--color-primary);
						border-radius:var(--border-radius-circle);
						width:50px;
						height:50px;
						cursor:pointer;
					}
				}
			}
		}
		
		.collection-details-tab-section{
			.artists-container{
				width:100%;
				display:flex;
				justify-content:center;
				flex-direction:row;
				
				.artist-chip{
					text-decoration:none;
					color:var(--color-dark);
					padding:20px;
					width:160px;
					
					.artist-logo{
						width:100%;
						display:flex;
						justify-content:center;
						padding-bottom:10px;
						
						img{
							width:50%;
							border-radius:var(--border-radius-circle);
						}
					}
					
					.artist-name{
						width:100%;
						text-align:center;
						font-weight:bold;
						font-size:var(--font-size-body);
					}
					
					.artist-role{
						width:100%;
						text-align:center;
						font-size:var(--font-size-info);
						opacity:0.7;
					}
				}
			}
			
			.description-container{
				width:100%;
				padding:10px;
				text-align:center;
			}
			
			.details-table-wrapper{
				display:flex;
				flex-direction: column;
				justify-content:center;
				
				> div{
					margin:10px auto;
					width:60%;
					min-width: min(100%, 600px);
					
				}
			}
		}
	}
	
	.collection-items-divider{
		display: flex;
		flex-direction: row;
		align-items: center;
		width:100%;
		max-width:1024px;
		margin:10px 0px;
		color:var(--color-grey-mid);
		
		& div{
			padding:0 20px;
		}
		
		& hr{
			flex-grow:1;
		}
	}
	
	.collection-items{
		width:100%;
		max-width:1024px;
		background-color:white;
		border-radius: var(--border-radius-normal);
		padding:10px;
		box-sizing:border-box;
	}
}

@media screen and (min-width: 700px){
	.wavepin-collection-container{
		.wavepin-collection-inner{
			
			.collection-details-header{
				flex-direction:row;
				align-items:flex-start;
				
				.collection-image-wrapper{
					width:30%;
				}
				
				.collection-main-details{
					width:70%;
					.content-type{
						text-align:left;
					}
					
					.collection-title{
						text-align:left;
					}
				}
			}
		}
		
		.collection-items{
			padding:0;
		}
	}
}.copy-container{
	width:100%;
	display:flex;
	justify-content:center;
	
	.copy-container-inner{
		max-width:600px;
		margin:20px;
		
		& h1{
			text-align:center;
		}
	}
}.details-table{
	display:grid;
	grid-template-columns: 1fr 1fr;
	font-weight:bold;
	border-radius:var(--border-radius-normal);
	background-color:var(--color-light);
	border: 2px var(--color-light) solid;
	overflow:hidden;
	grid-gap:2px;
	margin:10px;
	
	.detail-name{
		grid-column-start: 1;
		grid-column-end: 2;
		padding:4px 10px;
		text-transform: uppercase;
		background-color:#fff;
	}
	
	.detail-value{
		grid-column-start: 2;
		grid-column-end: 3;
		padding:4px 10px;
		color:var(--color-grey-mid);
		background-color:#fff;
	}
}

.details-vert-table{
	display:grid;
	margin:10px;
	min-width:50%;
	grid-template-columns: 1fr;
	font-weight:bold;
	border-radius:var(--border-radius-normal);
	background-color:var(--color-light);
	border: 2px var(--color-light) solid;
	grid-gap:2px;
	overflow:hidden;
	max-width:100%;
	
	.detail-name{
		grid-column-start: 1;
		grid-column-end: 2;
		padding:4px 10px;
		text-transform: uppercase;
		background-color:#fff;
		text-align:center;
		max-width:100%;
	}
	
	.detail-value{
		grid-column-start: 1;
		grid-column-end: 2;
		padding:4px 10px;
		color:var(--color-grey-mid);
		background-color:#fff;
		text-align:center;
		max-width:100%;
		overflow:hidden;
	}
}.home-page{
	width:100%;
	height:100vh;
	margin-top:calc(0px - var(--header-height));
	background:linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	user-select:none;
	
	.header-text{
		width:100%;
		text-align:center;
		font-size:var(--font-size-over);
		color:var(--color-light);
		padding-top:10vh;
		
		& h1{
			margin:0;
		}
	}
	
	.subheader-text{
		width:100%;
		text-align:center;
		font-size:var(--font-size-title);
		font-weight:bold;
		color:var(--color-light);
	}
	
	.cta-button-container{
		width:100%;
		display:flex;
		justify-content:center;
		gap:20px;
		
		.cta-button{
			display:block;
			padding: 10px 30px;
			border-radius:var(--border-radius-normal);
			border: 3px solid var(--color-light);
			background-color:var(--color-light);
			color:var(--color-primary);
			font-size:var(--font-size-button);
			font-weight:bold;
			cursor:pointer;
			text-decoration:none;
			transition:transform var(--transition-duration-fast);
			
			&.outline{
				background-color:#00000000;
				color:var(--color-light);
			}
			
			&:hover{
				transform: scale(1.05);
				
			}
		}
	}
}.tab-switcher{
	.tabs{
		display:flex;
		width:100%;
		border-bottom: 2px var(--color-light) solid;
		
		.tab{
			cursor:pointer;
			user-select:none;
			flex-grow:1;
			text-align:center;
			font-size:var(--font-size-body);
			text-transform:uppercase;
			padding:2px;
			
			&.active{
				background-color:var(--color-light);
			}
		}
	}
	
	.pages{
		transition: height 0.25s ease-in;
		height: calc-size(auto);
		.page{
			padding:20px;
			display:none;
			
			&.active{
				display:block;
			}
		}
	}
}.wavepin-track-container{
	width:100%;
	display:flex;
	justify-content:center;
	.wavepin-track-inner{
		background-color:white;
		color:var(--color-dark);
		border-radius: var(--border-radius-normal);
		width:100%;
		margin:20px;
		max-width:1024px;
		
		.track-details-header{
			padding:20px;
			display:flex;
			flex-direction:column;
			flex-wrap:wrap;
			justify-content:center;
			align-items:center;
			
			.track-image-wrapper{
				user-select:none;
				overflow:hidden;
				height:fit-content;
				width:80%;
				
				& img{
					width:100%;
					border-radius:var(--border-radius-normal);
				}
			}
			
			.track-main-details{
				width:100%;
				padding:20px;
				box-sizing:border-box;
				
				.content-type{
					user-select:none;
					width:100%;
					font-size:var(--font-size-body);
					font-weight:bold;
					letter-spacing: 8px;
					text-align:center;
					color: var(--color-grey-mid);
				}
				
				.track-title{
					width:100%;
					font-size:var(--font-size-title);
					font-weight:bold;
					text-align:center;
				}
				
				.control-buttons{
					padding-top:20px;
					display:flex;
					align-items:center;
					gap:20px;
					
					.play-button{
						background-color:var(--color-primary);
						border-radius:100vh;
						width:50px;
						height:50px;
						cursor:pointer;
					}
					
					.other-button{
						background-color:var(--color-light);
						border-radius:100vh;
						width:40px;
						height:40px;
						cursor:pointer;
						
						& svg{
							width:80%;
							height:80%;
							fill:var(--color-dark);
							margin:10% 10% 10% 10%;
							
							& path{
								fill:var(--color-dark);
							}
						}
					}
					
					.share-button{
						
						& svg{
							margin:10% 10% 10% 5%;
						}
					}
				}
			}
		}
		
		.track-details-tab-section{
			.artists-container{
				width:100%;
				display:flex;
				justify-content:center;
				flex-direction:row;
				flex-wrap:wrap;
				
				.artist-chip{
					text-decoration:none;
					color:var(--color-dark);
					padding:10px;
					width:80px;
					
					.artist-logo{
						width:100%;
						display:flex;
						justify-content:center;
						padding-bottom:10px;
						
						& img{
							width:50%;
							border-radius:9999px;
						}
					}
					
					.artist-name{
						width:100%;
						text-align:center;
						font-weight:bold;
						font-size:var(--font-size-body);
					}
					
					.artist-role{
						width:100%;
						text-align:center;
						font-size:var(--font-size-info);
						opacity:0.7;
					}
				}
			}
			
			.description-container{
				width:100%;
				padding:10px;
				text-align:center;
			}
			
			.details-table-wrapper{
				display:flex;
				flex-direction: column;
				justify-content:center;
				
				> div{
					margin:10px auto;
					width:60%;
					min-width: min(100%, 600px);
					
				}
			}
		}
	}
}

@media screen and (min-width: 700px){
	.wavepin-track-container{
		.wavepin-track-inner{
			
			.track-details-header{
				flex-direction:row;
				align-items:flex-start;
				
				.track-image-wrapper{
					width:30%;
				}
				
				.track-main-details{
					width:70%;
					.content-type{
						text-align:left;
					}
					
					.track-title{
						text-align:left;
					}
				}
			}
			
			.track-details-tab-section{
				.artists-container{
					.artist-chip{
						width:140px;
					}
				}
			}
			
		}
	}
}.listed-item{
	padding:10px;
	width:100%;
	display:grid;
	grid-template-columns: 2fr 7fr;
	gap:20px;
	text-decoration:none;
	color:var(--color-dark);
	box-sizing:border-box;
	
	.image-section{
		grid-column-start:1;
		grid-column-end:2;
		display:block;
		
		& img{
			width: 100%;
			border-radius: var(--border-radius-normal);
		}
	}
	
	.details-section{
		grid-column-start:2;
		grid-column-end:3;
		
		.content-type{
			display:block;
			text-decoration:none;
			font-size:var(--font-size-info);
			font-weight:bold;
			letter-spacing: 5px;
			color: var(--color-grey-mid);
			text-transform:uppercase;
			width:fit-content;
		}
		
		.track-display-name{
			display:inline-block;
			text-decoration:none;
			color:var(--color-dark);
			font-size:var(--font-size-body);
			font-weight:bold;
			width:fit-content;
		}
		
		.button-section{
			display:none;
			padding-top:20px;
			align-items:center;
			gap:20px;
			width:fit-content;
			
			.play-button{
				background-color:var(--color-primary);
				border-radius:var(--border-radius-circle);
				width:50px;
				height:50px;
				cursor:pointer;
			}
			
			.share-button{
				background-color:var(--color-light);
				border-radius:var(--border-radius-circle);
				width:40px;
				height:40px;
				cursor:pointer;
				
				& svg{
					width:80%;
					height:80%;
					fill:var(--color-dark);
					margin:10% 10% 10% 5%;
					
					& path{
						fill:var(--color-dark);
					}
				}
			}
		}
	}
}

.wavepin-content-list.grid{
	display:grid;
	grid-template-columns: repeat(2,1fr);
	
	.listed-item{
		grid-template-columns: 1fr;
		transition:transform var(--transition-duration-fast);
		
		&:hover{
			transform:scale(1.05);
		}
		
		.image-section{
			width:100%;
			grid-row-start:1;
			grid-row-end:2;
			grid-column-start:1;
			grid-column-end:2;
		}
		
		.details-section{
			opacity:1;
			grid-column-start:1;
			grid-column-end:2;
			grid-row-start:2;
			grid-row-end:3;
			height:100%;
			width:100%;
			overflow:hidden;
		
			.content-type{
				font-size:var(--font-size-micro);
			}
			
			.track-display-name{
				font-size:var(--font-size-info);
			}
			
			.button-section{
				display:none;
			}
		}
	}
}

@media screen and (min-width: 496px){
	
	.wavepin-content-list.grid{
		grid-template-columns: repeat(3,1fr);
	}
}

@media screen and (min-width: 700px){
	.listed-item{
		padding:20px;
		
		.details-section{
			
			.content-type{
				letter-spacing: 8px;
			}
			
			.button-section{
				display:flex;
			}
		}
	}
	
	.wavepin-content-list.grid{
		grid-template-columns: repeat(4,1fr);
	}
}.listing-view-toolbar{
	width:100%;
	max-width:1024px;
	//background-color:white;
	border-radius: var(--border-radius-normal);
	margin:20px 0;
	padding:10px 20px;
	box-sizing:border-box;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:flex-start;
	
	.option-label{
		color:var(--color-grey-mid);
		font-size:var(--font-size-label);
		font-weight:bold;
		margin-right:10px;
	}
	
	.display-style-options{
		height:20px;
		display:grid;
		grid-template-columns:20px 20px;
		gap:10px;
		
		.display-style-option{
			cursor:pointer;

			& svg{
				height:var(--font-size-label);

				& g{
					fill:var(--color-grey-mid);
					transition:fill var(--transition-duration-fast);
				}
			}
			&.active, &:hover{
				& svg{
					& g{
						fill:var(--color-dark);
					}
				}
			}
		}
	}
}.track-download-menu{
	max-width:500px;
	
	& h3{
		font-size:var(--font-size-body);
		margin:0;
	}
	
	& p{
		font-size:var(--font-size-info);
		margin-top:5px;
		margin-bottom:20px;
	}
	
	.download-button-container{
		margin-top:40px;
		display:flex;
		flex-direction:column;
		align-items:center;
		margin-bottom:10px;
		
		.download-button{
			border-radius:var(--border-radius-normal);
			color:var(--color-light);
			background-color:var(--color-primary);
			display:block;
			padding: 10px 30px;
			text-decoration:none;
			width:300px;
			font-weight:bold;
			text-align:center;
			font-size:var(--font-size-body);
			transition:transform var(--transition-duration-fast);
			width:fit-content;
			
			&:hover{
				transform: scale(1.05);
				
			}
		}
	}
}.wavepin-content-scroller{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	padding:20px;
	box-sizing:border-box;
	width:100%;
	
	.title-text{
		width:100%;
		text-align:center;
		
	}
	
	.scroller-card{
		background-color:white;
		color:var(--color-dark);
		border-radius: var(--border-radius-normal);
		width:100%;
		max-width:1024px;
		overflow-x:scroll;
		display:flex;
		flex-direction:row;
		
		.scroller-page{
			width:100%;
			flex-shrink:0;
		}
	}
}.wavepin-content-scroller-chip{
	text-decoration:none;
	padding-left:20px;
	padding-right:20px;
	
	.img-section{
		width:100px;
		display:flex;
		flex-direction:row;
		justify-content:center;
		padding:20px;
		box-sizing:border-box;
		
		.image{
			border-radius:var(--border-radius-normal);
			height:80px;
			width:80px;
		}
		
		.rounded-image{
			border-radius:var(--border-radius-circle);
		}
	}
	
	.text-section{
		width:100%;
		.content-name{
			width:100%;
			text-align:center;
			text-decoration:none;
			color:var(--color-dark);
			font-size: var(--font-size-body);
			font-weight:bold;
			padding-bottom:20px;
		}
	}
}