html {    
	/*background-color: var(--bg-color);    */
	scroll-padding-top: 50px; 
	/* Adjust to match height of your navbar */
}

body {    
	font-family: Arial, sans-serif;   
	background-color: var(--bg-light-orchid); 	
	/* background-color: #f2f2f2;  */   
	margin: 0;    padding: 0;
}

.container {    
	width: 500px;    
	margin: 50px auto;    
	background-color: white;    
	padding: 25px;    
	border-radius: 10px;    
	box-shadow: 0px 0px 10px gray;    
	text-align: center;
}

.logo {    
	width: 120px;    
	margin-bottom: 15px;
}

h1 {    
	color: #2c3e50;
}

input {    
	width: 90%;    
	padding: 10px;    
	margin: 8px;    
	border: 1px solid #ccc;    
	border-radius: 5px;
}

button {    
	width: 95%;    
	padding: 10px;    
	margin-top: 10px;    
	cursor: pointer;
}

button:hover {    
	opacity: 0.9;
}

#message {    
	margin-top: 15px;    
	font-weight: bold;
}

.forgot-password,
.create-account {    
	margin-top: 10px;
}

.forgot-password a,
.create-account a {    
	text-decoration: none;    
	color: #0078d7;    
	font-size: 14px;
}

.forgot-password a:hover,
.create-account a:hover {    
	text-decoration: underline;
}

.forgot-password-flex {
	display:flex;    
	flex-direction: row;
	text-align: center;
	 padding: 10px 20px 10px 25%;
	 gap: 20px;
}

#createAccountForm {    
	display: none;
}

:root {    
	/* Light Mode */    
	--bg-color: #a6a0cf;    
	--text-color: #231942;
	--bg-light-orchid: #D09FE1;
	
	/* Dark Mode */    
	--bg-color-dark-mode: #3e3377;    
	--bg-color-dark: #000000;    
	--text-color-dark-mode: #fff;    
	
	/* Accent Colors */    
	--accent-color-light: #d2cff5;    
	--accent-color-medium: #684fb5;    
	--accent-color-dark: #482f95;    
	--accent-color-darkest: #231942;    
	--accent-color-green: #28eb76;    
	--accent-color-purple: #6b2c91;    
	--accent-color-darkpurple: #36013f ;    
	
	/* Error Colors */    
	--error-color: #f8bbd0;    
	--error-color-border: #e63946;    
	
	/* Effect for the cards */    
	--text-color-link: #0000FF ;    
	--text-color-visited: #6A0DAD;    
	--text-color-hover: #FF0000;    
	--text-color-active: #FFA500;
}