.btn {
    margin: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: none;
    font-weight: 600;
    cursor: pointer;
  }
  
  .btn kbd {
    margin: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
  }
  
  .btn-primary {
    background: linear-gradient(#1f5afe, #0f4cf5);
    color: white;
    box-shadow: inset 0pt 4pt 3pt -2pt #386fff, 0pt 4pt 5pt -3pt #0009;
    border-bottom: 2pt solid #083acd;
    transition: all 0.5s ease;
  }
  
  .btn-primary:hover {
    border-bottom: 4pt solid #083acd;
    translate: 0pt -1pt;
  }
  
  .btn-primary:active {
    box-shadow: inset 0pt 4pt 3pt -2pt #386fff, 0pt 4pt 5pt -3pt #0000;
    border-bottom: 1pt solid #083acd;
    translate: 0pt 0pt;
  }
  
  .btn-primary kbd {
    background-color: #3e6eff;
    box-shadow: inset 0pt -3pt 3pt -2pt #1f54f0, inset 0pt 3pt 3pt -2pt #658dff,
      0pt 2pt 2pt -2pt #0005, 0pt 0pt 0pt 2pt #0d47f0;
  }
  
  .btn-base {
    background: #386fff;
  }
  
  .btn {
    margin: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: none;
    font-weight: 600;
    cursor: pointer;
  }
  
  .btn kbd {
    margin: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
  }
  
  .btn-red {
    background: linear-gradient(#cc050f, #cc050f);
    color: white;
    box-shadow: inset 0pt 4pt 3pt -2pt #cc050f, 0pt 4pt 5pt -3pt #0009;
    border-bottom: 2pt solid #cc050f;
    transition: all 0.5s ease;
  }
  
  .btn-red:hover {
    border-bottom: 4pt solid #7b0509;
    translate: 0pt -1pt;
  }
  
  .btn-red:active {
    box-shadow: inset 0pt 4pt 3pt -2pt #cc050f, 0pt 4pt 5pt -3pt #0000;
    border-bottom: 1pt solid #cc050f;
    translate: 0pt 0pt;
  }
  
  .btn-red kbd {
    background-color: #cc050f;
    box-shadow: inset 0pt -3pt 3pt -2pt #cc050f, inset 0pt 3pt 3pt -2pt #310d0f,
      0pt 2pt 2pt -2pt #0005, 0pt 0pt 0pt 2pt #cc050f;
  }
  
  .btn-base {
    background: #cc050f;
  }