@media (hover: hover) {
	div#controls img:hover {
		filter: hue-rotate(30deg);
	}
}

@media (max-width: 1024px) {
	canvas#visualizer {
		height: clamp(36px, 8dvh, 60px);
		margin: 0 auto 15px auto;
		width: 90%;
	}

	div#container {
		flex-direction: column;
		flex-wrap: nowrap;
		margin: 25px auto 15px auto;
		width: 90%;
	}

	div#container div#left {
		display: flex;
		flex: 0 0 auto;
		justify-content: center;
		margin: 0 0 40px 0;
		width: 100%;
	}

	div#container div#left img {
		aspect-ratio: 1;
		height: clamp(80px, 20dvh, 60vw);
		margin: 0 auto 0 auto;
	}

	div#container div#right {
		gap: 15px;
		height: auto;
		width: 100%;
	}

	div#container h1 {
		font-size: 18px;
		height: 18px;
		margin: 0 0 28px 0;
	}

	div#container p {
		font-size: clamp(13px, 2.4dvh, 16px);
	}

	div#controls {
		margin: 0 0 25px 0;
	}

	div#controls img {
		margin: 0 8px 0 8px;
		width: 44px;
	}

	div#top h1 {
		font-size: clamp(28px, 11vw, 42px);
		padding: 10px 0 0 0;
	}

	div#volume {
		margin: 0 auto 15px auto;
		padding: 3px 3px 3px 3px;
		width: 75%;
	}

	div#volume span#percentage {
		font-size: 14px;
		margin: 2px 0 0 -16px;
	}

	div.modal {
		min-width: 100%;
		padding: 20px 15px 20px 20px;
	}

	div.modal div#history_content {
		max-height: 70vh;
	}

	div.modal h1 {
		font-size: 16px;
	}

	p#status {
		font-size: 20px;
		margin: 0 0 15px 0;
	}
}

@media (orientation: landscape) and (max-height: 500px) {
	body:has(div#volume) div#container div#left img {
		height: clamp(80px, calc(100dvh - 265px), 50dvh);
	}

	body:has(div#volume) div#container div#right {
		height: calc(clamp(80px, calc(100dvh - 265px), 50dvh) * 0.85);
	}

	canvas#visualizer {
		height: 36px;
		margin: 0 auto 14px auto;
	}

	div#container {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		margin: 14px auto 19px auto;
	}

	div#container div#left {
		display: block;
		flex: none;
		margin: 0 20px 0 0;
		min-height: 0;
		width: auto;
	}

	div#container div#left img {
		height: clamp(80px, calc(100dvh - 235px), 50dvh);
	}

	div#container div#right {
		gap: 2px;
		height: calc(clamp(80px, calc(100dvh - 235px), 50dvh) * 0.85);
		max-width: 60%;
		width: auto;
	}

	div#container h1 {
		font-size: 15px;
		height: 15px;
		margin: 0 0 24px 0;
	}

	div#container p {
		font-size: 13px;
	}

	div#controls {
		margin: 0 0 10px 0;
	}

	div#controls img {
		width: 40px;
	}

	div#top h1 {
		font-size: 26px;
		padding: 6px 0 0 0;
	}

	div#volume {
		height: 12px;
		margin: 0 auto 8px auto;
	}

	div#volume span#percentage {
		font-size: 10px;
		margin: 1px 0 0 -16px;
	}

	p#status {
		font-size: 15px;
		margin: 0 0 11px 0;
	}
}