button {
    
    font-family: revert;
    font-size: 100%;
    
    display: inline-block;
    justify-content: normal;
    align-items: normal;
    gap: 0rem;
    
    line-height: normal;
    
    padding: 0rem;
    
    border: none;
    border-radius: 0rem;
  }
  
  button:disabled {
    opacity: 0.65;
  }
  
  a.button {
    
    line-height: inherit;
    
    border-radius: 0rem;
  }
  
  form button[type=submit] {
    
    margin-top: 2rem;
    
    box-shadow: 0px 0.2em 0.6em -0.2em rgba(0, 0, 0, 0.2);
  }
    
  .primaryButton,
  button.primaryButton,
  a.button.primaryButton {
    
    font-family: "MEDIUM", sans-serif;
    font-size: 0.9rem;
    
    padding: 0.5em 1.5em;
    
    border: 0.05rem solid var(--colour-main-blue);
    
    color: var(--colour-text-light);
    
    background-color: var(--colour-main-blue);
    
    box-shadow: 0px 0.2em 0.6em -0.2em rgba(0, 0, 0, 0.2);
  }
  
  .primaryButton:hover,
  a.primaryButton:hover,
  button.primaryButton:hover,
  a.button.primaryButton:hover {
    
    color: var(--colour-main-blue);
    
    background-color: #fff;
  }
  
  .secondaryButton,
  button.secondaryButton,
  a.button.secondaryButton {
    
    font-family: "MEDIUM", sans-serif;
    font-size: 0.9rem;
    
    padding: 0.5em 1.5em;
    
    border: 0.05rem solid var(--colour-main-blue);
    
    color: var(--colour-main-blue);
    
    background-color: var(--colour-text-light);
    
    box-shadow: 0px 0.2em 0.6em -0.2em rgba(0, 0, 0, 0.2);
  }
    
  section > button,
  section > a.primaryButton,
  section > a.secondaryButton {
    
    justify-self: start;
  }
  
  button.loading {
    
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }