@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


body, h2, h3 {
	margin: 0;
	color: #fff;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

body {
	background-image:
		radial-gradient(circle, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.1) 100%),
		url("music.webp");
	background-size: cover;
	background-position: center center;
	height: 200vh;
	display: grid;
	place-items: center;
	text-align: center;
	font-size: 3rem;
}

h2, h3 {
	font-family: "Alfa Slab One", serif;
	font-weight: 400;
	font-style: normal;
}

h3 {
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 100;
	font-variation-settings: "wdth" 100;
}

#yes {
	background-color: #32cd32;
}

#no {
	background-color: #dc143c;
}

button, main, section {
	border-radius: 10px;
}

main, section {
	background: rgba(255, 255, 255, .11);
	backdrop-filter: blur(10px);
	box-shadow: rgb(255 255 255/5%) 5px 5px 16px;
	padding: 64px;
	display: grid;
	place-content: center;
	gap: 48px;
	min-width: 60vw;
}

button {
	height: min(20vw, 20vh);
	aspect-ratio: 2/1;
	border: 0;
	outline: 0;
	color: #fff;
	font-size: 1em;
	font-weight: bolder;
	transition: transform 100ms ease;
}

button:hover {
	transform: scale(1.02);
}

button:active {
	transform: scale(.98);
}

#options {
	gap: 2em;
	display: flex;
	justify-content: center;
}

#export, table {
	color: #fff;
	font-size: 1rem;
	width: 100%;
}

table {
	border-collapse: collapse;
}

td, th {
	padding: .75rem;
	border-bottom: 1px solid rgba(255, 255, 255, .2);
	text-align: left;
}

#export, #start {
	background-color: #1e90ff;
	padding: 1em;
	border-radius: 8px;
	height: 4em;
	margin-bottom: 1em;
}

section#history {
	display: block;
	padding: 24px;
	overflow: auto;
	height: 80vh;
	place-content: baseline;
}

@media (max-width: 600px) {
	body {
		font-size: 1.2rem;
		height: auto;
		padding: 0;
		gap: 5vh;
	}

	#current, #options {
		background: rgba(255, 255, 255, .11);
		backdrop-filter: blur(10px);
		box-shadow: rgb(255 255 255/5%) 5px 5px 16px;
		border-radius: 10px;
		padding: 10px;
	}

	main, section {
		min-width: unset;
		width: 100%;
		padding: 0;
		gap: 24px;
		background: none;
		backdrop-filter: none;
		box-shadow: none;
		grid-template-columns: 1fr;
	}

	section {
		background-image: radial-gradient(circle, #0F4D6A 50%, #07161F 100%);
		box-sizing: border-box;
		margin: 0;
		width: 100vw;
		border-radius: 0;
	}

	h2, h3 {
		font-size: 1.5em;
		text-align: center;
	}

	#options {
		flex-direction: column;
		gap: 1em;
	}

	button {
		width: 100%;
		height: 3.5em;
		aspect-ratio: auto;
		font-size: 1.2em;
	}

	#export {
		width: 100%;
		height: 3em;
		font-size: 1em;
	}

	table {
		font-size: 0.9rem;
		word-break: break-word;
	}

	td, th {
		padding: 0.5rem;
	}

	section#history {
		height: auto;
		padding: 16px;
	}
}