body {

    background-color: #121212; /* Dark background */

    color: #FFFFFF; /* White text for contrast */

    font-family: 'Arial', sans-serif; /* Font style */

    margin: 0;

    padding: 0;

}



/* Navigation bar styles */

nav {

    display: flex;

    justify-content: center; /* Center navigation */

    background-color: #1F1F1F; /* Darker nav background */

    padding: 10px 0;

}



nav ul {

    list-style-type: none;

    padding: 0;

}



nav ul li {

    display: inline;

    margin: 0 15px;

}



nav a {

    text-decoration: none;

    color: #FFFFFF; /* White text for links */

    font-weight: bold;

}



/* Title styles */

h1 {

    text-align: center; /* Centered title */

    margin-top: 20px;

}



/* Servers container */

.servers {

    max-width: 1200px; /* Max width for the content */

    margin: 0 auto; /* Center content */

    padding: 20px;

}



/* Individual server card styles */

.server-card {

    background-color: #1E1E1E; /* Card background */

    border-radius: 8px; /* Rounded corners */

    display: flex;

    margin: 20px 0;

    padding: 20px;

    align-items: center; /* Align items in the center */

}



/* Server image styles */

.server-image {

    width: 150px; /* Image width */

    height: auto; /* Maintain aspect ratio */

    border-radius: 8px; /* Rounded corners for images */

    margin-right: 20px; /* Space between image and text */

}



/* Server details section */

.server-details {

    flex-grow: 1; /* Allow this section to grow */

}



/* Server title styles */

h2 {

    margin: 0; /* Remove default margin */

}



/* Join button styles */

.join-button {

    display: inline-block; /* Make button inline */

    background-color: #4CAF50; /* Green button */

    color: white; /* White text */

    padding: 10px 15px; /* Padding */

    text-align: center; /* Center text */

    text-decoration: none; /* Remove underline */

    border-radius: 5px; /* Rounded corners */

    transition: background-color 0.3s; /* Smooth transition */

}



/* Button hover effect */

.join-button:hover {

    background-color: #45a049; /* Darker green on hover */

}



/* Fade-in animation */

.fade-in {

    opacity: 0;

    transform: translateY(20px); /* Start a bit lower */

    transition: opacity 0.5s ease-out, transform 0.5s ease-out;

}



.fade-in.visible {

    opacity: 1; /* Fully visible */

    transform: translateY(0); /* Reset position */

}