
#background {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: -2;
	
}


body {
	margin: 0;
	padding: 0;
	font-family:'Times New Roman', Times, serif;
}



#sidebar {
	position: fixed;
	top: 0;
	left: 0;
	width: 220px;
	height: 100%;
	background-color: rgba(180, 203, 200, 0);
	
	display: flex;
	flex-direction:column;      
	align-items: center;         
	padding-top: 40px;
	z-index: 100;
}


#one, #two, #three, #four {
	background-color: blanchedalmond;
	width: 180px;
	height: 50px;
	margin-bottom: 50px;          
	text-align: center;
	line-height: 50px;            
	border-radius: 6px;
}


#one a, #two a, #three a, #four a {
	color: black;
	font-weight: bold;
	text-decoration: none;
	display: block;               
	width: 100%;
	height: 100%;
}


#one:hover, #two:hover, #three:hover, #four:hover {
	background-color: rgb(52, 69, 17);
	transition: background-color 1s;
}

#one:hover a, #two:hover a, #three:hover a, #four:hover a {
	color: rgb(228, 217, 217);
}



#main-content {
	margin-left: 220px;           
	height: 80vh;
	display: flex;
	align-items: center;   
	justify-content: center;      
}


.main-text {
	text-align: center;
	color: white;
}

.starter{
	font-size: 23px;
	font-weight:bold;
	letter-spacing: 1px;
	color: whitesmoke;
	text-shadow: 2px 2px 8px rgba(225, 202, 202, 0.6);
}



.main-text h1 {
	font-size: 60px;
	font-weight: bold;
	letter-spacing: 4px;
	margin: 16px ;
	text-shadow: rgba(225, 202, 202, 0.6);
}

.subtitle {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 30px;
	letter-spacing: 1px;
}


.explore-btn {
	display:inline-block;
	background-color: blanchedalmond;
	color: black;
	text-decoration:none;
	font-weight: bold;
	padding: 14px 36px;
	border-radius: 6px;
	letter-spacing: 2px;
	font-size: 14px;
	transition: background-color 1s;
}

.explore-btn:hover {
	background-color: rgb(52, 69, 17);
	color: white;
}
