:root {
	--boot-bg: black;
	--blur: 20px;
	--blur-bg: transparent;
}

*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html,
body {
	background: var(--desktop-bg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	overflow: hidden;
	margin: 0;
}

.progress-bar {
	height: 4px;
	background-color: calc(--surface-bg);
	width: 100%;
	overflow: hidden;
}

.progress-bar-value {
	width: 100%;
	height: 100%;
	background-color: var(--primary);
	animation: indeterminateAnimation 1s infinite linear;
	transform-origin: 0% 50%;
}

@keyframes indeterminateAnimation {
	0% {
		transform: translateX(0) scaleX(0);
	}
	40% {
		transform: translateX(0) scaleX(0.4);
	}
	100% {
		transform: translateX(100%) scaleX(0.5);
	}
}



/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
	display: none;
}
  
  /* Hide scrollbar for IE, Edge and Firefox */
* {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
  }



.btn {
	padding: 5px;
	border: none;
	background: var(--surface-bg);
	border-radius: 5px;
	margin-top: 10px;
}

.btn:hover {
	color: var(--primary);
}