.checkbox {
        opacity: 0;
        position: absolute;
      }

      .checkbox-label {
        background-color: #333;
        width: 50px;
        height: 26px;
        border-radius: 50px;
        position: relative;
        padding: 5px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .fa-moon {
        color: #f6f1d5;
      }

      .fa-sun {
        color: #f39c12;
      }

      .checkbox-label .ball {
        background-color: #fff;
        width: 30px;
        height: 30px;
        position: absolute;
        left: 2px;
        top: 2px;
        border-radius: 50%;
        transition: transform 0.2s linear;
      }

      .checkbox:checked + .checkbox-label .ball {
        transform: translateX(24px);
      }

      .dark-theme {
        background-color: #555;
      }