body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            color: #333;
            display: flex;
        }
        .background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://i.ibb.co/26LFmhX/nvidia-og-image-1200x630-1-1.webp');
            background-size: cover;
            background-position: center center;
            filter: blur(10px); /* Apply blur effect */
            z-index: -1; /* Send background behind other elements */
            animation: slideBackground 10s linear; /* Background animation */
        }

        @keyframes slideBackground {
            0% {
                background-position: 0 0; /* Start position */
            }
            50% {
                background-position: 100% 100%; /* End position */
            }
            100% {
                background-position: 50% 50%; /* Back to start position */
            }
        }

        .stop-animation {
            animation: none !important;
        }

        .content {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            padding: 20px;
            width: 100%;
            max-width: 1700px;
            margin: auto;
            z-index: 1; /* Bring content above background */
        }

        h1 {
            text-align: center;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            font-size: 20px; /* Adjusted font size */
        }

        #container {
            flex: 1;
            margin-left: 20px;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.5); /* Adjusted opacity */
            backdrop-filter: blur(15px); /* Reduced blur radius */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        #sidebar {
            flex-basis: 200px;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.5); /* Adjusted opacity */
            backdrop-filter: blur(15px); /* Reduced blur radius */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        #sentences-container {
            display: flex;
            flex-wrap: wrap; /* Allow wrapping of flex items */
        }
        #edit-heading-input, #edit-sentence-input {
            width: 100%;
            margin: 10px 0;
        }

        #edit-heading-input {
            display: block;
            margin-bottom: 10px;
        }

        .sentence-block {
            width: calc(33.33% - 20px); /* Adjust width to fit three blocks in a row */
            margin: 10px 10px 10px 0; /* Adjust margin for spacing between blocks */
            padding: 15px;
            background-color: #ffffff; /* White background color */
            cursor: pointer;
            white-space: pre-wrap; /* Enable text wrapping */
            box-sizing: border-box; /* Include padding and border in the box's total width and height */
            border-radius: 5px; /* Add border radius for rounded corners */
            border: 2px solid #4CAF50; /* Greenish border */
            color: #333; /* Text color */
            height: 110px; /* Fixed height for the sentence block */
            overflow: hidden; /* Hide overflow content */
            transition: background-color 0.3s ease; /* Add transition effect for background color */
            position: relative; /* Add position relative to the sentence block */

        }

        .sentence-options {
            position: absolute; /* Position the three dots absolutely */
            top: 10px; /* Adjust top position */
            right: 10px; /* Adjust right position */
            cursor: pointer;
        }

        .sentence-block:hover {
            background-color: #f0f0f0; /* Change background color on hover */
        }

        #add-category {
            cursor: pointer;
            font-size: 18px;
            margin-bottom: 10px;
            color: #333;
            text-align: center;
        }
        .category.selected {
            background-color: #8fd156;
            color: black;
        }
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 9999; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 40%; /* Could be more or less, depending on screen size */
        }

        /* Close Button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        #categories-container {
            max-height: none;
            overflow-y: auto;
        }

        #add-category-form {
            display: none;
        }

        #add-sentence-form {
            display: none; /* initially hidden */
        }

        #overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        #popup-box {
            background: #fff;
            padding: 20px;
            width: 50%;
            text-align: center;
        }
        .category {
            margin: 10px 0;
            padding: 15px;
            background-color: #b0e57c;
            cursor: pointer;
            font-weight: bold;
        }

        .category:hover {
            background-color: #8fd156;
        }
        .heading-container {
            display: flex;
            justify-content: center; /* Center the items horizontally */
            align-items: center;
        }

        .main-title {
            margin-right: auto; /* Push the main title to the left */
            margin-left: auto; /* Push the main title to the right */
        }
        .creator-info {
            position: absolute; /* Position the creator info absolutely */
            top: 10px; /* Adjust top position */
            right: 10px; /* Adjust right position */
            font-size: 12px; /* Adjust font size */
            color: #666; /* Adjust color */
        }
        #category-list {
            display: none; /* Hide the category list by default */
        }
        .popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            border-radius: 5px;
            animation: popupAnimation 2s ease-out;
            z-index: 9999; /* Set a high z-index value */
        }

        @keyframes popupAnimation {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

        #backup-restore {
            margin-top: 20px;
            text-align: center;
        }

        #backup-btn,
        #restore-btn {
            margin: 5px;
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
        }
        #toggle-container {
            text-align: center;
            margin-top: 20px;
        }

        #toggle-container {
            text-align: center;
            margin-top: 20px;
        }

        #toggle-container label {
            font-size: 16px;
            display: block;
        }

        #toggle-expand {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 40px;
            height: 20px;
            background-color: #ccc;
            border-radius: 20px;
            outline: none;
            position: relative;
            cursor: pointer;
            display: block;
            margin: auto;
        }

        #toggle-expand:checked {
            background-color: #4CAF50;
        }

        #toggle-expand::before {
            content: '';
            position: absolute;
            width: 18px;
            height: 18px;
            background-color: #fff;
            border-radius: 50%;
            top: 1px;
            left: 1px;
            transition: 0.3s;
        }

        #toggle-expand:checked::before {
            left: 21px;
        }

        #search-container {
            text-align: center;
            margin-top: 20px;
        }

        #search-input {
            width: 150px; /* Adjust the width as needed */
        }

        #search-container input[type="text"] {
            width: 150px; /* Set the desired width */
            height: 30px; /* Set the desired height */
            font-size: 14px; /* Set the desired font size */
            padding: 5px; /* Adjust padding as needed */
            box-sizing: border-box; /* Include padding and border in the box's total width and height */
        }
        #search-container button {
            margin-top: 10px;
            display: block; /* Display the input and button in a block layout */
            margin: 5px auto; /* Center the input and button horizontally */
        }