/*
@keyframes colorChange {
	0% { background-color: #a36666; } 
	25% { background-color: #599159; } 
	50% { background-color: #56568b; } 
	75% { background-color: #949458; } 
	100% { background-color: #7c4d4d; } 
}
*/

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: black;
  /*animation: colorChange 60s infinite;*/
}

#stars {
	display: block;
	width: 100%;
	height: 100vh;
	z-index: 0; /* Canvas in the background */
	position: absolute;
	top: 0;
	left: 0;
}
  
h1, .container1, .container2 {
	z-index: 1; /* Higher z-index for content */
	position: relative;
}
  
h1 {
	margin-left: 50px;
	color: white; /* Ensure visibility */
}

h2 {
	color: #fff;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	letter-spacing: 4px;
	padding-left: 5%;
	padding-top: 10px;
}

.onlineStatus1 {
	color: red;
	margin-left: 15px;
}

.onlineStatus2 {
	color: rgb(0, 224, 0);
	margin-left: 15px;
}

.Projects {
	padding-top: 100px;
	margin-top: 0;
	margin-bottom: 0;
}

.container1 {
	position: absolute;
	top: 100PX;
	left: 5%;
}

.container2 {
	position: absolute;
	top: 225px;
	left: 5%;
}

.label {
	padding: 10px;
	font-size: 18px;
	color: #4d4d4d;
}

.copy-text1,
.copy-text2 {
	position: relative;
	padding: 4px;
	background: #d6d6d62c;
	border-radius: 10px;
	display: flex;
}

.text {
	background-color: #86868600;
}

.copy-text1 input.text,
.copy-text2 input.text {
	padding-left: 10px;
	font-size: 18px;
	color: #b3b3b3;
	border: none;
	outline: none;
}

.copy-text1 button,
.copy-text2 button {
	padding: 5px;
	margin-left: 38px;
	background: #8a8a8a9f;
	color: #fff;
	font-size: 18px;
	border: none;
	outline: none;
	border-radius: 10px;
	cursor: pointer;
}

.copy-text1 button:active,
.copy-text2 button:active {
	background: #809ce285;
}

.copy-text1 button:before,
.copy-text2 button:before {
	content: "Copied";
	position: absolute;
	top: 2px;
	right: -70px;
	background: #ffffff21;
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 15px;
	display: none;
}

.copy-text1.active button:before,
.copy-text1.active button:after,.copy-text2.active button:before,
.copy-text2.active button:after {
	display: block;
}


a {
	position: absolute;
	text-decoration: none; /* Removes the underline */
	color: #c0c0c0; /* Change this to your desired color */
}


footer {
	position: fixed;
	height: 50px;
	width: 100%;
	left: 0;
	bottom: 0;
	background-color: #5784f5;
	color: white;
	text-align: center;
}
footer p {
	margin: revert;
	padding: revert;
}





/*-----------------------------------------------------------------------------------------------------------------*/






.toggle-container {
	position: fixed;
	top: 10px;
	right: 20px;
	z-index: 1000;
}
  
.toggle-button {
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
	border: none;
	background-color: #333;
	color: white;
	border-radius: 5px;
}
  
.toggle-button.light-mode {
	background-color: white;
	color: black;
}
  
  /* Default (dark mode) */
body {
	background-color: black;
	color: white;
}
  
  /* Light mode */
body.light-mode {
	background-color: white;
	color: black;
}
  
.toggle-button.light-mode {
	background-color: white;
	color: black;
}