@import url("https://fonts.googleapis.com/css?family=Silkscreen");
@import url("https://fonts.googleapis.com/css?family=Inconsolata");

:root {
	--dark-blue: rgb(0, 0, 161);
	--lime-green: rgb(0, 229, 255);

	--cursor-default: url("img/cursor.png");
	--cursor-point: url("img/cursor-point.png");
}

@keyframes animated-machine {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 200px 200px;
	}
}

/** CURSOR */
html,
label {
	cursor: var(--cursor-default), auto;
}
a:link,
button,
summary,
input {
	cursor: var(--cursor-point), default !important;
}

/** SCROLLBAR */
* {
	scrollbar-color: #5aaaff #001f3f;
}

/** FILTERS */
.filter-yellow {
	filter: invert(19%) sepia(99%) saturate(7469%) hue-rotate(327deg) brightness(102%) contrast(112%);
}
.filter-darkgreen {
	filter: invert(33%) sepia(88%) saturate(1175%) hue-rotate(89deg) brightness(99%) contrast(108%);
}

html {
	background: black;
	min-height: 100dvh;

}

body {
	background: black;
	color: #b9b9b9;
	text-align: center;
	font-family: "Consolas";
	margin: 0;
	min-height: 100dvh;
}

@media (display-mode: standalone) {
	body {
		padding-bottom: 34px;
	}
}

body.machine {
	font-family: "Courier New";
	background-image: url("img/texture/motherboard-dark-bg.png");
	background-size: 200px;
	animation: animated-machine 60s linear infinite;
}

body.rainbow-bg {
	background-color: black;
	background: linear-gradient(
			to left,
			rgb(180, 0, 40),
			rgb(16, 74, 139),
			rgb(19, 36, 145),
			rgb(160, 0, 35)
		),
		url("img/texture/motherboard-bg.png");
	background-blend-mode: multiply;
	background-size: 300px;
}

::selection {
	color: rgb(134, 196, 255);
	background: rgb(204, 0, 55);
}

button {
	font-family: "Courier New", Courier, monospace;
}

img {
	margin: 0;
}

a,
a:link {
	color: #FF0047;
	text-decoration: none;
}

.transparent {
	background-color: transparent;
}

.small-screen-warning {
	position: absolute;
	background-color: black;
	width: calc(100dvw - 40px);
	height: 100dvh;
	display: none;
	font-family: "Silkscreen";
	font-size: 1.5em;
	padding: 0px 20px;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	top: 0;
	left: 0;
}
.small-screen-warning button {
	font-family: "Silkscreen";
	font-size: 1em;
	width: 100px;
	border-style: solid;
	border-color: rgb(165, 165, 165);
	background-color: rgb(104, 104, 104);
	border-width: 1px;
	color: white;
}

@media screen and (max-width: 600px) {
	.small-screen-warning {
		display: flex;
	}

	body.rainbow-bg {
		background: url("img/texture/motherboard-dark-bg.png");
		background-size: 300px;
		background-repeat: repeat;
		background-position: top left;
	}

}

/* REDUCED MOTION */
.rm-pause.rm-active {
	animation: none !important;
	transition: none !important;
}
.rm-hide.rm-active {
	display: none !important;
}

/* NAVBAR */
.nb-tabs {
    display: flex;
    justify-content: center;
}
.nb-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#nb-mobile {
	padding: 0px;
	margin: 0px 0px 0px 40px;
	width: calc(100% - 115px);
	display: none;
	min-height: 34px;
	border-radius: 0;
}
#nb-mobile-text {
	display: inline-block;
	transform: translateY(-1px);
}
.nb-tabs-wrapper {
	margin: 0px 75px 0px 40px;
    position: relative;
}

@media screen and (max-width: 800px) {
	.navbar {
		position: sticky;
		top: 0%;
		z-index: 1000;
	}
	#nb-mobile {
		display: block;
	}
	.nb-tabs {
		display: none;
		margin: 0px;
	}
	.nb-open .nb-tabs {
		display: block;
	}
	.navbar {
		position: fixed;
		width: 100%;
	}
	.nb-tabs-wrapper {
		width: 100%;
		margin: 0;
	}
}

/* TOOLBAR */
.toolbar {
	position: fixed;
	font-family: "Courier New", Courier, monospace;
	width: 100%;
	height: 35px;
	z-index: 1100;
	box-sizing: border-box;
}
.t-link img {
	width: 15px;
	height: 15px;
	filter: brightness(0) saturate(100%) invert(60%) sepia(37%) saturate(3274%) hue-rotate(195deg) brightness(98%) contrast(90%);
}
.t-link {
	position: fixed;
	top: 0%;
	width: 34px;
	height: 34px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	border: 1px solid rgb(0, 0, 161);
	background: linear-gradient( 180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 161,0.8) 100% );
	z-index: 1141;
	transition: all 0.5s !important;
}
.t-link:hover {
	background: rgb(72, 91, 255);
	transition: none !important;
}
.t-link:hover img {
	filter: none;
}

#backlink {
	left: 0%;
	border-bottom-right-radius: 10px;
}
#homelink {
	right: 1px;
}
#settingslink {
	right: 34px;
	border-bottom-left-radius: 10px;
}
#settingslink.s-active {
	background: rgb(72, 199, 255);
}
#settingslink.s-active img {
	filter: none;
}
#settingslink img {
	transition: transform 0.3s;
}
.reduced-motion {
	right: 68px;
}
.rm-check-enabled .pause,
.rm-check-disabled .play {
	display: none;
}

#settings {
	position: fixed;
	display: flex;
	top: 16px;
	right: -340px;
	width: 100%;
	max-width: 300px;
	z-index: 1040;
	padding: 20px 10px 20px 20px;
	accent-color: #FF0047;
	font-family: 'Consolas', monospace;
	color: #FF0047;
	transition: all 0.3s;

	background: linear-gradient( 180deg, rgba(0, 0, 0, 1) 0px, rgba(2, 0, 53, 0.80) 100% );
	border: 1px solid rgb(0, 32, 112);
	border-right: none;
	border-bottom-left-radius: 10px;
	border-top-left-radius: 10px;
	box-sizing: border-box;
	flex-direction: column;
	align-items: start;
	gap: 20px;
}

.s-link:link {
	text-decoration: none;
}

.setting img {
	filter: invert(81%) sepia(88%) saturate(1001%) hue-rotate(3deg) brightness(106%) contrast(101%);
	height: 20px;
	width: 20px;
}

.audio-settings {
	display: none;
	flex-direction: column;
	align-items: start;
	gap: 5px;
	width: 100%;
}

@keyframes marquee {
	0% {
		transform: none;
	}
	30% {
		transform: none;
	}
	70% {
		transform: translateX(min(-100% + 160px, 0px));
	}
	100% {
		transform: translateX(min(-100% + 160px, 0px));
	}
}
#now-playing {
	padding: 15px 0px 0px 0px;
	width: 100%;
	font-size: 0.8rem;
	white-space: nowrap;
	text-overflow: clip;
	overflow: hidden;
	display: none;
}
#song-wrapper {
	overflow: hidden;
}
#song-name {
	display: inline-block;
	animation: marquee 4s linear infinite;
}
#no-audio {
	padding: 10px 0px 0px 0px;
	width: 100%;
	color: rgb(141, 170, 13);
	font-size: 0.8rem;
	white-space: nowrap;
	text-overflow: clip;
	overflow: hidden;
}

.slider {
	background: linear-gradient( 90deg, rgba(255, 0, 71, 0) 0%, rgba(255, 0, 71, 0.8) 100% );
	border-radius: 10px;
	height: 10px;
}

.slider::-webkit-slider-thumb, .slider::-moz-range-thumb {
	appearance: none;
	width: 15px;
	height: 15px;
	background: black;
	border: 2px solid #FF0047;
	border-radius: 100%;
	box-sizing: border-box;
}

.slider:disabled {
	opacity: 0.5;
}

@media screen and (max-width: 350px) {
	#settings {
		top: 40px;
	}
}

/** PAGINATION */
#page-nav {
	user-select: none;
	font-family: "Consolas";
	display: flex;
	justify-content: center;
	align-items: center;
}
.page-link {
	width: 25px;
	color: gray;
}
.page-link:hover {
	color: gray;
}
.page-link:link:hover {
	color: rgb(255, 255, 255);
}
.page-link.page-num {
	background-color: #FF0047;
	color: black;
	transition: 0.2s !important;
}
.page-link:link {
	background: none;
	color: rgba(0, 167, 255, 0.80);
}
.page-link.page-num:hover:link {
	background-color: rgba(255, 0, 71, 0.8);
	color: black;
	transition: none !important;
}
#page-prev {
	padding-right: 5px;
}
#page-next {
	padding-left: 5px;
}
#page-infinite-enable {
	padding-left: 5px;
}
#page-infinite-disable {
	width: fit-content;
}
#page-info {
	font-family: "Consolas";
	min-width: 200px;
	text-align: left;
}
#page-info p {
	color: #a8d600;
	margin: 0;
}
.page-ellipsis {
	width: 25px;
	color: rgba(208, 255, 0, 0.6);
	font-size: 0.9em;
	letter-spacing: -2px;
}

/* SIFTER */
.filters {
	align-items: center;
}
.f-name,
.s-name {
	margin-left: 5px;
}
.sf-unselect, .sf-reset {
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 10px;
	padding: 2px 7px;
	font-size: 0.9rem;
	text-transform: uppercase;
}
.sf-unselect:hover, .sf-reset:hover {
	background: rgba(255, 0, 71, 0.3);
}