/* Copyright (C) 2015, 2025  Johannes Sasongko <johannes sasongko org> */
/* SPDX-License-Identifier: AGPL-3.0-or-later */

/* The -moz and -webkit selectors are split because otherwise they don't work on WebKit and Blink. */

body > *,
section > * {
	margin-left: 1em;
}
section {
	margin-top: 2em;
	margin-bottom: 2em;
}
h1 {
	margin-bottom: 0.5em;
}
h1,
h2 {
	margin-left: 0;
}

div:has(> input) {
	display: flex;
}
input {
	appearance: none;
	height: 2em;
	width: 30em;
}
::-moz-range-thumb {
	background: none;
	border: 1px solid #ccc;
	box-shadow: 0 0 3px 2px #000;
	height: 100%;
	width: 4px;
}
::-webkit-slider-thumb {
	/* Needed to override styling. */
	appearance: none;
	background: none;
	border: 1px solid #ccc;
	box-shadow: 0 0 3px 2px #000;
	height: 100%;
	/* The thumb is inside the track, so we need this. */
	margin: 0 -1px;
	width: 4px;
}
::-moz-range-track {
	background-size: 100%;
	height: 75%;
	margin: 0 3px;
}
::-webkit-slider-runnable-track {
	background-size: 100%;
	height: 75%;
	margin: 0 3px;
}

#hypocrisy ::-moz-range-track {
	background-image: url("Concrete_Foundation_-_01_-_Concrete_Foundation_-_Hypocrisy.opus.mood.png");
}
#hypocrisy ::-webkit-slider-runnable-track {
	background-image: url("Concrete_Foundation_-_01_-_Concrete_Foundation_-_Hypocrisy.opus.mood.png");
}
#max ::-moz-range-track {
	background-image: url("Anny_Sky_-_Max.opus.mood.png");
}
#max ::-webkit-slider-runnable-track {
	background-image: url("Anny_Sky_-_Max.opus.mood.png");
}
#upsanddowns ::-moz-range-track {
	background-image: url("Ups_and_Downs_-_Schwarzweiss.opus.mood.png");
}
#upsanddowns ::-webkit-slider-runnable-track {
	background-image: url("Ups_and_Downs_-_Schwarzweiss.opus.mood.png");
}
#whatislove ::-moz-range-track {
	background-image: url("Melanie_Ungar_-_What_Is_Love.opus.mood.png");
}
#whatislove ::-webkit-slider-runnable-track {
	background-image: url("Melanie_Ungar_-_What_Is_Love.opus.mood.png");
}