/* Add your base64 encoded font here */
        @font-face {
            font-family: 'CustomFont';
            src: url('data:font/woff2;base64,d09GMgABAAAAAA0QAA4AAAAAFmAAAAy9AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYGVgBsCAwJglMKoFSaSgsaAAE2AiQDMAQgBYNRBzoMDBtBElGUcVYj2RcHtjHzoTo8E4qh7Vk5yw6yEi9LgYrDCtNHv4yQZPbn+VP/nHvffQzuiwq9FCniSYUnZ2zGdFC3pZOddcqnWSLc3d6yKOAQE2lepJHkVGYcWTJTSjr1Etc7fi8dyAntaqLfffQD3+V+b7szVYmlgiwbW6GBVFmahFveJI/aHoE6FuZ++x8XYOd9a692f5ISqrwq/GRcZI2vMTOzt687sx/3AgRXJBdZXdc6QOFyv0Ds2Va4ugqp44qyaks9BDFkK3s4/XdZzqqSiQhQCSxUXpPXaRYgAJgSkE0AAUGLQ7IRtwMDgAnSBbB5dpw28DfYEOGHzlpzmqCMAXMzqPUC1AePnU4QpmCHODRXCDC8xQb88HQEDOhtkKiJGs009wP+3Anf3fqJvFM8upN54QZCMtxa7mjtqpIlX6/2PSv9h19H3BpJYuuaYHXWXaAAHTvGnwT0GUZ1Y1UCG/xJIL4kYIl7einqM2oStKBm4PC8iLHR2Fg/YaNRY8SiExJCgYenMRM3RoJGAgaNxmznwcOdKItkLPeYGIl08SdBYFEtgBLQYEy5uXoKOv7vRTPz9cI9Uk//4QOGJ5ZXZSTKqiIZbrdRnXiw/0492OKORBRFsZQ4dCxpTC1vQiqLJS4nM+BBgq4jsnHjRjPxuHMw/Rkb8yI7E3nuJIITJuF0My2oLsOy/vttWSsZW5CDL0Uy6miVPwmKr5eiVF21gajLD0CZW6QCQD4A+wRAtAHMF2DpTyqJoAABChIIs3c6UlBlKf28QFWbWsfkq8E57YWmRfk5XZft6XQ8Pd+snDs8CqwtPFP5GILp+fev47JX06Nf5UqTuJ+qq7tpJZhdgQQNizoM6siuOAMLwxAwX5TQOM6cuthu91xjNQM8xhfI5v1WqvyW+PBT+sIT0TxpQPsiRHvMwjWyrezlvD9iubXepv9elsqiL2m5WRyK8resLik6JgDyNqetNiwtJTqydob9YWOBB2Dwll0GDJYR6PIF27L6zaIy9gYwQYGjTQKXl8X9njheQJ+I+1vvIcbCiYVyeHKpvTEAqxe5W6H6aMfC62Bv2IZFZ+mCm0WJPtBRSSKQTW/OEY6nz0a/h17rdVnI5rmH6+so2xYrfRvN42MPHUVVw1WnjFWWnYdBq5Nxo4StLChVHjuDYgFshyhIx2h5YjOlsSTccEu8cAzGY1oMCUyCzGwQJ9FY1n74/UHYMN0AYUc3Z8/9/TPPe2hoiwBtWWgYfhXyLyRs0t79ocpYyshaLtlDDHii5FTVOqh5eH1A3iBvcWhBwe7WvQTAQtsWoCz7Ie76xApE+DYwE2Q9zyi7yNTnjDa0bRm9ihTiQzxgEkVdEDZV1YYW+x2J4yN+bF5wafk/4/nv+wuysuDgyeDBjCPf1v6+6xn0QU0tl4rbrj1bG+lDbrhzqCzDdxGsIIraFgj6j3SiRz/+H5+0CnRN+06YUTPKuNKIqLCXYdq+56yEaGdPkCAy0kYn52fJm60bcPz8eScBLJC7K4z0qvkU3cMY+FKtydIytkvrHntTclrVzuR/wufrMqvO+AASh8x6WtvRhxXcOEl47Pr043ilu0OcepU58WreRR9Zv3GDJ7FLcKPl6bLmqtMoEh2JbdB2xd5Trza1cFeGl/3cRvT0OWuiI1nroA0agG6avqoWnP9WalXz20o34EdNOOpC2qfxZqilWxMk6mzf1dW0QvqSY/kewmxrHRYl4lBWckqnbJ6tjXptE7mtrErUQWrPCUUwatu9R27O0gDfSlOr4CkiiQ9ij5NHVVigs9RQPKBPQRG0onzAPk6+zDbHO9FcDdQRzU9SY7GBLT/bRDSZgOtqblbW7NN57oNHFhFUJdnMBKska0hn79qeO3t+YnSEiKIkSSISmcOsKJd3tU+h+Z58ITpIwhCyEn+JEFiaFG8Zn/3+6RjZ6XT+8PapttpC9vLj+0V/b07sovj1lQ8Cwt1XZ7ANo/CDh5+3KrduP36cKKqqKSrp3ysgSvhV0eUcoWJcRQiahX//bUb60woUba3uKvHSvqeZfFuTOnborGQdvGbcevwWh2ZcbBvl+KNgXVdUoypPmEereOevtIHhSSEUJbm2SEgjx4dfbgEcMnkI4E73vIBLHVjUpQhxLYJEiAS4FonX7wW89fmj+pvV+EaWzqK815iRCDvU/zr6hgP7dSYcZwLycVy3k6zxe4doTm2rdtGSnVN//K9n3lSwofgV08g7/ayUCDYB44SceDCxn3MPEzy8XFb4FOW1L++ZwKNtRT7xwffTNDSjlNcxV9pHNGVopxpRqhx8yqyd2r1LYXtLppunCSRd01C46ebjOLS83EJgz741BD7sMpuv+Mh4S5BEwUEFdegKqWzllfHuj8jrnp0VC+9eK6ZdSqei9KEoURIIBghj9GPyikHiiL7uXgLrQLPcrVMmps9rWNLSu9uIhxQ7n5NrJ6i8qmmVLI0bPJBpr9zdQ8U3xgY8Y0nZ8mrsdJZORRFw5clVSD62fczBl+UD/cYjCcNZ9ke5LkBkgsiYgFzm+CClx8G9jei/GyuSypPLyehZRwcydZBDcw6K9saY0dlCGhCb9cc+u63bGbMDtnz8EAL2j8lzK2ycxHFQrx899ytzlIqdloxpWRWa7ekyt/4HySRRXvED0myjD0l8+OaKMZqfVAVMIthsIK3wilKnms6K2jW2sLhdn3gWMmaSJIFZGL/xcAuVDIfDkPRJ4VuvP6aPnNELcB0UXjwwAa/P/0SlH/3xZuF5IqNQWOIRBi4tzSauOMTK8KadE/RW2/7x+hl3Wr4f0j30o1xns+o8BaGouBh6vsPkKFZdDT97Ml7hk8G++84jlaP6m4Ku0itPp9vsZtvb0/s0cdT+d5BGArOijyPlw98zVJWaXjn1iomGaLNbU+Nn9hZ9RtYd2mwHi2Bd+VHgIrpQX0Z2pl4XtakKhgBn4T0j/92tSB4nzeDuYNRXOwcHxrh/1EX24maFiDzIVLYyefamZuq5EF2caVc19aXnBmna9Nr9ED+H8vQGzDt8ZamoMt11r7K+/eO3mpuGmdZaUUKmu+5RJljvjJ1cCbKmyrKqlY3GHZJ0Qm9nMoXuh4z13222bt/9/RjqC3QjJM779zJrhLWpDJKLOjcX0OzQ1oFL6OIs/Xmz9vi6vYpy171vqdakRkSW3ok1fZBS8n4NR41QDdCpY4MebjZ2KOYnFXr+0BSHec2tyR45R0T3JpU0pByyuM3ya6op1WJZeHqO6Yw+QktLdWWNynH+UGB7EEOgg85bXn4IVt265NOuY0pxZ3tL3tLV9p737+Go2dQHXF8hGGJmx3tD9HoM5nskvNLu172dsA4dbARjjTFiL+ycwrikQ7Q+fUs3rR0+SbWmXW5c9CKbe+ZUPvSeI/WHX24JE44vMtNvn0svWhZpqre2SJJWNd1QSaUNXLpgaljWoOmjvpmbCowfaDvyP3l6hrnj3Y9NI4FwgMA6QMnsc6mzJiQs5gvLBqzXG1B3wWFqEYSCBkk71dwpT+WzRo+i57+7ptwT7SAVMvIQITdeaSF48uFHQobsfZsiBdvBA3HE/qK4nUAzjVXIy9UBnve8gqe4kM3bsMCiWTJO3ziri5xZmX3a+ilckqXAxp19pYp085PocDpyjjsdTjcAQFnbsYTKRCRWYiYamR3rHasZPz5GvfzF2EOpFecNhcuo00ag9N1pF9utt3LUnJy38xnfmvA2fUslkX4QDJ7jewla/l1+QUXt3Hm6H50klSBhsJC/+0zpjY33jRkzePB+eqmc3ldGXRZy375Ja/ftA+p91NxAk/cyQe1DOVYupopIV5aunL0sTmeXjistKi0XKHQu3jvGsDYkSACCpaXJLfkwNr95dvHQSRSKoaS4uRbQqnfh0QZdLyDA6InG9Dbzx1q7/Sbn0C8BAG6//5h/ZluZ0TVbqQ9WyUCgGQG2cNEjhWx/UH8fBRCg3YS/2jSbT9bvRjbBlGyBBQsPQ2IaRxs+c+TFtu0g4A0rD4HFiHDqvP4SQJcFrlrKZ1ZJBA18dUmSgh06ThcOJRmYoWdUBBWGoX6BoHQMF7WSCC64qy5JUvDAC9MFK8kgHX67NxEcaO05MxadYdTNnDZ9QjQ2LRgn/esh8b/iMT+xKP5XQtL04qY/3Lldm69ZoHcXR3YxtqTLx0Wu+a0Uj+Z0MHCuAz3NFBM1gwF1y+7TTDdBVEzaghAfZAdgkjkmlvygbllgFjLj5mg0F4X9Ty0zzdhwk47HZ5WmC0NnaAdtwLgJ1TxTeC54gTmdJl3AOEkHs9tACEIQlhpfC3LRhbn8cC8kABttvVobKJheDD8oBKEDVKlVp7eBhl0A790Az/PiBQA=') format('woff2');
            font-weight: normal;
            font-style: normal;
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/3c6e6e17-c585-47d5-9a96-844432749979/deff7td-82c9f2e6-ee3e-42e2-bee4-574bfebd1eaf.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzNjNmU2ZTE3LWM1ODUtNDdkNS05YTk2LTg0NDQzMjc0OTk3OVwvZGVmZjd0ZC04MmM5ZjJlNi1lZTNlLTQyZTItYmVlNC01NzRiZmViZDFlYWYuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.O_uSL7S4374eu9VoAAaBrxMJHrh5EXh9Y8Avw9BwHrQ') no-repeat center center fixed; 
            background-size: cover;
            color: white;
            display: flex;
            flex-direction: row;
        }

        #leftPanel {
            width: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 75px;
            font-family: 'CustomFont', sans-serif; /* Custom font for LoadSite */
            position: relative;
        }

        #timeDisplay {
            font-size: 14px;
            font-weight: bold;
            font-family: 'Lexend Deca', sans-serif; /* Lexend Deca for time */
            text-align: center;
            margin-top: 10px;
        }

        #rightPanel {
            width: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .optionButton {
            padding: 15px 30px;
            font-size: 20px;
            cursor: pointer;
            border: none;
            background-color: transparent;
            color: white;
            border-radius: 10px;
            margin: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow */
            transition: box-shadow 0.2s ease;
            font-weight: bold;
            font-family: 'Lexend Deca', sans-serif; /* Lexend Deca for buttons */
        }

        .optionButton:hover {
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
        }

        #googleDriveContainer {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 20px; /* Space below the Credits button */
        }

        #googleDriveContainer a {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #googleDriveContainer img {
            width: 40px;
            height: 40px;
        }
        
                .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.8);
            border-radius: 10px;
            padding: 20px;
            color: white;
            z-index: 1000;
            width: 80%;
            max-width: 600px;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
            transform: translate(-50%, -50%) scale(0.9);
            font-family: 'Lexend Deca', sans-serif;
        }
        
        .popup.show {
            display: block;
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        
        .popup .close {
            cursor: pointer;
            color: red;
            font-weight: bold;
            float: right;
            font-size: 20px;
        }

        .copyButton, .clearButton {
            padding: 8px 14px;
            border: none;
            border-radius: 6px;
            font-family: 'Lexend Deca', sans-serif;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.2s, transform 0.1s ease-in-out;
        }
        
        .copyButton {
            background: linear-gradient(135deg, #000000, #000000);
            color: white;
        }
        
        .copyButton:hover, .clearButton:hover {
            transform: scale(1.15);
        }
        
        .clearButton {
            background: linear-gradient(135deg, #000000, #000000);
            color: white;
        }


        .recentList {
            display: none; /* Hide recent list initially */
            margin-top: 20px;
            max-height: 200px; /* Set a height for the recent list */
            overflow-y: auto; /* Enable scrolling if too many items */
            width: 100%;
            text-align: left;
        }
        .recentItem {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            margin: 5px 0;
        }

        .toast {
            visibility: hidden;
            min-width: 200px;
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            text-align: center;
            border-radius: 8px;
            padding: 10px;
            position: fixed;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 14px;
            font-family: 'Lexend Deca', sans-serif;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }
        
        .toast.show {
            visibility: visible;
            opacity: 1;
        }

        .close {
            width: 30px; /* Adjust size as needed */
            height: 30px;
            cursor: pointer;
}

        /* Settings Button    ..................  ...... .. .  ... ...........................*/
/* Settings Button */
#settings-btn {
    position: fixed;
    top: 10px;
    left: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

#settings-btn img {
    width: 40px;
    height: 40px;
}

#settings-btn:hover {
    transform: scale(1.1);
}

/* Settings Popup (Matches Other Popups) */
#settingsPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(20, 20, 20, 0.95);
    padding: 20px;
    border-radius: 10px;
    display: none;
    text-align: center;
    width: 250px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    font-family: "Your-Site-Font", sans-serif; /* Same font as other buttons */
}

#settingsPopup.active {
    display: block;
    opacity: 1;
}

/* Close Button (Matches Other Popups) */
#settingsPopup .close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* Stacked Settings Options */
.settings-option {
    background: #252525;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Switch Toggle */
.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: gray;
    transition: 0.3s;
    border-radius: 20px;
}

.slider:before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #4CAF50;
}

input:checked + .slider:before {
    transform: translateX(14px);
}

/* Toast Notification */
#toast {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px;
    border-radius: 5px;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#toast.show {
    display: block;
    opacity: 1;
}



        
        iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: none;
        }

        #updateLink:hover {
  color: #00ffff;
  text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff;
}

/* Optional: toast for version notice */
#version-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px; /* width */
  max-width: 90vw;
  background: rgba(255, 0, 0, 0.9);
  color: white;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-family: 'Lexend Deca', sans-serif;
  text-align: center;
  z-index: 9999;
  display: none;
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.6);
  animation: fadeIn 0.4s ease forwards;
}


@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}