/*
  This CSS file is for the main layout and styling of the website.
  It includes styles for the body, header, footer, and navigation.
*/

/* Logo and Name Styling */
.logo-container {
    display: flex; /* Use flexbox for the logo and name layout */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    gap: 10px; /* Add space between logo and name */
    margin-top: 20px; /* Add margin at the top */
  }
  
  .logo {
    width: 50px; /* Set fixed width for the logo */
    height: auto; /* Maintain aspect ratio */
  }
  
  .name {
    font-family: 'Orbitron', sans-serif; /* Set font for the name */
    font-size: 1.5rem; /* Font size for the name */
    color: white; /* White text color */
    font-weight: bold; /* Bold text */
    text-transform: uppercase; /* Uppercase the name */
  }
  
  /* Navigation Bar Styling */
  nav ul {
    margin-top: 20px; /* Space above the navigation bar */
    list-style: none; /* Remove default list styling */
    display: flex; /* Use flexbox for layout */
    gap: 2rem; /* Space between menu items */
    justify-content: center; /* Center the navigation items */
    padding: 0; /* Remove padding */
    margin-bottom: 3rem; /* Space below the navigation bar */
    flex-wrap: wrap; /* Allow items to wrap if necessary */
    font-weight: 700; /* Bold font weight for the menu */
  }
  
  nav a {
    color: white; /* White text color for links */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Bold font */
    transition: color 0.3s; /* Smooth transition for hover effect */
  }
  
  nav .active {
    color: #7564ce; /* Light Purple color for active link */
  }


  nav a:hover {
    color: #9d90f0; /* Light Purple color on hover or when active */
    font-weight: 700; /* Maintain bold font on hover */
  }
  
  /* Body, Content, & Overlay Styling */
  body {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    font-family: 'Orbitron', sans-serif; /* Set font for body */
    color: #fff; /* White text color */
    background: url('../images/bg.png') no-repeat center center fixed; /* Background image */
    background-size: cover; /* Cover the entire screen with background */
  }
  
  .overlay {
    position: fixed; /* Fixed overlay to cover the entire screen */
    top: 0; left: 0; /* Position the overlay at the top-left */
    width: 100%; height: 100%; /* Full width and height */
    background: rgba(0,0,0,0.6); /* Semi-transparent black background */
    z-index: -1; /* Ensure overlay is behind content */
  }
  
  h2 {
    text-align: center; /* Center the heading */
    font-size: 2.5rem; /* Font size for the heading */
    margin-bottom: 2rem; /* Space below the heading */
    font-family: 'Orbitron', sans-serif; /* Set font for the heading */
    font-weight: 700; /* Bold font */
    color: #7564ce; /* Light purple color for the heading */
  }
  
  /* Footer Styling */
  footer {
    text-align: center; /* Center the footer text */
    padding: 2rem 1rem; /* Padding inside the footer */
    color: #aaa; /* Light gray text color for the footer */
  }