/* Page transition effect */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #1c1c1c; /* Blackish grey */
    color: #ddd; /* Light grey text */
    opacity: 0; /* Start with hidden opacity */
    transition: opacity 0.5s ease-in-out; /* Smooth fade-in transition */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure body takes at least full viewport height */
}

/* Make body fully opaque once the page is loaded */
body.loaded {
    opacity: 1;
}

.navbar {
    background-color: #121212; /* Really dark gray */
    color: #ddd;
    padding: 10px 20px;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.container {
    display: flex;
    width: 100%;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* Padding to avoid edge-to-edge layout */
    box-sizing: border-box; /* Include padding in width calculations */
}

.logo {
    margin-right: 20px; /* Space between the logo and the nav links */
    flex-shrink: 0; /* Prevent shrinking */
}

.logo-text {
    color: #3498db; /* Blue */
    text-decoration: none;
    font-size: 24px; /* Adjust size as needed */
    font-weight: bold;
    font-family: Arial, sans-serif;
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex: 1;
    justify-content: center;
    gap: 5%; /* Set the gap between navigation links to 5% */
    flex-wrap: wrap; /* Allows wrapping of navigation items */
}

.nav-links li {
    margin: 0;
    flex-shrink: 1; /* Allow items to shrink */
}

.nav-links a {
    color: #ddd; /* Light grey */
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s;
    white-space: nowrap; /* Prevent text from wrapping */
}

.nav-links a:hover {
    color: #3498db; /* Blue */
}

/* Ensure the font size adjusts for smaller screens */
@media (max-width: 768px) {
    .nav-links a {
        font-size: 14px; /* Smaller font size on smaller screens */
    }
}

header {
    background-color: #1c1c1c; /* Blackish grey */
    color: #3498db; /* Blue */
    padding: 60px 20px; /* Adjusted padding */
    text-align: center;
    margin-top: 60px;
}

header h1 {
    font-size: 60px; /* Maintain the large size */
    font-weight: bold;
    margin: 0;
    padding: 0; /* Removed padding */
    background-color: transparent; /* Removed background color */
    display: inline-block;
    border: none; /* No border */
    box-shadow: none; /* No shadow */
}

.separator {
    width: 100%;
    height: 2px; /* Thinner separator for a more refined look */
    background-color: #121212; /* Match the dark grey color of the navbar */
    margin: 20px 0; /* Space around the separator */
}

main {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
    flex: 1; /* Allow main content to grow and push footer down */
}

main h2 {
    color: #3498db; /* Blue */
}

form {
    background-color: #1c1c1c; /* Blackish grey */
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

form label {
    display: block;
    margin-bottom: 8px;
    color: #ddd; /* Light grey */
}

form input, form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #3498db; /* Blue border */
    border-radius: 4px;
    background-color: #121212; /* Really dark grey */
    color: #ddd; /* Light grey */
}

form button {
    background-color: #3498db; /* Blue */
    color: #fff; /* White text */
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

form button:hover {
    background-color: #2980b9; /* Darker blue on hover */
}

footer {
    background-color: #121212; /* Really dark gray */
    color: #ddd;
    padding: 10px;
    text-align: center;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.3);
    width: 100%;
    position: relative; /* Ensure it’s positioned relative to the document flow */
}