:root {
	--text-color: #000;
	--bg-color: #f9f9f9;
	--em-color: #c91400;
}

@media (prefers-color-scheme: dark) {
	:root {
		--text-color: #eee;
		--bg-color: #1c1c1c;
		--em-color: #fc4835;
	}
}

*:focus {
	outline: none;
}

a {
	color: var(--em-color);
	text-decoration: none;
}

body {
	color: var(--text-color);
	background-color: var(--bg-color);
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

#app {
	width: 100vw;
	height: 100dvh;
	display: flex;
	flex-direction: column;
}

.scroll-container {
	flex: 1;
	overflow: auto;
	display: flex;
	flex-direction: column;
}

main {
	flex: 1;
}

.main-footer {
	height: 37px;
	text-align: center;
	border-top: 1px solid var(--text-color);
}

.page-container {
	width: 95%;
	height: 100%;
	max-width: 600px;
	align-self: center;

	.page {
		width: 100%;
		height: 100%;
		display: none;

		&>* {
			list-style-type: none;
			width: 100%;
		}
	}
}

.songs .song:hover {
	cursor: pointer;
}

.error {
	width: 100%;
	height: 30px;
	color: red;
	text-align: center;
	font-size: 14pt;
}

.page-container.start-active>.start {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.start-container {
	flex: 1;
}

.page-container.play-active>.play {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.playlist {
	min-height: calc(100% - 38px);
	flex-shrink: 0;
}

.song {
	height: 50px;
	padding: 10px 0;
	display: flex;
	border-bottom: 1px solid var(--text-color);

	.cover {
		width: 50px;
		margin-left: 10px;
		object-fit: cover;
		border-radius: 5px;
	}

	.name-container {
		padding-left: 10px;
		flex: 1;
		max-width: calc(100% - 125px);
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;

		.name {
			font-size: 15pt;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.artist {
			font-size: 12pt;
		}
	}

	.votes {
		flex-shrink: 0;
		width: 10px;
		height: 20px;
		margin: auto 0;
		font-size: 13pt;
	}

	.voted {
		position: relative;
		flex-shrink: 0;
		width: 25px;
		height: 25px;
		margin: auto 10px;
		cursor: pointer;

		@media only screen and (max-device-width: 800px) {
			width: 35px;
			height: 35px;
		}

		input {
			position: relative;
			opacity: 0;
			width: 0;
			height: 0;
		}

		.checkmark {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			stroke: var(--text-color);
			stroke-width: 2px;
			fill: var(--bg-color);

			polyline {
				stroke: var(--text-color);
			}
		}

		input:checked~.checkmark {
			fill: var(--text-color);

			polyline {
				stroke: var(--bg-color);
			}
		}
	}
}

.current-song {
	width: 100%;
	display: flex;
	flex-direction: column;

	.progress-bar {
		background-color: var(--text-color);
		height: 4px;
	}

	.current-song-item {
		width: 25px;
		height: 25px;
		margin: auto 10px;
		stroke: var(--text-color);
		stroke-width: 3px;
	}

	.volume {
		fill: none;

		&:not(.muted)>line,
		&.muted>path {
			display: none;
		}

		&:hover {
			cursor: pointer;
		}
	}

	.skip {
		stroke-width: 0;
		fill: var(--text-color);

		&:hover {
			cursor: pointer;
		}
	}

	.playing {
		fill: var(--bg-color);

		polyline,
		rect {
			fill: var(--text-color);
			stroke-width: 0;
		}

		&.admin {
			fill: var(--text-color);

			polyline,
			rect {
				fill: var(--bg-color);
			}

			:hover {
				cursor: pointer;
			}
		}
	}

	.song {
		border-bottom: none;
	}
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100dvh;
	background-color: var(--bg-color);
	z-index: 2;
	display: none;
}

.search-results {
	z-index: 3;
	display: none;

	& .song:hover {
		cursor: pointer;
	}
}

.search {
	position: relative;
	z-index: 3;

	.close {
		height: 20px;
		position: absolute;
		right: 10px;
		top: 18px;
		stroke: var(--text-color);
		z-index: 3;

		&:hover {
			cursor: pointer;
		}
	}

	&.focus~.overlay,
	&.focus~.search-results {
		display: block;
	}

	&.focus~.scroll-container:first-of-type,
	&.focus~.current-song {
		display: none;
	}
}

.borderd {
	width: 100%;
	height: 40px;
	margin: 8px 0;
	padding: 8px;
	color: var(--text-color);
	background-color: var(--bg-color);
	border: 1px solid var(--text-color);
	border-radius: 8px;
	box-sizing: border-box;
	font-size: 14pt;
}

button {
	cursor: pointer;
}

h1 {
	width: 100%;
	margin: 20px 0;
	text-align: center;
	font-size: 60pt;
}

ul {
	margin: 0;
	padding: 0;
}

hr {
	margin: 8px 0;
	border-top: 1px solid var(--text-color);
}