body {
	background-color: #fe00b9;
	background: linear-gradient(to bottom, #ff62b7, #fe00b9);
	display: flex;
	flex-direction: column;
	align-items: center; /* Centers horizontally */
	justify-content: flex-start; /* Moves content up */
	min-height: 100vh; /* Full height of the viewport */
	margin: 0; /* Removes default margin */
	padding-top: 10vh; /* Adjust this value to control how high it appears */
}

.container-fluid {
	width: 100%; /* Ensures it takes full width */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Center the button inside the parent div */
.buttonCenter
{
	display: flex;
	justify-content: center;  /* Centers the button horizontally */
	align-items: center;      /* Centers the button vertically */
	height: 100%;             /* Ensure the div takes up full height for vertical centering */
}

#playPauseButton
{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-color: #000000;
	background-image: url("/images/logo-mono-square.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain; /* or 'cover' depending on your preference */
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 100px;
	position: relative; /* Needed for the pseudo-element */
	transition: background-color 0.3s ease;
}

#playPauseButton::before {
	content: ''; /* Required to display the pseudo-element */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.75); /* Black with 50% opacity */
	border-radius: 50%;
	z-index: 1; /* Ensure the overlay is above the background */
}

#playPauseButton i {
	color: #fee12b; /* Icon color */
	z-index: 2; /* Ensure the icon is above the overlay */
}

#playPauseButton.playButton i {
	margin-left: 12px; /* Add padding to the left only when play button is active */
}

#playPauseButton.playButton {
	background-color: #000000; /* Light background for play */
}

#playPauseButton.pauseButton {
	background-color: #000000; /* Light background for pause */
}

#logo {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-color: #000000;
	background-image: url("/images/logo-mono-square.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain; /* or 'cover' depending on your preference */
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 100px;
	position: relative; /* Needed for the pseudo-element */
	transition: background-color 0.3s ease;
}

form .form-control
{
	background-color: #f5f5f5; /* Light grey background */
	border: 2px solid #f5f5f5; /* No border */
	padding: 0.75rem 1rem; /* Larger padding */
	font-size: 1.2rem; /* Slightly larger font size */
	border-radius: 0.25rem; /* Optional: Rounded corners */
}

/* Remove focus box-shadow and slightly darker background when focused */
form .form-control:focus
{
	box-shadow: none; /* Remove focus shadow */
	background-color: #f5f5f5; /* Light grey background */
	border: 2px solid #000000; /* No border */
}

.btn-pink
{
	background-color: #f700b3;
	border: 1px solid #f700b3;
	color: #ffffff;
}

.btn-pink:hover
{
	background-color: #000000;
	border: 1px solid #000000;
	color: #ffffff;
}

.btn-pink-always
{
	background-color: #f700b3;
	border: 1px solid #f700b3;
	color: #ffffff;
}

.btn-pink-always:hover
{
	background-color: #f700b3;
	border: 1px solid #f700b3;
	color: #ffffff;
}