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

        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .art-container {
            width: 100%;
            height: 100%;
            position: relative;
            background: #000;
        }

        .art-image {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: #000;
            opacity: 0;
            transition: opacity 1s ease-in-out;
			 cursor: pointer;
			 pointer-events: auto;
        }

        .art-image.active {
            opacity: 1;
        }

        #art-info {
            position: absolute;
            top: 20px;
            right: 100px; /* Adjusted for the buttons */
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px;
            border-radius: 5px;
            max-width: 300px;
            text-align: right;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            pointer-events: none; /* Allow clicks to go through to the image */
            font-family: 'Roboto', sans-serif;
        }

        #art-info.active {
            opacity: 1;
        }

        #art-info.hidden {
            opacity: 0;
        }

        .control-button {
            position: absolute;
            top: 20px;
            width: 30px;
            height: 30px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 18px;
            line-height: 30px;
            text-align: center;
            font-family: sans-serif;
            z-index: 10; /* Ensure button is on top */
        }

        #toggle-info {
            right: 20px;
            font-family: serif;
        }

        #pause-button {
            right: 60px;
        }

        #creation-flash {
            display: none;
            position: absolute;
            top: 48%; /* Final position */
            left: 39.5%; /* Final position */
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 30px 20px white, 0 0 50px 40px #f0e68c, 0 0 100px 80px #87cefa;
        }

        #creation-flash.flash-active {
            display: block;
            animation: flash-effect 0.5s ease-out;
        }

        @keyframes flash-effect {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.1);
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.5);
            }
        }