<style>
    body { font-family: 'Inter', sans-serif; }

    .bg-pattern {
        background-color: #0f172a;
        background-image: radial-gradient(#1e293b 1px, transparent 1px);
        background-size: 20px 20px;
    }

    /* Custom styling for the video player to match the theme */
    video {
        border-radius: 0.75rem;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        border: 1px solid #1e293b;
		width: 100% !important;
        height: auto !important;
        display: block;
    }

    .pagination-links {
        display: flex;
        justify-content: space-between; /* Pushes "Prev" to the left, "Next" to the right */
        width: 20px; /* Adjust width as needed */
        margin: 20px auto; /* Adds space above/below and centers the block */
        padding: 10px 0;
    }

    .nav-link {
        text-decoration: none; /* Removes the default underline */
        padding: 10px 15px;
        background-color: #007bff; /* Professional blue background */
        color: white; /* White text */
        border-radius: 5px; /* Slightly rounded corners */
        transition: background-color 0.3s ease; /* Smooth color change on hover */
        font-family: sans-serif; /* A clean, modern font */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    }

    .nav-link:hover {
        background-color: #0056b3; /* Darker blue on hover */
    }

    .index-link {
        text-decoration: none; /* Removes the default underline */
        padding: 5px 80px;
        background-color: #005bff; /* Professional blue background */
        color: white; /* White text */
        border-radius: 5px; /* Slightly rounded corners */
        transition: background-color 0.3s ease; /* Smooth color change on hover */
        font-family: sans-serif; /* A clean, modern font */
        box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
        font-size: 1.25rem;
    }

    .flex-center-container {
        display: flex;
        justify-content: center; /* Centers the content horizontally */
        /* Optional: adds space above and below */
        padding: 6px;
    }
    .flex-right-container {
        display: flex;
        justify-content: right; /* Right the content horizontally */
        /* Optional: adds space above and below */
        padding: 0px;
        font-size: 0.85rem;
    }

    p.my-reply {
        margin-left: 2em;
        padding: 0;
        margin-top: 0;
        font-style: italic;
    }

    body {
        font-family: 'Noto Sans Ukrainian', Arimo, Arial, sans-serif;
        /* Or for a specific project with downloaded fonts */
        /* font-family: 'Lugatype', sans-serif; */
        font-size: 14px;
    }

    .video-container {
        width: 100%;
        max-width: 800px; /* Optional: Sets a maximum size for desktop */
        margin: 0;
    }

    .user-auth-bar {
        display: flex;
        align-items: center; /* Vertically centers the text and button */
        gap: 10px;           /* Adds space between the name and the button */
    }

    .user-auth-bar form {
        margin: 0;           /* Removes default form spacing */
    }

    .main-list a {
        font-size: 1.2rem;   /* 1.2rem is roughly 20% larger than default */
        font-weight: 500;       /* Makes the text slightly thicker */
    }

    /* Targeting standard Django form widgets inside your comment container */
    .comment-form textarea,
    .comment-form input[type="text"],
    .comment-form input[type="email"] {
		background-color: #1e293b;       /* slate-800 for the input field */
		color: #e2e8f0 !important; /* slate-200 to match your body text */
        border: 1px solid #475569; /* slate-600 */
        border-radius: 0.5rem;
        padding: .1 rem;
        width: 100%;
        outline: none;
        transition: border-color 0.2s;
    }

    .comment-form textarea:focus,
	.comment-form input:focus {
        border-color: #3b82f6; /* blue-500 */
		color: #f8fafc !important;       /* slate-50 (even brighter) */
		background-color: #0f172a;       /* slate-900 */
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
		outline: 2px solid #3b82f6;      /* blue-500 highlight */
    }

    .comment-form label {
        display: block;
        margin-bottom: 0.2rem;
        font-size: 0.65rem;
        color: #94a3b8; /* slate-400 */
    }

	/* Remove bullets */
	.comment-list,
	.comment-list ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* Each comment block */
	.comment {
		margin-bottom: 1rem;
		 padding: 0.75rem;
		border-radius: 6px;
		background: #f9fafb;
		/*background-color: #0f172a;*/       /* slate-900 */
		background-color: #102036;
	}

	/* Container for replies */
	.comment > .children {
		margin-top: 0.75rem;
		margin-left: 2rem;
		padding-left: 1rem;
		border-left: 2px solid #e5e7eb;
		background-color: #f6823b;       /* slate-500 */
	}

	/* Progressive indentation by depth */
	.comment.depth-1 { margin-left: 0; }
	.comment.depth-2 { margin-left: 1rem; }
	.comment.depth-3 { margin-left: 2rem; }
	.comment.depth-4 { margin-left: 3rem; }
	.comment.depth-5 { margin-left: 4rem; }

	/* Optional: soften deeper levels */
	.comment.depth-3,
	.comment.depth-4,
	.comment.depth-5 {
		background: #f3f4f6;
	}

	/* Author + date spacing */
	.comment-header {
		font-size: 0.85rem;
		color: #6b7280;
		margin-bottom: 0.25rem;
	}

    .comment-wrapper {
        padding-left: calc(var(--level) * 1.0rem);
        box-sizing: border-box;
    }

    /* Mobile */
    @media (max-width: 576px) {
        .comment-wrapper {
            padding-left: calc(var(--level) * 0.5rem);
        }
    }

    .comment-wrapper {
	    border-left: 1px dotted #91959b;
        padding-left: 0.75rem;
    }

    @media (max-width: 576px) {
        .comment-wrapper {
			border-left: 1px dotted rgba(145, 149, 155, 0.4);
            padding-left: min(calc(var(--level) * 0.6rem), 2.5rem);
        }
    }

    @media (max-width: 576px) {
        .comment-wrapper .comment-header {
            font-size: 0.7rem;
        }
    }

</style>
