codepediair/index.html

## index.html
	<body class="">
		<div class="absolute right-4 top-4">
			<div id="dark-mode-toggle" class="cursor-pointer">
				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-white hidden dark:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
					<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
				</svg>
				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-[#0A1122] block dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
					<path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
				</svg>
			</div>

		</div>
		<div class="bg-[#F8FAFC] dark:bg-[#0A1122] w-screen h-screen flex flex-col items-center justify-center">
			<div class="relative w-player flex flex-col rounded-xl shadow-player-light bg-player-light-background border border-player-light-border dark:shadow-player-dark dark:bg-player-dark-background dark:border-player-dark-border dark:backdrop-blur-xl">
				<div class="px-10 pt-10 pb-4 flex items-center z-50">
					<img data-amplitude-song-info="cover_art_url" class="w-24 h-24 rounded-md mr-6 border border-bg-player-light-background dark:border-cover-dark-border"/>

					<div class="flex flex-col">
						<span data-amplitude-song-info="name" class="font-sans text-lg font-medium leading-7 text-slate-900 dark:text-white"></span>
						<span data-amplitude-song-info="artist" class="font-sans text-base font-medium leading-6 text-gray-500 dark:text-gray-400"></span>
						<span data-amplitude-song-info="album" class="font-sans text-base font-medium leading-6 text-gray-500 dark:text-gray-400"></span>
					</div>
				</div>
				<div class="w-full flex flex-col px-10 pb-6 z-50">
					<input type="range" id="song-percentage-played" class="amplitude-song-slider mb-3" step=".1"/>
					<div class="flex w-full justify-between">
						<span class="amplitude-current-time text-xs font-sans tracking-wide font-medium text-sky-500 dark:text-sky-300"></span>
						<span class="amplitude-duration-time text-xs font-sans tracking-wide font-medium text-gray-500"></span>
					</div>
				</div>
				<div class="h-control-panel px-10 rounded-b-xl bg-control-panel-light-background border-t border-gray-200 flex items-center justify-between z-50 dark:bg-control-panel-dark-background dark:border-gray-900">
					<div class="cursor-pointer" id="song-saved">
						<svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M25 7C25 3.68629 22.2018 1 18.75 1C16.1692 1 13.9537 2.5017 13 4.64456C12.0463 2.5017 9.83082 1 7.25 1C3.79822 1 1 3.68629 1 7C1 14.6072 8.49219 20.1822 11.6365 22.187C12.4766 22.7226 13.5234 22.7226 14.3635 22.187C17.5078 20.1822 25 14.6072 25 7Z" stroke="#94A3B8" stroke-width="2" stroke-linejoin="round"/>
						</svg>
					</div>
					<div class="cursor-pointer amplitude-shuffle">
						<svg width="28" height="26" viewBox="0 0 28 26" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M1 20C0.447715 20 0 20.4477 0 21C0 21.5523 0.447715 22 1 22V20ZM7.75736 19.2426L8.46447 19.9497H8.46447L7.75736 19.2426ZM20.2426 6.75736L19.5355 6.05025L19.5355 6.05025L20.2426 6.75736ZM27 5L27.7071 5.70711C28.0976 5.31658 28.0976 4.68342 27.7071 4.29289L27 5ZM27 21L27.7071 21.7071C28.0976 21.3166 28.0976 20.6834 27.7071 20.2929L27 21ZM1 4C0.447715 4 0 4.44772 0 5C0 5.55228 0.447715 6 1 6V4ZM7.75736 6.75736L8.46447 6.05025L7.75736 6.75736ZM20.2426 19.2426L20.9497 18.5355L20.2426 19.2426ZM10.4645 10.8787C10.855 11.2692 11.4882 11.2692 11.8787 10.8787C12.2692 10.4882 12.2692 9.85499 11.8787 9.46447L10.4645 10.8787ZM17.5355 15.1213C17.145 14.7308 16.5118 14.7308 16.1213 15.1213C15.7308 15.5118 15.7308 16.145 16.1213 16.5355L17.5355 15.1213ZM23.7071 0.292893C23.3166 -0.0976311 22.6834 -0.0976311 22.2929 0.292893C21.9024 0.683417 21.9024 1.31658 22.2929 1.70711L23.7071 0.292893ZM22.2929 8.29289C21.9024 8.68342 21.9024 9.31658 22.2929 9.70711C22.6834 10.0976 23.3166 10.0976 23.7071 9.70711L22.2929 8.29289ZM23.7071 16.2929C23.3166 15.9024 22.6834 15.9024 22.2929 16.2929C21.9024 16.6834 21.9024 17.3166 22.2929 17.7071L23.7071 16.2929ZM22.2929 24.2929C21.9024 24.6834 21.9024 25.3166 22.2929 25.7071C22.6834 26.0976 23.3166 26.0976 23.7071 25.7071L22.2929 24.2929ZM1 22H3.51472V20H1V22ZM8.46447 19.9497L20.9497 7.46446L19.5355 6.05025L7.05025 18.5355L8.46447 19.9497ZM24.4853 6H27V4H24.4853V6ZM20.9497 7.46446C21.8874 6.52678 23.1592 6 24.4853 6V4C22.6288 4 20.8483 4.7375 19.5355 6.05025L20.9497 7.46446ZM3.51472 22C5.37123 22 7.15171 21.2625 8.46447 19.9497L7.05025 18.5355C6.11257 19.4732 4.8408 20 3.51472 20V22ZM27 20H24.4853V22H27V20ZM3.51472 4H1V6H3.51472V4ZM8.46447 6.05025C7.15171 4.7375 5.37123 4 3.51472 4V6C4.8408 6 6.11257 6.52678 7.05025 7.46446L8.46447 6.05025ZM24.4853 20C23.1592 20 21.8874 19.4732 20.9497 18.5355L19.5355 19.9497C20.8483 21.2625 22.6288 22 24.4853 22V20ZM11.8787 9.46447L8.46447 6.05025L7.05025 7.46446L10.4645 10.8787L11.8787 9.46447ZM20.9497 18.5355L17.5355 15.1213L16.1213 16.5355L19.5355 19.9497L20.9497 18.5355ZM22.2929 1.70711L26.2929 5.70711L27.7071 4.29289L23.7071 0.292893L22.2929 1.70711ZM26.2929 4.29289L22.2929 8.29289L23.7071 9.70711L27.7071 5.70711L26.2929 4.29289ZM22.2929 17.7071L26.2929 21.7071L27.7071 20.2929L23.7071 16.2929L22.2929 17.7071ZM26.2929 20.2929L22.2929 24.2929L23.7071 25.7071L27.7071 21.7071L26.2929 20.2929Z" fill="#94A3B8"/>
						</svg>
					</div>
					<div class="cursor-pointer amplitude-prev">
						<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M26 7C26 5.76393 24.5889 5.05836 23.6 5.8L11.6 14.8C10.8 15.4 10.8 16.6 11.6 17.2L23.6 26.2C24.5889 26.9416 26 26.2361 26 25V7Z" fill="#94A3B8" stroke="#94A3B8" stroke-width="2" stroke-linejoin="round"/>
							<path d="M6 5L6 27" stroke="#94A3B8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
					</div>
					<div class="cursor-pointer amplitude-play-pause w-24 h-24 rounded-full bg-white border border-play-pause-light-border shadow-xl flex items-center justify-center dark:bg-play-pause-dark-background dark:border-play-pause-dark-border">
						<svg id="play-icon" class="ml-[10px]" width="31" height="37" viewBox="0 0 31 37" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M29.6901 16.6608L4.00209 0.747111C2.12875 -0.476923 0.599998 0.421814 0.599998 2.75545V33.643C0.599998 35.9728 2.12747 36.8805 4.00209 35.6514L29.6901 19.7402C29.6901 19.7402 30.6043 19.0973 30.6043 18.2012C30.6043 17.3024 29.6901 16.6608 29.6901 16.6608Z" class="fill-slate-500 dark:fill-slate-400"/>
						</svg>

						<svg id="pause-icon" width="24" height="36" viewBox="0 0 24 36" fill="none" xmlns="http://www.w3.org/2000/svg">
							<rect width="6" height="36" rx="3" class="fill-slate-500 dark:fill-slate-400"/>
							<rect x="18" width="6" height="36" rx="3" class="fill-slate-500 dark:fill-slate-400" />
						</svg>
					</div>
					<div class="cursor-pointer amplitude-next">
						<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M6 7C6 5.76393 7.41115 5.05836 8.4 5.8L20.4 14.8C21.2 15.4 21.2 16.6 20.4 17.2L8.4 26.2C7.41115 26.9416 6 26.2361 6 25V7Z" fill="#94A3B8" stroke="#94A3B8" stroke-width="2" stroke-linejoin="round"/>
							<path d="M26 5L26 27" stroke="#94A3B8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
					</div>
					<div class="cursor-pointer amplitude-repeat-song">
						<svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M17.7071 15.7071C18.0976 15.3166 18.0976 14.6834 17.7071 14.2929C17.3166 13.9024 16.6834 13.9024 16.2929 14.2929L17.7071 15.7071ZM13 19L12.2929 18.2929C11.9024 18.6834 11.9024 19.3166 12.2929 19.7071L13 19ZM16.2929 23.7071C16.6834 24.0976 17.3166 24.0976 17.7071 23.7071C18.0976 23.3166 18.0976 22.6834 17.7071 22.2929L16.2929 23.7071ZM19.9359 18.7035L19.8503 17.7072L19.9359 18.7035ZM8.95082 19.9005C9.50243 19.9277 9.97163 19.5025 9.99879 18.9509C10.026 18.3993 9.6008 17.9301 9.04918 17.9029L8.95082 19.9005ZM6.06408 18.7035L5.97851 19.6998L6.06408 18.7035ZM1.07501 13.4958L0.075929 13.5387L1.07501 13.4958ZM1.07501 6.50423L0.0759292 6.46127L1.07501 6.50423ZM6.06409 1.29649L6.14965 2.29282L6.06409 1.29649ZM19.9359 1.29649L19.8503 2.29283L19.9359 1.29649ZM24.925 6.50423L23.9259 6.54718L24.925 6.50423ZM24.925 13.4958L25.9241 13.5387V13.5387L24.925 13.4958ZM16.2929 14.2929L12.2929 18.2929L13.7071 19.7071L17.7071 15.7071L16.2929 14.2929ZM12.2929 19.7071L16.2929 23.7071L17.7071 22.2929L13.7071 18.2929L12.2929 19.7071ZM19.8503 17.7072C17.5929 17.901 15.3081 18 13 18V20C15.3653 20 17.7072 19.8986 20.0215 19.6998L19.8503 17.7072ZM9.04918 17.9029C8.07792 17.8551 7.1113 17.7898 6.14964 17.7072L5.97851 19.6998C6.96438 19.7845 7.95525 19.8515 8.95082 19.9005L9.04918 17.9029ZM2.07408 13.4528C2.02486 12.3081 2 11.157 2 10H0C0 11.1856 0.0254804 12.3654 0.075929 13.5387L2.07408 13.4528ZM2 10C2 8.84302 2.02486 7.69192 2.07408 6.54718L0.0759292 6.46127C0.0254806 7.63461 0 8.81436 0 10H2ZM6.14965 2.29282C8.4071 2.09896 10.6919 2 13 2V0C10.6347 0 8.29281 0.101411 5.97853 0.30016L6.14965 2.29282ZM13 2C15.3081 2 17.5929 2.09896 19.8503 2.29283L20.0215 0.30016C17.7072 0.101411 15.3653 0 13 0V2ZM23.9259 6.54718C23.9751 7.69192 24 8.84302 24 10H26C26 8.81436 25.9745 7.63461 25.9241 6.46127L23.9259 6.54718ZM24 10C24 11.157 23.9751 12.3081 23.9259 13.4528L25.9241 13.5387C25.9745 12.3654 26 11.1856 26 10H24ZM19.8503 2.29283C22.092 2.48534 23.8293 4.29889 23.9259 6.54718L25.9241 6.46127C25.7842 3.20897 23.2653 0.578736 20.0215 0.30016L19.8503 2.29283ZM6.14964 17.7072C3.90797 17.5147 2.17075 15.7011 2.07408 13.4528L0.075929 13.5387C0.215764 16.791 2.7347 19.4213 5.97851 19.6998L6.14964 17.7072ZM2.07408 6.54718C2.17075 4.29889 3.90798 2.48534 6.14965 2.29282L5.97853 0.30016C2.73471 0.578735 0.215764 3.20897 0.0759292 6.46127L2.07408 6.54718ZM20.0215 19.6998C23.2653 19.4213 25.7842 16.791 25.9241 13.5387L23.9259 13.4528C23.8292 15.7011 22.092 17.5147 19.8503 17.7072L20.0215 19.6998Z" fill="#94A3B8"/>
						</svg>
					</div>
					<div>
						<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M7.5 7H24.5V5H7.5V7ZM7.5 12H24.5V10H7.5V12ZM24.5 12C26.433 12 28 10.433 28 8.5H26C26 9.32843 25.3284 10 24.5 10V12ZM7.5 10C6.67157 10 6 9.32843 6 8.5H4C4 10.433 5.567 12 7.5 12V10ZM24.5 7C25.3284 7 26 7.67157 26 8.5H28C28 6.567 26.433 5 24.5 5V7ZM7.5 5C5.567 5 4 6.567 4 8.5H6C6 7.67157 6.67157 7 7.5 7V5Z" fill="#94A3B8"/>
							<path d="M5 15C4.44772 15 4 15.4477 4 16C4 16.5523 4.44772 17 5 17V15ZM27 17C27.5523 17 28 16.5523 28 16C28 15.4477 27.5523 15 27 15V17ZM5 17H27V15H5V17Z" fill="#94A3B8"/>
							<path d="M5 20C4.44772 20 4 20.4477 4 21C4 21.5523 4.44772 22 5 22V20ZM27 22C27.5523 22 28 21.5523 28 21C28 20.4477 27.5523 20 27 20V22ZM5 22H27V20H5V22Z" fill="#94A3B8"/>
							<path d="M5 25C4.44772 25 4 25.4477 4 26C4 26.5523 4.44772 27 5 27V25ZM27 27C27.5523 27 28 26.5523 28 26C28 25.4477 27.5523 25 27 25V27ZM5 27H27V25H5V27Z" fill="#94A3B8"/>
						</svg>
					</div>
				</div>
				<div class="hidden top-14 w-full absolute ml-auto mr-auto left-0 right-0 text-center max-w-lg h-72 rounded-full bg-highlight blur-2xl dark:block">

				</div>
			</div>
			<div class="flex items-center justify-center mt-10">
				<a class="text-xs leading-5 font-medium text-sky-600 dark:text-sky-400 bg-sky-400/10 rounded-full py-1 px-3 flex items-center hover:bg-sky-400/20" target="_blank" href="https://tailwindcss.com/">
					Designed With: <strong class="font-semibold">Tailwind CSS v3.0</strong><svg width="3" height="6" class="ml-3 overflow-visible text-sky-300 dark:text-sky-400" aria-hidden="true"><path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
				</a>

				<a class="ml-5 text-xs leading-5 font-medium text-emerald-600 dark:text-emerald-400 bg-emerald-400/10 rounded-full py-1 px-3 flex items-center hover:bg-emerald-400/20" target="_blank" href="https://github.com/serversideup/amplitudejs">
					Functionality By: <strong class="font-semibold">AmplitudeJS v5.2</strong><svg width="3" height="6" class="ml-3 overflow-visible text-emerald-300 dark:text-emerald-400" aria-hidden="true"><path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
				</a>
			</div>

		</div>
	</body>

## script.js
let theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

if( theme == 'dark' ){
    document.documentElement.classList.add('dark')
}

document.getElementById('dark-mode-toggle').addEventListener('click', function(){
   document.documentElement.classList.toggle('dark')
});


document.getElementById('song-saved').addEventListener('click', function(){
	document.getElementById('song-saved').classList.toggle('saved');
});


Amplitude.init({
    "bindings": {
        37: 'prev',
        39: 'next',
        32: 'play_pause'
    },
    "callbacks": {
        timeupdate: function(){
            let percentage = Amplitude.getSongPlayedPercentage();

            if( isNaN( percentage ) ){
                percentage = 0;
            }

            /**
             * Massive Help from: https://nikitahl.com/style-range-input-css
             */
            let slider = document.getElementById('song-percentage-played');
            slider.style.backgroundSize = percentage + '% 100%';
        }
    },
    "songs": [
		{
			"name": "First Snow",
			"artist": "Emancipator",
			"album": "Soon It Will Be Cold Enough",
			"url": "https://521dimensions.com/song/FirstSnow-Emancipator.mp3",
			"cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/soon-it-will-be-cold-enough.jpg"
		},
		{
			"name": "Intro / Sweet Glory",
			"artist": "Jimkata",
			"album": "Die Digital",
			"url": "https://521dimensions.com/song/IntroSweetGlory-Jimkata.mp3",
			"cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/die-digital.jpg"
		},
		{
			"name": "Offcut #6",
			"artist": "Little People",
			"album": "We Are But Hunks of Wood Remixes",
			"url": "https://521dimensions.com/song/Offcut6-LittlePeople.mp3",
			"cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/we-are-but-hunks-of-wood.jpg"
		},
		{
			"name": "Dusk To Dawn",
			"artist": "Emancipator",
			"album": "Dusk To Dawn",
			"url": "https://521dimensions.com/song/DuskToDawn-Emancipator.mp3",
			"cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/from-dusk-to-dawn.jpg"
		},
		{
			"name": "Anthem",
			"artist": "Emancipator",
			"album": "Soon It Will Be Cold Enough",
			"url": "https://521dimensions.com/song/Anthem-Emancipator.mp3",
			"cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/soon-it-will-be-cold-enough.jpg"
		}
    ]
});

window.onkeydown = function(e) {
    return !(e.keyCode == 32);
};

## style.css
/*
! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/

html {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
Ensure the default browser behavior of the `hidden` attribute.
*/

[hidden] {
  display: none;
}

*, ::before, ::after {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.right-4 {
  right: 1rem;
}

.top-4 {
  top: 1rem;
}

.top-14 {
  top: 3.5rem;
}

.left-0 {
  left: 0px;
}

.right-0 {
  right: 0px;
}

.z-50 {
  z-index: 50;
}

.mr-6 {
  margin-right: 1.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.ml-\[10px\] {
  margin-left: 10px;
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

.ml-3 {
  margin-left: 0.75rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.ml-5 {
  margin-left: 1.25rem;
}

.block {
  display: block;
}

.flex {
  display: flex;
}

.hidden {
  display: none;
}

.h-6 {
  height: 1.5rem;
}

.h-screen {
  height: 100vh;
}

.h-24 {
  height: 6rem;
}

.h-control-panel {
  height: 4.5rem;
}

.h-72 {
  height: 18rem;
}

.w-6 {
  width: 1.5rem;
}

.w-screen {
  width: 100vw;
}

.w-player {
  width: 640px;
}

.w-24 {
  width: 6rem;
}

.w-full {
  width: 100%;
}

.max-w-lg {
  max-width: 32rem;
}

.cursor-pointer {
  cursor: pointer;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.overflow-visible {
  overflow: visible;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-b-xl {
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

.border {
  border-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-player-light-border {
  border-color: rgba(15, 23, 42, 0.06);
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
}

.border-play-pause-light-border {
  border-color: rgba(15, 23, 42, 0.06);
}

.bg-\[\#F8FAFC\] {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
}

.bg-player-light-background {
  --tw-bg-opacity: 1;
  background-color: rgb(252 252 253 / var(--tw-bg-opacity));
}

.bg-control-panel-light-background {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-highlight {
  background-color: rgba(56, 189, 248, 0.17);
}

.bg-sky-400\/10 {
  background-color: rgb(56 189 248 / 0.1);
}

.bg-emerald-400\/10 {
  background-color: rgb(52 211 153 / 0.1);
}

.fill-slate-500 {
  fill: #64748b;
}

.stroke-white {
  stroke: #fff;
}

.stroke-\[\#0A1122\] {
  stroke: #0A1122;
}

.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.pt-10 {
  padding-top: 2.5rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.text-center {
  text-align: center;
}

.font-sans {
  font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.leading-7 {
  line-height: 1.75rem;
}

.leading-6 {
  line-height: 1.5rem;
}

.leading-5 {
  line-height: 1.25rem;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.text-sky-500 {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity));
}

.text-sky-600 {
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / var(--tw-text-opacity));
}

.text-sky-300 {
  --tw-text-opacity: 1;
  color: rgb(125 211 252 / var(--tw-text-opacity));
}

.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity));
}

.text-emerald-300 {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity));
}

.shadow-player-light {
  --tw-shadow: 0px 15px 25px rgba(15, 23, 42, 0.1), 0px 5px 10px rgba(15, 23, 42, 0.04);
  --tw-shadow-colored: 0px 15px 25px var(--tw-shadow-color), 0px 5px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.blur-2xl {
  --tw-blur: blur(40px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/*
    Massive help from: https://nikitahl.com/style-range-input-css
*/

input[type="range"] {
  -webkit-appearance: none;
  height: 8px;
  background: #F1F5F9;
  border-radius: 5px;
  background-image: linear-gradient(#38BDF8, #38BDF8);
  background-size: 0% 100%;
  background-repeat: no-repeat;
}

html.dark input[type="range"]{
  background: #0F172A;
  background-image: linear-gradient(#38BDF8, #38BDF8);
  background-size: 0% 100%;
  box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.06);
  background-repeat: no-repeat;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: none;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: ew-resize;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
  -webkit-transition: background .3s ease-in-out;
  transition: background .3s ease-in-out;
}

html.dark input[type="range"]::-webkit-slider-thumb,
html.dark input[type="range"]::-moz-range-thumb,
html.dark input[type="range"]::-ms-thumb {
  background: #E2E8F0;
}

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-moz-range-track,
input[type="range"]::-ms-track {
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

div#song-saved.saved svg path{
  fill: #38BDF8;
  stroke: #38BDF8;
}

div.amplitude-play-pause.amplitude-playing #pause-icon{
  display: block;
}

div.amplitude-play-pause.amplitude-paused #pause-icon{
  display: none;
}

div.amplitude-play-pause.amplitude-paused #play-icon{
  display: block;
}

div.amplitude-play-pause.amplitude-playing #play-icon{
  display: none;
}

div.amplitude-shuffle.amplitude-shuffle-on svg path{
  fill: #38BDF8;
}

div.amplitude-repeat-song.amplitude-repeat-song-on svg path{
  fill: #38BDF8;
}

.hover\:bg-sky-400\/20:hover {
  background-color: rgb(56 189 248 / 0.2);
}

.hover\:bg-emerald-400\/20:hover {
  background-color: rgb(52 211 153 / 0.2);
}

.dark .dark\:block {
  display: block;
}

.dark .dark\:hidden {
  display: none;
}

.dark .dark\:border-player-dark-border {
  border-color: rgba(255, 255, 255, 0.16);
}

.dark .dark\:border-cover-dark-border {
  border-color: rgba(255, 255, 255, 0.1);;
}

.dark .dark\:border-gray-900 {
  --tw-border-opacity: 1;
  border-color: rgb(17 24 39 / var(--tw-border-opacity));
}

.dark .dark\:border-play-pause-dark-border {
  border-color: rgba(255, 255, 255, 0.06);
}

.dark .dark\:bg-\[\#0A1122\] {
  --tw-bg-opacity: 1;
  background-color: rgb(10 17 34 / var(--tw-bg-opacity));
}

.dark .dark\:bg-player-dark-background {
  background-color: rgba(30, 41, 59, 0.7);
}

.dark .dark\:bg-control-panel-dark-background {
  background-color: rgba(23, 31, 50, 0.5);;
}

.dark .dark\:bg-play-pause-dark-background {
  --tw-bg-opacity: 1;
  background-color: rgb(47 59 79 / var(--tw-bg-opacity));
}

.dark .dark\:fill-slate-400 {
  fill: #94a3b8;
}

.dark .dark\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.dark .dark\:text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}

.dark .dark\:text-sky-300 {
  --tw-text-opacity: 1;
  color: rgb(125 211 252 / var(--tw-text-opacity));
}

.dark .dark\:text-sky-400 {
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity));
}

.dark .dark\:text-sky-400\/70 {
  color: rgb(56 189 248 / 0.7);
}

.dark .dark\:text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity));
}

.dark .dark\:shadow-player-dark {
  --tw-shadow: inset 0px 2px 4px rgba(255, 255, 255, 0.06);;
  --tw-shadow-colored: inset 0px 2px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.dark .dark\:backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

@media (min-width: 1280px) {
  .xl\:flex {
    display: flex;
  }
}
	<body class="">
	<div class="absolute right-4 top-4">
	<div id="dark-mode-toggle" class="cursor-pointer">
	<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-white hidden dark:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
	<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
	</svg>
	<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-[#0A1122] block dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
	<path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
	</svg>
	</div>

	</div>
	<div class="bg-[#F8FAFC] dark:bg-[#0A1122] w-screen h-screen flex flex-col items-center justify-center">
	<div class="relative w-player flex flex-col rounded-xl shadow-player-light bg-player-light-background border border-player-light-border dark:shadow-player-dark dark:bg-player-dark-background dark:border-player-dark-border dark:backdrop-blur-xl">
	<div class="px-10 pt-10 pb-4 flex items-center z-50">
	<img data-amplitude-song-info="cover_art_url" class="w-24 h-24 rounded-md mr-6 border border-bg-player-light-background dark:border-cover-dark-border"/>

	<div class="flex flex-col">
	<span data-amplitude-song-info="name" class="font-sans text-lg font-medium leading-7 text-slate-900 dark:text-white"></span>
	<span data-amplitude-song-info="artist" class="font-sans text-base font-medium leading-6 text-gray-500 dark:text-gray-400"></span>
	<span data-amplitude-song-info="album" class="font-sans text-base font-medium leading-6 text-gray-500 dark:text-gray-400"></span>
	</div>
	</div>
	<div class="w-full flex flex-col px-10 pb-6 z-50">
	<input type="range" id="song-percentage-played" class="amplitude-song-slider mb-3" step=".1"/>
	<div class="flex w-full justify-between">
	<span class="amplitude-current-time text-xs font-sans tracking-wide font-medium text-sky-500 dark:text-sky-300"></span>
	<span class="amplitude-duration-time text-xs font-sans tracking-wide font-medium text-gray-500"></span>
	</div>
	</div>
	<div class="h-control-panel px-10 rounded-b-xl bg-control-panel-light-background border-t border-gray-200 flex items-center justify-between z-50 dark:bg-control-panel-dark-background dark:border-gray-900">
	<div class="cursor-pointer" id="song-saved">
	<svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M25 7C25 3.68629 22.2018 1 18.75 1C16.1692 1 13.9537 2.5017 13 4.64456C12.0463 2.5017 9.83082 1 7.25 1C3.79822 1 1 3.68629 1 7C1 14.6072 8.49219 20.1822 11.6365 22.187C12.4766 22.7226 13.5234 22.7226 14.3635 22.187C17.5078 20.1822 25 14.6072 25 7Z" stroke="#94A3B8" stroke-width="2" stroke-linejoin="round"/>
	</svg>
	</div>
	<div class="cursor-pointer amplitude-shuffle">
	<svg width="28" height="26" viewBox="0 0 28 26" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M1 20C0.447715 20 0 20.4477 0 21C0 21.5523 0.447715 22 1 22V20ZM7.75736 19.2426L8.46447 19.9497H8.46447L7.75736 19.2426ZM20.2426 6.75736L19.5355 6.05025L19.5355 6.05025L20.2426 6.75736ZM27 5L27.7071 5.70711C28.0976 5.31658 28.0976 4.68342 27.7071 4.29289L27 5ZM27 21L27.7071 21.7071C28.0976 21.3166 28.0976 20.6834 27.7071 20.2929L27 21ZM1 4C0.447715 4 0 4.44772 0 5C0 5.55228 0.447715 6 1 6V4ZM7.75736 6.75736L8.46447 6.05025L7.75736 6.75736ZM20.2426 19.2426L20.9497 18.5355L20.2426 19.2426ZM10.4645 10.8787C10.855 11.2692 11.4882 11.2692 11.8787 10.8787C12.2692 10.4882 12.2692 9.85499 11.8787 9.46447L10.4645 10.8787ZM17.5355 15.1213C17.145 14.7308 16.5118 14.7308 16.1213 15.1213C15.7308 15.5118 15.7308 16.145 16.1213 16.5355L17.5355 15.1213ZM23.7071 0.292893C23.3166 -0.0976311 22.6834 -0.0976311 22.2929 0.292893C21.9024 0.683417 21.9024 1.31658 22.2929 1.70711L23.7071 0.292893ZM22.2929 8.29289C21.9024 8.68342 21.9024 9.31658 22.2929 9.70711C22.6834 10.0976 23.3166 10.0976 23.7071 9.70711L22.2929 8.29289ZM23.7071 16.2929C23.3166 15.9024 22.6834 15.9024 22.2929 16.2929C21.9024 16.6834 21.9024 17.3166 22.2929 17.7071L23.7071 16.2929ZM22.2929 24.2929C21.9024 24.6834 21.9024 25.3166 22.2929 25.7071C22.6834 26.0976 23.3166 26.0976 23.7071 25.7071L22.2929 24.2929ZM1 22H3.51472V20H1V22ZM8.46447 19.9497L20.9497 7.46446L19.5355 6.05025L7.05025 18.5355L8.46447 19.9497ZM24.4853 6H27V4H24.4853V6ZM20.9497 7.46446C21.8874 6.52678 23.1592 6 24.4853 6V4C22.6288 4 20.8483 4.7375 19.5355 6.05025L20.9497 7.46446ZM3.51472 22C5.37123 22 7.15171 21.2625 8.46447 19.9497L7.05025 18.5355C6.11257 19.4732 4.8408 20 3.51472 20V22ZM27 20H24.4853V22H27V20ZM3.51472 4H1V6H3.51472V4ZM8.46447 6.05025C7.15171 4.7375 5.37123 4 3.51472 4V6C4.8408 6 6.11257 6.52678 7.05025 7.46446L8.46447 6.05025ZM24.4853 20C23.1592 20 21.8874 19.4732 20.9497 18.5355L19.5355 19.9497C20.8483 21.2625 22.6288 22 24.4853 22V20ZM11.8787 9.46447L8.46447 6.05025L7.05025 7.46446L10.4645 10.8787L11.8787 9.46447ZM20.9497 18.5355L17.5355 15.1213L16.1213 16.5355L19.5355 19.9497L20.9497 18.5355ZM22.2929 1.70711L26.2929 5.70711L27.7071 4.29289L23.7071 0.292893L22.2929 1.70711ZM26.2929 4.29289L22.2929 8.29289L23.7071 9.70711L27.7071 5.70711L26.2929 4.29289ZM22.2929 17.7071L26.2929 21.7071L27.7071 20.2929L23.7071 16.2929L22.2929 17.7071ZM26.2929 20.2929L22.2929 24.2929L23.7071 25.7071L27.7071 21.7071L26.2929 20.2929Z" fill="#94A3B8"/>
	</svg>
	</div>
	<div class="cursor-pointer amplitude-prev">
	<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M26 7C26 5.76393 24.5889 5.05836 23.6 5.8L11.6 14.8C10.8 15.4 10.8 16.6 11.6 17.2L23.6 26.2C24.5889 26.9416 26 26.2361 26 25V7Z" fill="#94A3B8" stroke="#94A3B8" stroke-width="2" stroke-linejoin="round"/>
	<path d="M6 5L6 27" stroke="#94A3B8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
	</svg>
	</div>
	<div class="cursor-pointer amplitude-play-pause w-24 h-24 rounded-full bg-white border border-play-pause-light-border shadow-xl flex items-center justify-center dark:bg-play-pause-dark-background dark:border-play-pause-dark-border">
	<svg id="play-icon" class="ml-[10px]" width="31" height="37" viewBox="0 0 31 37" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path fill-rule="evenodd" clip-rule="evenodd" d="M29.6901 16.6608L4.00209 0.747111C2.12875 -0.476923 0.599998 0.421814 0.599998 2.75545V33.643C0.599998 35.9728 2.12747 36.8805 4.00209 35.6514L29.6901 19.7402C29.6901 19.7402 30.6043 19.0973 30.6043 18.2012C30.6043 17.3024 29.6901 16.6608 29.6901 16.6608Z" class="fill-slate-500 dark:fill-slate-400"/>
	</svg>

	<svg id="pause-icon" width="24" height="36" viewBox="0 0 24 36" fill="none" xmlns="http://www.w3.org/2000/svg">
	<rect width="6" height="36" rx="3" class="fill-slate-500 dark:fill-slate-400"/>
	<rect x="18" width="6" height="36" rx="3" class="fill-slate-500 dark:fill-slate-400" />
	</svg>
	</div>
	<div class="cursor-pointer amplitude-next">
	<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M6 7C6 5.76393 7.41115 5.05836 8.4 5.8L20.4 14.8C21.2 15.4 21.2 16.6 20.4 17.2L8.4 26.2C7.41115 26.9416 6 26.2361 6 25V7Z" fill="#94A3B8" stroke="#94A3B8" stroke-width="2" stroke-linejoin="round"/>
	<path d="M26 5L26 27" stroke="#94A3B8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
	</svg>
	</div>
	<div class="cursor-pointer amplitude-repeat-song">
	<svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M17.7071 15.7071C18.0976 15.3166 18.0976 14.6834 17.7071 14.2929C17.3166 13.9024 16.6834 13.9024 16.2929 14.2929L17.7071 15.7071ZM13 19L12.2929 18.2929C11.9024 18.6834 11.9024 19.3166 12.2929 19.7071L13 19ZM16.2929 23.7071C16.6834 24.0976 17.3166 24.0976 17.7071 23.7071C18.0976 23.3166 18.0976 22.6834 17.7071 22.2929L16.2929 23.7071ZM19.9359 18.7035L19.8503 17.7072L19.9359 18.7035ZM8.95082 19.9005C9.50243 19.9277 9.97163 19.5025 9.99879 18.9509C10.026 18.3993 9.6008 17.9301 9.04918 17.9029L8.95082 19.9005ZM6.06408 18.7035L5.97851 19.6998L6.06408 18.7035ZM1.07501 13.4958L0.075929 13.5387L1.07501 13.4958ZM1.07501 6.50423L0.0759292 6.46127L1.07501 6.50423ZM6.06409 1.29649L6.14965 2.29282L6.06409 1.29649ZM19.9359 1.29649L19.8503 2.29283L19.9359 1.29649ZM24.925 6.50423L23.9259 6.54718L24.925 6.50423ZM24.925 13.4958L25.9241 13.5387V13.5387L24.925 13.4958ZM16.2929 14.2929L12.2929 18.2929L13.7071 19.7071L17.7071 15.7071L16.2929 14.2929ZM12.2929 19.7071L16.2929 23.7071L17.7071 22.2929L13.7071 18.2929L12.2929 19.7071ZM19.8503 17.7072C17.5929 17.901 15.3081 18 13 18V20C15.3653 20 17.7072 19.8986 20.0215 19.6998L19.8503 17.7072ZM9.04918 17.9029C8.07792 17.8551 7.1113 17.7898 6.14964 17.7072L5.97851 19.6998C6.96438 19.7845 7.95525 19.8515 8.95082 19.9005L9.04918 17.9029ZM2.07408 13.4528C2.02486 12.3081 2 11.157 2 10H0C0 11.1856 0.0254804 12.3654 0.075929 13.5387L2.07408 13.4528ZM2 10C2 8.84302 2.02486 7.69192 2.07408 6.54718L0.0759292 6.46127C0.0254806 7.63461 0 8.81436 0 10H2ZM6.14965 2.29282C8.4071 2.09896 10.6919 2 13 2V0C10.6347 0 8.29281 0.101411 5.97853 0.30016L6.14965 2.29282ZM13 2C15.3081 2 17.5929 2.09896 19.8503 2.29283L20.0215 0.30016C17.7072 0.101411 15.3653 0 13 0V2ZM23.9259 6.54718C23.9751 7.69192 24 8.84302 24 10H26C26 8.81436 25.9745 7.63461 25.9241 6.46127L23.9259 6.54718ZM24 10C24 11.157 23.9751 12.3081 23.9259 13.4528L25.9241 13.5387C25.9745 12.3654 26 11.1856 26 10H24ZM19.8503 2.29283C22.092 2.48534 23.8293 4.29889 23.9259 6.54718L25.9241 6.46127C25.7842 3.20897 23.2653 0.578736 20.0215 0.30016L19.8503 2.29283ZM6.14964 17.7072C3.90797 17.5147 2.17075 15.7011 2.07408 13.4528L0.075929 13.5387C0.215764 16.791 2.7347 19.4213 5.97851 19.6998L6.14964 17.7072ZM2.07408 6.54718C2.17075 4.29889 3.90798 2.48534 6.14965 2.29282L5.97853 0.30016C2.73471 0.578735 0.215764 3.20897 0.0759292 6.46127L2.07408 6.54718ZM20.0215 19.6998C23.2653 19.4213 25.7842 16.791 25.9241 13.5387L23.9259 13.4528C23.8292 15.7011 22.092 17.5147 19.8503 17.7072L20.0215 19.6998Z" fill="#94A3B8"/>
	</svg>
	</div>
	<div>
	<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M7.5 7H24.5V5H7.5V7ZM7.5 12H24.5V10H7.5V12ZM24.5 12C26.433 12 28 10.433 28 8.5H26C26 9.32843 25.3284 10 24.5 10V12ZM7.5 10C6.67157 10 6 9.32843 6 8.5H4C4 10.433 5.567 12 7.5 12V10ZM24.5 7C25.3284 7 26 7.67157 26 8.5H28C28 6.567 26.433 5 24.5 5V7ZM7.5 5C5.567 5 4 6.567 4 8.5H6C6 7.67157 6.67157 7 7.5 7V5Z" fill="#94A3B8"/>
	<path d="M5 15C4.44772 15 4 15.4477 4 16C4 16.5523 4.44772 17 5 17V15ZM27 17C27.5523 17 28 16.5523 28 16C28 15.4477 27.5523 15 27 15V17ZM5 17H27V15H5V17Z" fill="#94A3B8"/>
	<path d="M5 20C4.44772 20 4 20.4477 4 21C4 21.5523 4.44772 22 5 22V20ZM27 22C27.5523 22 28 21.5523 28 21C28 20.4477 27.5523 20 27 20V22ZM5 22H27V20H5V22Z" fill="#94A3B8"/>
	<path d="M5 25C4.44772 25 4 25.4477 4 26C4 26.5523 4.44772 27 5 27V25ZM27 27C27.5523 27 28 26.5523 28 26C28 25.4477 27.5523 25 27 25V27ZM5 27H27V25H5V27Z" fill="#94A3B8"/>
	</svg>
	</div>
	</div>
	<div class="hidden top-14 w-full absolute ml-auto mr-auto left-0 right-0 text-center max-w-lg h-72 rounded-full bg-highlight blur-2xl dark:block">

	</div>
	</div>
	<div class="flex items-center justify-center mt-10">
	<a class="text-xs leading-5 font-medium text-sky-600 dark:text-sky-400 bg-sky-400/10 rounded-full py-1 px-3 flex items-center hover:bg-sky-400/20" target="_blank" href="https://tailwindcss.com/">
	Designed With: <strong class="font-semibold">Tailwind CSS v3.0</strong><svg width="3" height="6" class="ml-3 overflow-visible text-sky-300 dark:text-sky-400" aria-hidden="true"><path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
	</a>

	<a class="ml-5 text-xs leading-5 font-medium text-emerald-600 dark:text-emerald-400 bg-emerald-400/10 rounded-full py-1 px-3 flex items-center hover:bg-emerald-400/20" target="_blank" href="https://github.com/serversideup/amplitudejs">
	Functionality By: <strong class="font-semibold">AmplitudeJS v5.2</strong><svg width="3" height="6" class="ml-3 overflow-visible text-emerald-300 dark:text-emerald-400" aria-hidden="true"><path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
	</a>
	</div>

	</div>
	</body>
	let theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

	if( theme == 'dark' ){
	document.documentElement.classList.add('dark')
	}

	document.getElementById('dark-mode-toggle').addEventListener('click', function(){
	document.documentElement.classList.toggle('dark')
	});



	document.getElementById('song-saved').addEventListener('click', function(){
	document.getElementById('song-saved').classList.toggle('saved');
	});


	Amplitude.init({
	"bindings": {
	37: 'prev',
	39: 'next',
	32: 'play_pause'
	},
	"callbacks": {
	timeupdate: function(){
	let percentage = Amplitude.getSongPlayedPercentage();

	if( isNaN( percentage ) ){
	percentage = 0;
	}

	/**
	* Massive Help from: https://nikitahl.com/style-range-input-css
	*/
	let slider = document.getElementById('song-percentage-played');
	slider.style.backgroundSize = percentage + '% 100%';
	}
	},
	"songs": [
	{
	"name": "First Snow",
	"artist": "Emancipator",
	"album": "Soon It Will Be Cold Enough",
	"url": "https://521dimensions.com/song/FirstSnow-Emancipator.mp3",
	"cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/soon-it-will-be-cold-enough.jpg"
	},
	{
	"name": "Intro / Sweet Glory",
	"artist": "Jimkata",
	"album": "Die Digital",
	"url": "https://521dimensions.com/song/IntroSweetGlory-Jimkata.mp3",
	"cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/die-digital.jpg"
	},
	{
	"name": "Offcut #6",
	"artist": "Little People",
	"album": "We Are But Hunks of Wood Remixes",
	"url": "https://521dimensions.com/song/Offcut6-LittlePeople.mp3",
	"cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/we-are-but-hunks-of-wood.jpg"
	},
	{
	"name": "Dusk To Dawn",
	"artist": "Emancipator",
	"album": "Dusk To Dawn",
	"url": "https://521dimensions.com/song/DuskToDawn-Emancipator.mp3",
	"cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/from-dusk-to-dawn.jpg"
	},
	{
	"name": "Anthem",
	"artist": "Emancipator",
	"album": "Soon It Will Be Cold Enough",
	"url": "https://521dimensions.com/song/Anthem-Emancipator.mp3",
	"cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/soon-it-will-be-cold-enough.jpg"
	}
	]
	});

	window.onkeydown = function(e) {
	return !(e.keyCode == 32);
	};
	/*
	! tailwindcss v3.0.23 \| MIT License \| https://tailwindcss.com
	*/

	/*
	1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
	2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
	*/

	*,
	::before,
	::after {
	box-sizing: border-box;
	/* 1 */
	border-width: 0;
	/* 2 */
	border-style: solid;
	/* 2 */
	border-color: #e5e7eb;
	/* 2 */
	}

	::before,
	::after {
	--tw-content: '';
	}

	/*
	1. Use a consistent sensible line-height in all browsers.
	2. Prevent adjustments of font size after orientation changes in iOS.
	3. Use a more readable tab size.
	4. Use the user's configured `sans` font-family by default.
	*/

	html {
	line-height: 1.5;
	/* 1 */
	-webkit-text-size-adjust: 100%;
	/* 2 */
	-moz-tab-size: 4;
	/* 3 */
	-o-tab-size: 4;
	tab-size: 4;
	/* 3 */
	font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	/* 4 */
	}

	/*
	1. Remove the margin in all browsers.
	2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
	*/

	body {
	margin: 0;
	/* 1 */
	line-height: inherit;
	/* 2 */
	}

	/*
	1. Add the correct height in Firefox.
	2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
	3. Ensure horizontal rules are visible by default.
	*/

	hr {
	height: 0;
	/* 1 */
	color: inherit;
	/* 2 */
	border-top-width: 1px;
	/* 3 */
	}

	/*
	Add the correct text decoration in Chrome, Edge, and Safari.
	*/

	abbr:where([title]) {
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted;
	}

	/*
	Remove the default font size and weight for headings.
	*/

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
	font-size: inherit;
	font-weight: inherit;
	}

	/*
	Reset links to optimize for opt-in styling instead of opt-out.
	*/

	a {
	color: inherit;
	text-decoration: inherit;
	}

	/*
	Add the correct font weight in Edge and Safari.
	*/

	b,
	strong {
	font-weight: bolder;
	}

	/*
	1. Use the user's configured `mono` font family by default.
	2. Correct the odd `em` font sizing in all browsers.
	*/

	code,
	kbd,
	samp,
	pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	/* 1 */
	font-size: 1em;
	/* 2 */
	}

	/*
	Add the correct font size in all browsers.
	*/

	small {
	font-size: 80%;
	}

	/*
	Prevent `sub` and `sup` elements from affecting the line height in all browsers.
	*/

	sub,
	sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
	}

	sub {
	bottom: -0.25em;
	}

	sup {
	top: -0.5em;
	}

	/*
	1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
	2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
	3. Remove gaps between table borders by default.
	*/

	table {
	text-indent: 0;
	/* 1 */
	border-color: inherit;
	/* 2 */
	border-collapse: collapse;
	/* 3 */
	}

	/*
	1. Change the font styles in all browsers.
	2. Remove the margin in Firefox and Safari.
	3. Remove default padding in all browsers.
	*/

	button,
	input,
	optgroup,
	select,
	textarea {
	font-family: inherit;
	/* 1 */
	font-size: 100%;
	/* 1 */
	line-height: inherit;
	/* 1 */
	color: inherit;
	/* 1 */
	margin: 0;
	/* 2 */
	padding: 0;
	/* 3 */
	}

	/*
	Remove the inheritance of text transform in Edge and Firefox.
	*/

	button,
	select {
	text-transform: none;
	}

	/*
	1. Correct the inability to style clickable types in iOS and Safari.
	2. Remove default button styles.
	*/

	button,
	[type='button'],
	[type='reset'],
	[type='submit'] {
	-webkit-appearance: button;
	/* 1 */
	background-color: transparent;
	/* 2 */
	background-image: none;
	/* 2 */
	}

	/*
	Use the modern Firefox focus style for all focusable elements.
	*/

	:-moz-focusring {
	outline: auto;
	}

	/*
	Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
	*/

	:-moz-ui-invalid {
	box-shadow: none;
	}

	/*
	Add the correct vertical alignment in Chrome and Firefox.
	*/

	progress {
	vertical-align: baseline;
	}

	/*
	Correct the cursor style of increment and decrement buttons in Safari.
	*/

	::-webkit-inner-spin-button,
	::-webkit-outer-spin-button {
	height: auto;
	}

	/*
	1. Correct the odd appearance in Chrome and Safari.
	2. Correct the outline style in Safari.
	*/

	[type='search'] {
	-webkit-appearance: textfield;
	/* 1 */
	outline-offset: -2px;
	/* 2 */
	}

	/*
	Remove the inner padding in Chrome and Safari on macOS.
	*/

	::-webkit-search-decoration {
	-webkit-appearance: none;
	}

	/*
	1. Correct the inability to style clickable types in iOS and Safari.
	2. Change font properties to `inherit` in Safari.
	*/

	::-webkit-file-upload-button {
	-webkit-appearance: button;
	/* 1 */
	font: inherit;
	/* 2 */
	}

	/*
	Add the correct display in Chrome and Safari.
	*/

	summary {
	display: list-item;
	}

	/*
	Removes the default spacing and border for appropriate elements.
	*/

	blockquote,
	dl,
	dd,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	hr,
	figure,
	p,
	pre {
	margin: 0;
	}

	fieldset {
	margin: 0;
	padding: 0;
	}

	legend {
	padding: 0;
	}

	ol,
	ul,
	menu {
	list-style: none;
	margin: 0;
	padding: 0;
	}

	/*
	Prevent resizing textareas horizontally by default.
	*/

	textarea {
	resize: vertical;
	}

	/*
	1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
	2. Set the default placeholder color to the user's configured gray 400 color.
	*/

	input::-moz-placeholder, textarea::-moz-placeholder {
	opacity: 1;
	/* 1 */
	color: #9ca3af;
	/* 2 */
	}

	input:-ms-input-placeholder, textarea:-ms-input-placeholder {
	opacity: 1;
	/* 1 */
	color: #9ca3af;
	/* 2 */
	}

	input::placeholder,
	textarea::placeholder {
	opacity: 1;
	/* 1 */
	color: #9ca3af;
	/* 2 */
	}

	/*
	Set the default cursor for buttons.
	*/

	button,
	[role="button"] {
	cursor: pointer;
	}

	/*
	Make sure disabled buttons don't get the pointer cursor.
	*/

	:disabled {
	cursor: default;
	}

	/*
	1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
	2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
	This can trigger a poorly considered lint error in some tools but is included by design.
	*/

	img,
	svg,
	video,
	canvas,
	audio,
	iframe,
	embed,
	object {
	display: block;
	/* 1 */
	vertical-align: middle;
	/* 2 */
	}

	/*
	Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
	*/

	img,
	video {
	max-width: 100%;
	height: auto;
	}

	/*
	Ensure the default browser behavior of the `hidden` attribute.
	*/

	[hidden] {
	display: none;
	}

	*, ::before, ::after {
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x: ;
	--tw-pan-y: ;
	--tw-pinch-zoom: ;
	--tw-scroll-snap-strictness: proximity;
	--tw-ordinal: ;
	--tw-slashed-zero: ;
	--tw-numeric-figure: ;
	--tw-numeric-spacing: ;
	--tw-numeric-fraction: ;
	--tw-ring-inset: ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgb(59 130 246 / 0.5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur: ;
	--tw-brightness: ;
	--tw-contrast: ;
	--tw-grayscale: ;
	--tw-hue-rotate: ;
	--tw-invert: ;
	--tw-saturate: ;
	--tw-sepia: ;
	--tw-drop-shadow: ;
	--tw-backdrop-blur: ;
	--tw-backdrop-brightness: ;
	--tw-backdrop-contrast: ;
	--tw-backdrop-grayscale: ;
	--tw-backdrop-hue-rotate: ;
	--tw-backdrop-invert: ;
	--tw-backdrop-opacity: ;
	--tw-backdrop-saturate: ;
	--tw-backdrop-sepia: ;
	}

	.absolute {
	position: absolute;
	}

	.relative {
	position: relative;
	}

	.right-4 {
	right: 1rem;
	}

	.top-4 {
	top: 1rem;
	}

	.top-14 {
	top: 3.5rem;
	}

	.left-0 {
	left: 0px;
	}

	.right-0 {
	right: 0px;
	}

	.z-50 {
	z-index: 50;
	}

	.mr-6 {
	margin-right: 1.5rem;
	}

	.mb-3 {
	margin-bottom: 0.75rem;
	}

	.ml-\[10px\] {
	margin-left: 10px;
	}

	.ml-auto {
	margin-left: auto;
	}

	.mr-auto {
	margin-right: auto;
	}

	.ml-3 {
	margin-left: 0.75rem;
	}

	.ml-2 {
	margin-left: 0.5rem;
	}

	.mt-5 {
	margin-top: 1.25rem;
	}

	.mt-10 {
	margin-top: 2.5rem;
	}

	.ml-5 {
	margin-left: 1.25rem;
	}

	.block {
	display: block;
	}

	.flex {
	display: flex;
	}

	.hidden {
	display: none;
	}

	.h-6 {
	height: 1.5rem;
	}

	.h-screen {
	height: 100vh;
	}

	.h-24 {
	height: 6rem;
	}

	.h-control-panel {
	height: 4.5rem;
	}

	.h-72 {
	height: 18rem;
	}

	.w-6 {
	width: 1.5rem;
	}

	.w-screen {
	width: 100vw;
	}

	.w-player {
	width: 640px;
	}

	.w-24 {
	width: 6rem;
	}

	.w-full {
	width: 100%;
	}

	.max-w-lg {
	max-width: 32rem;
	}

	.cursor-pointer {
	cursor: pointer;
	}

	.flex-col {
	flex-direction: column;
	}

	.items-center {
	align-items: center;
	}

	.justify-center {
	justify-content: center;
	}

	.justify-between {
	justify-content: space-between;
	}

	.overflow-visible {
	overflow: visible;
	}

	.rounded-xl {
	border-radius: 0.75rem;
	}

	.rounded-md {
	border-radius: 0.375rem;
	}

	.rounded-full {
	border-radius: 9999px;
	}

	.rounded-b-xl {
	border-bottom-right-radius: 0.75rem;
	border-bottom-left-radius: 0.75rem;
	}

	.border {
	border-width: 1px;
	}

	.border-t {
	border-top-width: 1px;
	}

	.border-player-light-border {
	border-color: rgba(15, 23, 42, 0.06);
	}

	.border-gray-200 {
	--tw-border-opacity: 1;
	border-color: rgb(229 231 235 / var(--tw-border-opacity));
	}

	.border-play-pause-light-border {
	border-color: rgba(15, 23, 42, 0.06);
	}

	.bg-\[\#F8FAFC\] {
	--tw-bg-opacity: 1;
	background-color: rgb(248 250 252 / var(--tw-bg-opacity));
	}

	.bg-player-light-background {
	--tw-bg-opacity: 1;
	background-color: rgb(252 252 253 / var(--tw-bg-opacity));
	}

	.bg-control-panel-light-background {
	--tw-bg-opacity: 1;
	background-color: rgb(249 250 251 / var(--tw-bg-opacity));
	}

	.bg-white {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity));
	}

	.bg-highlight {
	background-color: rgba(56, 189, 248, 0.17);
	}

	.bg-sky-400\/10 {
	background-color: rgb(56 189 248 / 0.1);
	}

	.bg-emerald-400\/10 {
	background-color: rgb(52 211 153 / 0.1);
	}

	.fill-slate-500 {
	fill: #64748b;
	}

	.stroke-white {
	stroke: #fff;
	}

	.stroke-\[\#0A1122\] {
	stroke: #0A1122;
	}

	.px-10 {
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	}

	.py-1 {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	}

	.px-3 {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	}

	.pt-10 {
	padding-top: 2.5rem;
	}

	.pb-4 {
	padding-bottom: 1rem;
	}

	.pb-6 {
	padding-bottom: 1.5rem;
	}

	.text-center {
	text-align: center;
	}

	.font-sans {
	font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	}

	.text-lg {
	font-size: 1.125rem;
	line-height: 1.75rem;
	}

	.text-base {
	font-size: 1rem;
	line-height: 1.5rem;
	}

	.text-xs {
	font-size: 0.75rem;
	line-height: 1rem;
	}

	.font-medium {
	font-weight: 500;
	}

	.font-semibold {
	font-weight: 600;
	}

	.leading-7 {
	line-height: 1.75rem;
	}

	.leading-6 {
	line-height: 1.5rem;
	}

	.leading-5 {
	line-height: 1.25rem;
	}

	.tracking-wide {
	letter-spacing: 0.025em;
	}

	.text-slate-900 {
	--tw-text-opacity: 1;
	color: rgb(15 23 42 / var(--tw-text-opacity));
	}

	.text-gray-500 {
	--tw-text-opacity: 1;
	color: rgb(107 114 128 / var(--tw-text-opacity));
	}

	.text-sky-500 {
	--tw-text-opacity: 1;
	color: rgb(14 165 233 / var(--tw-text-opacity));
	}

	.text-sky-600 {
	--tw-text-opacity: 1;
	color: rgb(2 132 199 / var(--tw-text-opacity));
	}

	.text-sky-300 {
	--tw-text-opacity: 1;
	color: rgb(125 211 252 / var(--tw-text-opacity));
	}

	.text-emerald-600 {
	--tw-text-opacity: 1;
	color: rgb(5 150 105 / var(--tw-text-opacity));
	}

	.text-emerald-300 {
	--tw-text-opacity: 1;
	color: rgb(110 231 183 / var(--tw-text-opacity));
	}

	.shadow-player-light {
	--tw-shadow: 0px 15px 25px rgba(15, 23, 42, 0.1), 0px 5px 10px rgba(15, 23, 42, 0.04);
	--tw-shadow-colored: 0px 15px 25px var(--tw-shadow-color), 0px 5px 10px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	}

	.shadow-xl {
	--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	}

	.blur-2xl {
	--tw-blur: blur(40px);
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
	}

	/*
	Massive help from: https://nikitahl.com/style-range-input-css
	*/

	input[type="range"] {
	-webkit-appearance: none;
	height: 8px;
	background: #F1F5F9;
	border-radius: 5px;
	background-image: linear-gradient(#38BDF8, #38BDF8);
	background-size: 0% 100%;
	background-repeat: no-repeat;
	}

	html.dark input[type="range"]{
	background: #0F172A;
	background-image: linear-gradient(#38BDF8, #38BDF8);
	background-size: 0% 100%;
	box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.06);
	background-repeat: no-repeat;
	}

	input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	-moz-appearance: none;
	height: 24px;
	width: 24px;
	border-radius: 50%;
	background: #FFFFFF;
	cursor: ew-resize;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
	-webkit-transition: background .3s ease-in-out;
	transition: background .3s ease-in-out;
	}

	html.dark input[type="range"]::-webkit-slider-thumb,
	html.dark input[type="range"]::-moz-range-thumb,
	html.dark input[type="range"]::-ms-thumb {
	background: #E2E8F0;
	}

	input[type="range"]::-webkit-slider-runnable-track,
	input[type="range"]::-moz-range-track,
	input[type="range"]::-ms-track {
	-webkit-appearance: none;
	appearance: none;
	-moz-appearance: none;
	box-shadow: none;
	border: none;
	background: transparent;
	}

	div#song-saved.saved svg path{
	fill: #38BDF8;
	stroke: #38BDF8;
	}

	div.amplitude-play-pause.amplitude-playing #pause-icon{
	display: block;
	}

	div.amplitude-play-pause.amplitude-paused #pause-icon{
	display: none;
	}

	div.amplitude-play-pause.amplitude-paused #play-icon{
	display: block;
	}

	div.amplitude-play-pause.amplitude-playing #play-icon{
	display: none;
	}

	div.amplitude-shuffle.amplitude-shuffle-on svg path{
	fill: #38BDF8;
	}

	div.amplitude-repeat-song.amplitude-repeat-song-on svg path{
	fill: #38BDF8;
	}

	.hover\:bg-sky-400\/20:hover {
	background-color: rgb(56 189 248 / 0.2);
	}

	.hover\:bg-emerald-400\/20:hover {
	background-color: rgb(52 211 153 / 0.2);
	}

	.dark .dark\:block {
	display: block;
	}

	.dark .dark\:hidden {
	display: none;
	}

	.dark .dark\:border-player-dark-border {
	border-color: rgba(255, 255, 255, 0.16);
	}

	.dark .dark\:border-cover-dark-border {
	border-color: rgba(255, 255, 255, 0.1);;
	}

	.dark .dark\:border-gray-900 {
	--tw-border-opacity: 1;
	border-color: rgb(17 24 39 / var(--tw-border-opacity));
	}

	.dark .dark\:border-play-pause-dark-border {
	border-color: rgba(255, 255, 255, 0.06);
	}

	.dark .dark\:bg-\[\#0A1122\] {
	--tw-bg-opacity: 1;
	background-color: rgb(10 17 34 / var(--tw-bg-opacity));
	}

	.dark .dark\:bg-player-dark-background {
	background-color: rgba(30, 41, 59, 0.7);
	}

	.dark .dark\:bg-control-panel-dark-background {
	background-color: rgba(23, 31, 50, 0.5);;
	}

	.dark .dark\:bg-play-pause-dark-background {
	--tw-bg-opacity: 1;
	background-color: rgb(47 59 79 / var(--tw-bg-opacity));
	}

	.dark .dark\:fill-slate-400 {
	fill: #94a3b8;
	}

	.dark .dark\:text-white {
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity));
	}

	.dark .dark\:text-gray-400 {
	--tw-text-opacity: 1;
	color: rgb(156 163 175 / var(--tw-text-opacity));
	}

	.dark .dark\:text-sky-300 {
	--tw-text-opacity: 1;
	color: rgb(125 211 252 / var(--tw-text-opacity));
	}

	.dark .dark\:text-sky-400 {
	--tw-text-opacity: 1;
	color: rgb(56 189 248 / var(--tw-text-opacity));
	}

	.dark .dark\:text-sky-400\/70 {
	color: rgb(56 189 248 / 0.7);
	}

	.dark .dark\:text-emerald-400 {
	--tw-text-opacity: 1;
	color: rgb(52 211 153 / var(--tw-text-opacity));
	}

	.dark .dark\:shadow-player-dark {
	--tw-shadow: inset 0px 2px 4px rgba(255, 255, 255, 0.06);;
	--tw-shadow-colored: inset 0px 2px 4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	}

	.dark .dark\:backdrop-blur-xl {
	--tw-backdrop-blur: blur(24px);
	-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
	backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
	}

	@media (min-width: 1280px) {
	.xl\:flex {
	display: flex;
	}
	}