body {
	background-color: #282a36;
}


/* Apply the Dracula theme to the nav bar */
nav {
    background-color: #282a36;
    color: #f8f8f2;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Display the navigation links horizontally */
nav ul li {
    display: inline-block;
}

/* Style the navigation links */
nav ul li a {
    color: #f8f8f2;
    text-decoration: none;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Add a hover effect to the navigation links */
nav ul li a:hover {
    background-color: #44475a;
}


/* Style the header */
.header {
	background-color: #282a36;
	color: #f8f8f2;
	padding: 20px;
	text-align: center;
	font-family: 'Roboto', sans-serif;
}

/* Style the main content */
.main-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

/* Style the footer */
.footer {
	background-color: #282a36;
	color: #f8f8f2;
	padding: 20px;
	text-align: center;
}

/* Style the socials links */
.footer a {
	color: #f8f8f2;
	text-decoration: none;
	margin: 0 10px;
}

/* Add a hover effect to the socials links */
.footer a:hover {
	color: #bd93f9;
}


/* Style the server cards */
.server-card {
	background-color: #44475a;
	color: #f8f8f2;
	width: 300px;
	min-height: 400px; /* Add a min-height property to the server cards */
	margin: 20px;
	text-align: center;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	font-family: 'Roboto', sans-serif;
	position: relative;
}

/* Style the server card images */
.server-card img {
	width: 100%;
	max-height: 200px; /* Add a max-height property to the images */
	border-radius: 10px 10px 0 0;
}
/* Style the server card titles */
.server-card h2 {
	padding: 20px;
	margin: 0;
	font-size: 24px;
	font-family: 'Roboto', sans-serif;
}

/* Style the server cards */
.server-card {
	background-color: #44475a;
	color: #f8f8f2;
	width: 300px;
	min-height: 400px;
	margin: 20px;
	text-align: center;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	font-family: 'Roboto', sans-serif;
	position: relative;
	transition: all 0.3s ease; /* Add a transition property to the server cards */
}

/* Add a hover effect to the server cards */
.server-card:hover {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Add a drop-shadow to the server cards on hover */
	transform: scale(1.1); /* Scale up the server cards on hover */
}

/* Style the buttons */
.server-card button {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	border: none;
	background-color: #6272a4;
	color: #f8f8f2;
	padding: 10px 20px;
	font-size: 18px;
	font-family: 'Roboto', sans-serif;
	cursor: pointer;
	transition: all 0.3s ease;
}

/* Add a hover effect to the buttons */
.server-card button:hover {
	background-color: #bd93f9; /* Change the background color of the buttons on hover */
	transform: translateX(-50%) scale(1.1); /* Scale up the buttons on hover */
}

/* Style the links */
a {
	color: #f8f8f2;
	text-decoration: none;
	font-family: 'Roboto', sans-serif;
}

/* Add a hover effect to the links */
a:hover {
	color: #bd93f9;
}