* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: absolute;
            height: 100vh;
            font-family: Helvetica, Arial, sans-serif;
        }

        img {
            padding: 0;
            margin: 20px;
            width: 26em;
            border-style: none;
            border-width: 1px;
            border-color: #1a1a1a;
        }

        .tooltip-wrapper {
            position: relative;
            display: inline-block;
        }

        /* captioned image layout */
        .img-with-caption {
            display: flex;
            flex-direction: column;
            margin: 0;
            text-align: right;
        }

        .img-with-caption img {
            display: block;
            margin: 0;
            width: 26em;
            border-style: none;
        }

        .img-with-caption .caption {
            margin-top: 6px;
            font-size: 12px;
            color: #1a1a1a;
            text-align: right;
        }

        /* Photo credit aligned to the right below the image */
        .photo-credit {
            display: block;
            text-align: right;
            font-size: 12px;
            color: #1a1a1a;
            margin-top: 4px;
        }

        /* Container that groups images and credit so credit aligns to images */
        .images-block {
            display: inline-flex;
            flex-wrap: wrap;
            gap: 20px;
            vertical-align: top;
        }

        .images-block .photo-credit {
            order: 1;
            flex: 0 0 100%;
            width: 100%;
            text-align: right;
        }

        /* keep tooltip rules for any remaining instances, but hide by default */
        .tooltip {
            display: none;
        }

        #sidebar {
            width: 200px;
            background-color: #fbfbfb;
            color: #1a1a1a;
            padding-top: 50px;
            padding-left: 20px;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
        }

        #sidebar button {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            background-color: #fbfbfb;
            color: #1a1a1a;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
            text-align: left;
        }

        #sidebar button:hover {
            text-decoration: underline;
        }

        .nodecoration {
            text-decoration: none !important;
            cursor: default !important;
        }

        #lang-switch {
            display: flex;
            gap: 8px;
            margin-bottom: 15px;
        }

        #lang-switch button {
            width: auto;
            margin-bottom: 0;
            background-color: none;
            color: #1a1a1a;
            border: none;
            cursor: pointer;
            font-size: 11px;
        }

        #lang-switch button.active{
            background-color: none;
            color: #1a1a1a;
            text-decoration: underline;
        }

        #lang-switch button:hover{
            background-color: none;
            color: #1a1a1a;
        }

        #sidebar p {
            font-size: 11px;
            position: absolute;
            bottom: 40px;
            padding: 10px;
        }

        #main-content {
            margin-left: 200px;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            overflow-y: auto;
            transition: margin-left .5s;
            padding: 16px;
        }

        .txt-right{
            display: block;
            text-align: right !important;
            text-indent: 0 !important;
            margin-left: auto;
            width: 100%;
        }

        .content-panel p.txt-right {
            text-align: right !important;
            text-indent: 0 !important;
        }

        .content-panel {
            display: none;
            text-align: justify;
            width: 33%;
        }

        .content-panel.active {
            display: block;
            padding-top: 50px;
        }

        .content-panel h2 {
            margin-bottom: 20px;
            font-size: 20px;
            color: #1a1a1a;
        }

        .content-panel p {
            font-size: 12px;
            color: #1a1a1a;
            width: 100%;
            line-height: 1.5;
            text-indent: 50px;
            text-align: justify;
        }


        #floats-img {
            float: left;
            width: 200px;
            margin-left: 20px;
        }

        footer {
            text-align: right;
            position: fixed;
            right: 200px;
            bottom: 20px;
            padding: 3px;
            opacity: 0.0;
        }

        footer:hover {
            text-align: right;
            position: fixed;
            right: 200px;
            bottom: 20px;
            padding: 3px;
            opacity: 0.04;
        }

        a:link {
            color: #1a1a1a;
            text-decoration: none;
        }

        a:visited {
            color: #1a1a1a;
            text-decoration: none;
        }

        a:hover {
            color: #fbfbfb;
            background-color: #1a1a1a;
            text-decoration: underline;
        }

        a:active {
            color: #fbfbfb;
            background-color: #1a1a1a;
            text-decoration: underline;
        }

        #sidebar-overlay {
            display: none;
        }

        @media screen and (max-width: 767px) {
            #sidebar {
                padding-top: 15px;
                transform: translateX(-100%);
                transition: transform 0.3s ease-in-out;
                z-index: 1000;
            }

            #sidebar.open {
                transform: translateX(0);
            }
            
            /* Overlay for sidebar so that clicking outside closes it */
            #sidebar-overlay {
                display: block;
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.35);
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s ease, visibility 0.3s ease;
                z-index: 900;
            }

            #sidebar-overlay.active {
                opacity: 1;
                visibility: visible;
            }

            #sidebar-open {
                position: fixed;
                top: 5px;
                left: 10px;
                font-size: 20px;
                cursor: pointer;
                background-color: white;
                color:  #1a1a1a;
                padding: 10px 15px;
                border: none;
                z-index: 999;
            }

            #sidebar-open:hover {
                background-color: #1a1a1a;
                color: #fbfbfb;
            }  
            
            #sidebar-close {
                position: absolute;
                top: 5px;
                right: 25px;
                font-size: 24px;
                margin-left: 50px;
                cursor: pointer;
                background: none;
                border: none;
                color: #1a1a1a;
            }

            #sidebar-close:hover {
                color: #fbfbfb;
            }

            #main-content {
                transition: margin-left .5s;
                padding: 16px;
                margin-left: 0;
            }

            .content-panel {
                display: none;
                text-align: justify;
                width: 100%;
            }

            .img-with-caption,
            .img-with-caption img,
            .images-block {
                width: 100%;
                max-width: 100%;
            }

            .img-with-caption {
                box-sizing: border-box;
                padding: 0 0px;
            }

            .img-with-caption img {
                width: 100%;
                max-width: 100%;
                margin: 20px auto 0;
            }

            .img-with-caption .caption {
                text-align: right;
                width: 100%;
                box-sizing: border-box;
                padding: 0 0 2px;
            }

            .images-block {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 20px;
            }

            .photo-credit {
                width: 100%;
                box-sizing: border-box;
                padding: 0 0px;
                margin: 2px 0 0px;
                overflow-wrap: anywhere;
                text-align: right;
            }

        }

        @media screen and (min-width: 768px) {
            #sidebar-open {
                display: none;
            }
            #sidebar-close {
                display: none;
            }
        }