html { box-sizing: border-box; }
        *, *:before, *:after { box-sizing: inherit; }
        body {
            font-family: monospace, sans-serif;
            background-color: black;
            color: white;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        header {
            background-color: black;
            color: white;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            position: fixed;
            width: 100%;
            z-index: 100;
            height: 100px;
        }
        .header-left { display: flex; align-items: center; height: 100%; flex-grow: 1; }
        .logo-container { display: flex; align-items: center; margin-right: 20px; }
        .logo-image { max-width: 100px; height: auto; display: block; max-height: 80px; }
        .header-text { flex-grow: 1; text-align: center; display: flex; align-items: center; justify-content: center; height: 100%; white-space: pre-line; }
        .header-right {
            margin-left: auto;
            height: auto; /* Adjust height to content */
            display: flex;
            align-items: center;
            position: relative; /* Set position to relative */
        }

        .menu-toggle {
            margin-left: auto;
            order: 1; /* Place on the right side */
        }

        .menu-toggle button {
            background: none;
            color: white;
            border: 1px solid #555; /* Add border for better look */
            padding: 10px 15px;
            cursor: pointer;
            font-size: 1em;
            border-radius: 5px;
        }

        .main-nav {
            display: none; /* Hide by default */
            position: absolute; /* Set position to absolute */
            top: 100%; /* Place below the parent element (.header-right) */
            right: 0; /* Align to the right edge of .header-right */
            background-color: rgba(0, 0, 0, 0.8);
            padding: 10px;
            border-radius: 5px;
            z-index: 101; /* Higher z-index to be above other elements */
            min-width: 150px; /* Minimum width of the menu */
        }

        .main-nav.open {
            display: block; /* Show menu on click */
        }

        .main-nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column; /* Set links one below another */
            align-items: stretch; /* Stretch to the full width */
        }

        .main-nav ul li {
            margin-left: 0;
            margin-bottom: 5px;
            width: auto; /* Adjust width to content */
        }

        .main-nav ul li:last-child {
            margin-bottom: 0;
        }

        .main-nav ul a {
            display: block;
            color: white;
            text-decoration: none;
            padding: 10px 15px; /* Add padding on the sides */
            text-align: center; /* Align text to the center */
            border-bottom: 1px solid #333; /* Add separator between links */
            white-space: nowrap; /* Prevent text wrapping */
        }

        .main-nav ul a:last-child {
            border-bottom: none; /* Remove separator for the last link */
        }

        .container { display: flex; flex-grow: 1; margin-top: 100px; }
        .sidebar-left, .sidebar-right { width: 15%; padding: 20px; }
        .content { width: 70%; background-color: white; color: black; padding: 20px; }
        footer { background-color: black; color: white; padding: 10px 20px; text-align: center; position: fixed; bottom: 0; width: 100%; height: 60px; }

        /* Styles for news (moved from home.html) */
        #news-container {
            padding: 20px; /* Add padding to the news container */
        }

        .news-item {
            margin-bottom: 15px;
            margin-left: 20px;
        }
        .faq-item {
            margin-bottom: 15px;
            margin-left: 20px;
            text-align: center;
        }

        .news-header {
            color: #A0522D;
        }

        .news-date {
            text-align: right;
            margin-right: 20px;
            font-size: 0.8em;
            color: #ccc;
        }

        .back-to-top {
            text-align: center;
            margin-top: 10px;
        }

        .divider {
            border: 0;
            height: 1px;
            background: #ccc;
            margin: 20px auto;
            width: 80%;
        }

        .error-message {
            color: red;
            text-align: center;
            margin-bottom: 10px;
        }

        .success-message {
            color: green;
            text-align: center;
            margin-bottom: 10px;
        }

        .back-to-login {
            text-align: center;
            margin-top: 15px;
        }
        .login-description {
            text-align: center;
            margin-bottom: 20px;
        }
		.login-form {
            width: 300px;
            margin: 0 auto 20px;
            padding: 20px;
            background-color: #f9f9f9; /* Opcjonalne tło dla formularza */
            border: 1px solid #ddd; /* Opcjonalna ramka formularza */
            border-radius: 5px; /* Opcjonalne zaokrąglenie rogów formularza */
            color: black; /* Kolor tekstu w formularzu */
        }
        .login-form div {
            margin-bottom: 10px;
        }

        .login-form label {
            display: block;
            margin-bottom: 5px;
        }

        .login-form input[type="text"],
        .login-form input[type="email"],
        .login-form input[type="password"],
		.registration-form input[type="text"],
        .registration-form input[type="email"]		{
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            color: black;
        }

        .login-form button[type="submit"],
		.button-like,
        .registration-form button[type="submit"] {
            background-color: #555;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1em;
            width: 100%;
        }

        .login-form button[type="submit"]:hover,
		.button-like:hover,
        .registration-form button[type="submit"]:hover {
            background-color: #777;
        }

        .info-box {
            margin-left: 20px;
            padding: 15px;
            border: 1px solid #555;
            border-radius: 5px;
            color: black;
        }
		.back-to-login {
            text-align: center;
            margin-top: 15px;
        }
		.login-options {
			margin-bottom: 15px;
			margin-left: 20px;
			padding: 15px; /* Dodaj trochę paddingu dla lepszego wyglądu */
			border: 1px solid #555; /* Opcjonalnie dodaj obramowanie */
			border-radius: 5px; /* Opcjonalnie zaokrąglij rogi */
		}
		.login-options h2 {
			color: #A0522D;
			margin-top: 0;
			text-align: center;
		}
		.form-container-base {
			margin: 20px auto; /* Wyśrodkowanie kontenera */
			padding: 20px;
			background-color: #f9f9f9; /* Jasne tło kontenera */
			border: 1px solid #ddd; /* Ramka kontenera */
			border-radius: 5px;
			color: black; /* Kolor tekstu w kontenerze */
		}
		
		.password-reset-form {
			width: auto; /* Usuń stałą szerokość jeśli .login-form ją narzuca */
			max-width: 500px; /* Ustaw maksymalną szerokość */
			margin: 40px auto; /* Dostosuj marginesy */
		}
		.form-title {
			text-align: center;
			color: #A0522D; /* Kolor z .news-header */
			margin-bottom: 10px;
		}
		.form-description {
			text-align: center;
			margin-bottom: 20px;
			font-size: 0.9em;
			color: #555; /* Trochę ciemniejszy szary dla lepszej czytelności */
		}
		.button-primary { /* lub .button-sienna */
			background-color: #A0522D; /* Sienna color */
			color: white;
			padding: 10px 15px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 1em;
			width: 100%;
			transition: background-color 0.3s ease;
		}

		.button-primary:hover {
			background-color: #8B4513; /* Darker sienna */
		}