:root {
	--primary-color: #269850; /* Updated color for the copy button */
	--primary-hover: #218838;
	--background-color: #031124; /* Static background color */
	--card-background: #ffffff;
	--text-color: #ffffff; /* White/milky text for main content */
	--subtext-color: #808080; /* Gray color for subtext */
	--border-color: #dcdcdc;
	--popup-background: #333333;
	--popup-text: #ffffff;
	--password-background: #e8f5e9; /* Reverted to previous color for password field */
	--password-text: #28a745; /* Reverted text color for password field */
	--file-info-background: #041225; /* New background color */
	--success-color: #4caf50;
	--error-color: #f44336;
	--neon-color: cyan; /* Default neon color */
	--date-background: rgba(255, 255, 255, 0.1); /* Background for the date */
	--date-text-color: #f5f5f5; /* Text color for the date */
}


body {
	margin: 0;
	background-color: var(--background-color); /* Static background color */
	overflow: hidden;
	transition: background-color 0.5s ease;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	position: relative; /* For positioning notifications */
}


/* Style for displaying the current date */
.current-date {
	position: fixed;
	top: 20px;
	right: 20px;
	background: var(--date-background);
	color: var(--date-text-color);
	padding: 10px 15px;
	border-radius: 8px;
	font-size: 16px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
	z-index: 1000;
}


/* Neon Line Background */
.neon-line {
	position: fixed;
	bottom: 0;
	left: 50%;
	width: 800px;
	height: 400px;
	margin-left: -400px;
	border-top-left-radius: 400px;
	border-top-right-radius: 400px;
	border: 15px solid var(--neon-color);
	border-bottom: none;
	box-shadow:
		0 0 20px var(--neon-color),
		0 0 40px var(--neon-color),
		0 0 80px var(--neon-color);
	overflow: hidden;
	z-index: -1;
}


.neon-line::before,
.neon-line::after {
	content: '';
	position: absolute;
	top: -30px;
	width: 60px;
	height: 60px;
	background: var(--neon-color);
	border-radius: 50%;
	box-shadow:
		0 0 30px var(--neon-color),
		0 0 60px var(--neon-color),
		0 0 90px var(--neon-color);
}


.neon-line::before {
	left: -30px;
}


.neon-line::after {
	right: -30px;
}


/* Download Wrapper */
.download-wrapper {
	max-width: 1200px; /* Increased width to accommodate two columns */
	margin: 80px auto;
	padding: 50px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.02);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(1.1px);
	-webkit-backdrop-filter: blur(1.1px);
	border: 1px solid rgba(255, 255, 255, 0.32);
	text-align: center;
	position: relative;
}


.download-wrapper h2 {
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 40px;
	color: var(--text-color);
}


/* Progress Bar Styles */
.progress {
	background: rgba(255, 255, 255, 0.1);
	justify-content: flex-start;
	border-radius: 100px;
	align-items: center;
	position: relative;
	padding: 0 5px;
	display: flex;
	height: 40px;
	width: 500px;
	margin: 0 auto 30px; /* Centered and added bottom margin */
}


.progress-value {
	animation: load 5s normal forwards;
	box-shadow: 0 10px 40px -10px #fff;
	border-radius: 100px;
	background: linear-gradient(90deg, #ff7f50, #1e90ff); /* Gradient resembling a hemisphere */
	height: 30px;
	width: 0;
}


@keyframes load {
	0% { width: 0; }
	100% { width: 100%; }
}


/* Columns Container */
.columns {
	display: flex;
	justify-content: space-between;
	gap: 40px; /* Space between columns */
}


/* Left Column: Instructions */
.instructions {
	flex: 1;
	background: rgba(255, 255, 255, 0.05);
	padding: 20px;
	border-radius: 16px;
	color: var(--text-color);
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}


.instructions h3 {
	font-size: 24px;
	margin-bottom: 20px;
	color: var(--text-color);
}


.instructions ul {
	list-style-type: disc;
	padding-left: 20px;
	text-align: left;
}


.instructions ul li {
	margin-bottom: 10px;
	font-size: 16px;
	color: var(--text-color);
}


/* Right Column: File Section */
.file-section {
	flex: 1;
	position: relative; /* For positioning notification-popup */
}


/* File Details */
.file-details {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--file-info-background);
	padding: 20px;
	border-radius: 16px;
	border: 1px solid var(--border-color);
	margin-bottom: 30px;
	color: var(--text-color);
}


.file-info {
	display: flex;
	align-items: center;
}


.file-info strong {
	font-size: 20px;
	color: var(--text-color);
}


.file-info span.subtext {
	font-size: 16px;
	color: var(--subtext-color);
	margin-top: 4px;
}


.file-icon {
	width: 128px;
	height: 128px;
	margin-right: 20px;
}


/* Password Display */
.password-display {
	background: var(--password-background); /* Reverted background color */
	padding: 16px 28px;
	border-radius: 12px;
	font-size: 20px;
	font-weight: 700;
	color: var(--password-text); /* Reverted text color */
	position: relative;
}


.password-display::after {
	content: 'Password';
	display: block;
	font-size: 14px;
	color: #666666;
	margin-top: 6px;
}


/* Link Section */
.link-section {
	display: flex;
	align-items: center;
	background: var(--file-info-background);
	padding: 10px 22px;
	border-radius: 16px;
	border: 1px solid var(--border-color);
	margin-bottom: 25px;
	color: var(--text-color);
	position: relative; /* For relative positioning of popupMessage */
}


.link-section input {
	border: none;
	background: transparent;
	width: 78%;
	font-size: 16px;
	color: var(--text-color);
	outline: none;
}


.link-section input::placeholder {
	color: #f5f5f5;
}


/* Copy Button */
.copy-btn {
	background-color: var(--primary-color); /* Updated button color */
	color: #ffffff;
	padding: 12px 24px;
	border-radius: 8px;
	border: none;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	white-space: nowrap;
	transition: background-color 0.3s ease;
}


.copy-btn i {
	margin-right: 8px;
}


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


/* Notification Popup */
.notification-popup {
	position: absolute;
	top: 50%;
	left: 105%; /* Position it slightly to the right of the "Copy" button */
	transform: translateY(-50%);
	background: var(--popup-background);
	color: var(--popup-text);
	padding: 12px 20px;
	border-radius: 8px;
	display: none; /* Hidden by default */
	align-items: center;
	animation: bounce 2s infinite;
	white-space: nowrap;
	font-size: 14px;
	z-index: 1001; /* Higher z-index for visibility */
	opacity: 1;
	transition: opacity 0.5s ease; /* Smooth opacity change */
}


.notification-popup.visible {
	display: flex; /* Show element during loading simulation */
}


.notification-popup.hidden {
	opacity: 0; /* Hide element when clicking button */
}


/* Popup arrow */
.notification-popup::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 100%; /* Position arrow to left of popup */
	transform: translateY(-50%);
	border-width: 8px;
	border-style: solid;
	border-color: transparent var(--popup-background) transparent transparent;
}


.notification-popup i {
	margin-left: 8px;
}


@keyframes bounce {
	0% { transform: translateY(-50%) translateY(-6px); }
	50% { transform: translateY(-50%) translateY(6px); }
	100% { transform: translateY(-50%) translateY(-6px); }
}


/* Paste Alert Popup */
.paste-alert {
	position: fixed; /* Fixed positioning relative to viewport */
	top: 40px; /* Distance from top */
	left: 40px; /* Offset to the right */
	background: var(--popup-background);
	color: var(--popup-text);
	padding: 18px 28px;
	border-radius: 8px;
	display: none; /* Hidden by default */
	align-items: center;
	font-size: 16px;
	z-index: 1002; /* High z-index for above other elements */
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}


.paste-alert::before {
	content: '';
	position: absolute;
	bottom: 100%; /* Arrow positioning at bottom */
	left: 20px; /* Align arrow to left */
	transform: translateX(-50%);
	border-width: 8px;
	border-style: solid;
	border-color: var(--popup-background) transparent transparent transparent; /* Arrow pointing up */
}


.paste-alert.active {
	display: flex;
	animation: bounce 2s infinite;
}


.note {
	font-size: 16px;
	color: var(--subtext-color);
}


/* Success and Error Messages */
.success-message,
.error-message {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: #ffffff;
	padding: 20px 28px;
	border-radius: 8px;
	display: none;
	align-items: center;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
	font-size: 18px;
	z-index: 1003;
}


.success-message {
	background: var(--success-color);
}


.error-message {
	background: var(--error-color);
}


.success-message i,
.error-message i {
	margin-right: 10px;
}


/* Loading Screen Styles (If Needed) */
#loadingScreen {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}


/* Media Queries for Responsiveness */
@media (max-width: 768px) {
	.download-wrapper {
		padding: 30px;
	}


	.progress {
		width: 100%;
		height: 30px;
	}


	.progress-value {
		height: 20px;
	}


	.columns {
		flex-direction: column;
		gap: 20px;
	}


	.file-details {
		flex-direction: column;
		align-items: flex-start;
	}


	.file-icon {
		width: 100px;
		height: 100px;
		margin-bottom: 10px;
	}


	.notification-popup {
		left: 90%;
	}
.success-message,
	.error-message {
		width: 90%;
	}


	.current-date {
		top: 10px;
		right: 10px;
		padding: 8px 12px;
		font-size: 14px;
	}


	.paste-alert {
		top: 10px;
		left: 30px; /* Adjusted for smaller screens */
		padding: 12px 18px;
		font-size: 14px;
	}


	.paste-alert::before {
		left: 10px; /* Adjusted for smaller screens */
	}
}