:root {
        --animation-speed: 0.4s;
    }

    @media (max-width: 767.98px) {
    :root {
            --animation-speed: 0.8s;
      }
    }

    body {
      transition: background-color 0.4s ease, color 0.4s ease;
      /* background-color: var(--background-color);
      color: var(--text-color);
      position: relative;
      overflow: hidden; */
    }

    /* body.dark-mode {
        background-color: #121212;
        color: #ffffff;
    }

    body.light-mode {
        background-color: #ffffff;
        color: #000000;
    } */

    .theme-icon {
        /* font-size: 2rem; */
        /* font-size: 14.61px; */
        cursor: pointer;
        display: inline-block;
        position: relative;
        z-index: 10;
    }


    .theme-icon {
        /* font-size: 2rem; */
        /* pointer-events: none;   */
        /* so clicks go to the button, not the icon itself */
        /* display: inline-block; */
    }

    #ripple-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--ripple-color);
      pointer-events: none;
      clip-path: circle(0% at var(--ripple-x) var(--ripple-y));
      transition: clip-path var(--animation-speed) ease-out;
      z-index: -1;
    }

    @keyframes spinBounceGlow {
      0% {
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(0 0 0px #ffff0000);
      }
      50% {
        transform: rotate(180deg) scale(0);
        filter: drop-shadow(0 0 10px #ffff6499);
      }
      100% {
        transform: rotate(360deg) scale(1);
        filter: drop-shadow(0 0 0px #ffff0000);
      }
    }

    .theme-icon.animate {
      animation: spinBounceGlow var(--animation-speed) ease;
    }