* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', sans-serif;
    }

    body {
      background-color: #f5f5f5;
    }

    /* Navbar */
    .navbar {
      background-color: #005514;
      padding: 15px 20px;
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
    }

    .navbar h1 {
      font-size: 24px;
    }

    .nav-links {
      list-style: none;
      display: flex;
      gap: 20px;
    }

    .nav-links li a {
      text-decoration: none;
      color: white;
      font-weight: bold;
      padding: 8px 12px;
      border-radius: 5px;
      transition: background 0.3s ease;
    }

    .nav-links li a:hover {
      background-color: #0056b3;
    }

    .menu-toggle {
      display: none;
      flex-direction: column;
      cursor: pointer;
    }

    .menu-toggle div {
      width: 25px;
      height: 3px;
      background-color: white;
      margin: 4px 0;
      transition: 0.4s;
    }

    /* Main Container */
    .container {
      display: flex;
      margin: 20px;
      gap: 20px;
      animation: fadeIn 1s ease-in;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .main-content {
      flex: 3;
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    .main-content h2 {
      margin-bottom: 10px;
    }

    .main-content img {
      max-width:100%;
      height: auto;
      border-radius: 8px;
      margin-bottom: 10px;
    }

    .notice-board {
      flex: 1;
      background-color: #fff8e1;
      padding: 20px;
      border-radius: 8px;
      max-height: 300px;
      overflow-y: auto;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    .notice-board h3 {
      margin-bottom: 10px;
      color: #d17d00;
    }

    .notice-board ul {
      list-style: square;
      padding-left: 20px;
    }

    .notice-board li {
      margin-bottom: 10px;
      animation: slideUp 0.5s ease-in-out;
    }

    @keyframes slideUp {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Scrollbar Styling */
    .notice-board::-webkit-scrollbar {
      width: 8px;
    }

    .notice-board::-webkit-scrollbar-thumb {
      background-color: #ffc107;
      border-radius: 10px;
    }

    /* Footer */
    footer {
      background-color: #343a40;
      color: white;
      text-align: center;
      padding: 15px 10px;
      margin-top: 20px;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .container {
        flex-direction: column;
      }

      .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 20px;
        background-color: #007bff;
        padding: 10px;
        border-radius: 8px;
        width: 200px;
      }

      .nav-links.show {
        display: flex;
      }

      .menu-toggle {
        display: flex;
      }
    }