body {
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  max-width: 600px;
  margin: 80px auto;

  /* dot grid bg */
  background-color: #fdfdfd;
  background-image: radial-gradient(#e1e1e1 1.25px, transparent 1px);
  background-size: 20px 20px;
}

.box {
  /* item alignment  */
  display: flex;
  flex-direction: column;
  gap: 25px;

  justify-content: center;
  align-items: center;

  /* box styling */
  background: rgb(247, 247, 247);
  padding: 60px;
  box-shadow: 0 0 6px 1px rgba(10, 1, 53, 0.148);
  border: 2px dashed rgb(202, 202, 202);
  border-radius: 12px;
}

/* button styles */
button {
  background: #3784ff;
  color: white;
  border: 0px;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  max-width: 120px;
}

button:hover {
  background: #2e5fc8;
}

button:disabled {
  background: #9b9b9b;
  cursor: not-allowed;
}

/* status box styles*/
#status {
  margin-top: 20px;
  padding: 16px;
  border-radius: 12px;
  word-break: break-all; 
}

#status a {
  color: #228df8;
}

.dl-link {
  display: inline-block;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom; 
}

small {
  font-size: x-small;
}

.success {
  background: #d7ffdb;
  border: 2px solid #beedc3;
  box-shadow: 0 0 6px 1px  rgba(10, 1, 53, 0.126);  
  color: #3e3e3e;
}

.error {
  background: #ffebee;
  border: 2px solid #edcfd4;
  box-shadow: 0 0 6px 1px  rgba(10, 1, 53, 0.126);
  color: #b71c1c;
}