body {
  background: #4b111b;
}

.box-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

button {
  background: #a3243b;
  border: none;
  padding: 24px 40px;
  color: white;
  font-weight: 500;
  font-size: 18px;
  cursor: pointer;
  border-radius: 4px;
  width: 100%;
  margin: 16px 0;
}

button:hover {
  background-color: #f2545c;
}

.custom-toast {
  background: #a3243b;
}

function downloadBlob(blob, name = 'file.txt') {
  // Convert your blob into a Blob URL (a special url that points to an object in the browser's memory)
  const blobUrl = URL.createObjectURL(blob);

  // Create a link element
  const link = document.createElement("a");

  // Set link's href to point to the Blob URL
  link.href = blobUrl;
  link.download = name;

  // Append link to the body
  document.body.appendChild(link);

  // Dispatch click event on the link
  // This is necessary as link.click() does not work on the latest firefox
  link.dispatchEvent(
    new MouseEvent('click', { 
      bubbles: true, 
      cancelable: true, 
      view: window 
    })
  );

  // Remove link from body
  document.body.removeChild(link);
}


/* For the example */
const exportButton = document.getElementById('export');
const jsonBlob = new Blob(['{"name": "test"}'])

exportButton.addEventListener('click', () => {
  downloadBlob(jsonBlob, 'myfile.json');
});