body {
            background-attachment: fixed;
            background-image: linear-gradient(to bottom right, #A0C4E2, rgb(204,169,200));
            font-family: serif;
            background-color: #000;
            color: #fff;
            margin: 0;
            padding: 0;
        }
        nav {
            background-color: rgb(143, 77, 229);
            color: #fff;
            padding: 1em;
        }
        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            font-size: 1.5em;
        }
        nav ul li {
            margin: 0 1em;
        }
        nav ul li a {
            color: #fff;
            text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: rgb(68, 0, 255);
        }
        header {
            background-color: rgba(143, 77, 229, 0.8);
            color: #fff;
            padding: 3em 0;
            text-align: center;
            font-weight: bold;
            word-break: break-word;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            padding: 4em 0;
        }
        h1 {
            font-size: 3em;
            margin-bottom: 0.5em;
            letter-spacing: 0.1em;
        }
        .portfolio {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
            gap: 2em;
        }
        .portfolio figure {
            text-align: center;
        }
        .portfolio figcaption {
            font-size: 1.5em;
            margin-bottom: 0.5em;
        }
        .portfolio img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 1em;
            box-shadow: 0 0 1em #fff;
            transition: transform 0.3s ease-in-out;
            cursor: pointer;
        }
        .portfolio img:hover {
            transform: scale(1.1);
            box-shadow: 0 0 1.5em #fff;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.9);
        }
        .modal-content {
            margin: auto;
            display: block;
            width: 100%;
            max-width: 100%;
            max-height: 100vh;
            object-fit: contain;
            cursor: pointer; /* Added */
        }
        .close {
            color: #fff;
            position: absolute;
            top: 15px;
            right: 35px;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
            cursor: pointer;
        }
        .close:hover,
        .close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }
        .contact {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
        }
        h2 {
            text-align: center;
            background-color: rgba(143, 77, 229, 0.7); /* Inherit background color from parent */
            padding: 1em 1.5em;
            border-radius: 10px; /* Set desired corner radius */
            box-shadow: 0 1px 3px rgba(0, 0, 0, 10); /* Create a slight shadow */
            width: 80%;
            margin-left: auto;
            margin-right: auto;
        }
        p {
            text-align: center;
        }
        @media (max-width: 600px) {
            .container {
                width: 100%;
            }
            .portfolio {
                grid-template-columns: 1fr;
            }
            h1 {
                font-size: 2em;
            }
            h2 {
                font-size: 1.5em;
            }
            .contact {
                padding-top: 1em;
            }
        }

        .about-image {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
            max-width: 100%;
            height: auto;
        }

        .column {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50%;
            height: 100%;
        }
        
        .column-container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
        }

        .about-list {
            font-size: 1.5em;
            background-color: rgba(143, 77, 229, 0.5); /* Inherit background color from parent */
            padding: 1em 1.5em;
            border-radius: 10px; /* Set desired corner radius */
            box-shadow: 0 1px 3px rgba(0, 0, 0, 10); /* Create a slight shadow */
        }

        .letterboxd-diary {
            background-color: rgba(118, 175, 221, 0.5); /* Inherit background color from parent */
            padding: 1em 1.5em;
            border-radius: 10px; /* Set desired corner radius */
            box-shadow: 0 1px 3px rgba(0, 0, 0, 10); /* Create a slight shadow */
            width: 90%;
            max-width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }

        .portfolio-text {
            font-size: 1.5em;
            background-color: rgba(143, 77, 229, 0.5); /* Inherit background color from parent */
            text-align: center;
            padding: 1em;
        }

        #toc {
            margin: 20px;
            padding: 10px;
            max-width: fit-content;
            margin-left: auto;
            margin-right: auto;
            background-color: rgba(118, 175, 221, 0.8);
            border-radius: 10px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 10);
            
        }
        #toc a {
            color: white;
            text-decoration: none;
            font-weight: bold;
            padding: 10px;
            display: block;
            text-align: center;
            background-color: rgba(143, 77, 229, 0.5);;
            border-radius: 10px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 10);
        }
        #toc ul {
            list-style-type: none;
            padding-left: 0;
        }
        #toc li {
            margin-bottom: 10px;
            font-size: 1.2em;
        }
        .purplebutton {
            background-color: rgba(143, 77, 229, 0.5); border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 16px;}
            #backToTopBtn {
                display: none; /* Hidden by default */
                position: fixed; /* Fixed position in the viewport */
                bottom: 30px; /* Distance from the bottom of the screen */
                right: 30px; /* Distance from the right of the screen */
                z-index: 99; /* Ensure it stays above other content */
                background-color: #8f4de5; /* Purple background */
                color: white; /* White text */
                border: none;
                padding: 15px 20px; /* Padding around the button */
                border-radius: 50px; /* Rounded button */
                font-size: 18px; /* Button text size */
                cursor: pointer;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
                transition: opacity 0.3s ease-in-out; /* Smooth transition */
            }
            
            #backToTopBtn:hover {
                background-color: #6d37b4; /* Darker purple when hovered */
            }
            
            /* Make the button visible when scrolling */
            #backToTopBtn.show {
                display: block;
                opacity: 1;
            }
            
            #backToTopBtn.hide {
                opacity: 0;
                transition: opacity 0.3s ease-in-out;
            }
            button:not(#backToTopBtn):not(.tag-button):hover {
                background-color: rgba(143, 77, 229, 0.7);
                text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: rgb(68, 0, 255);
                transition: background-color 0.3s ease-in-out;
            }
            button:not(#backToTopBtn) {
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
            }

            button.active {
                background-color: #43159f;
                color: white;
            }
            .tag-button:not(.active):hover {
                background-color: rgba(143, 77, 229, 0.7);
                text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: rgb(68, 0, 255);
                transition: background-color 0.3s ease-in-out;
            }
            
            .tag-badge {
                display: inline-block;
                margin: 2px;
                padding: 5px 10px;
                border-radius: 15px;
                background-color: #f0f0f0;
                border: 1px solid #8f4de5;
                color: #8f4de5;
                font-size: 0.9em;
                font-weight: bold;
            }
            .tags {
                margin: 10px;
            }
            .date {
                display: inline-block;
                margin: 2px;
                padding: 5px 10px;
                background-color: #f0f0f0;
                border: 1px solid #8f4de5;
                color: #8f4de5;
                font-size: 0.9em;
                font-weight: bold;
            }