html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
:root {
    --bs-primary: rgb(136, 34, 212);
    --bs-primary-rgb: 136, 34, 212;
}

/* Optional but recommended: 
  This makes the purple buttons slightly darker on hover for a better user experience. 
*/
.btn-primary {
    /* Use !important to force the override against other stylesheets */
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    /* These are for the hover/active states */
    --bs-btn-hover-bg: rgb(115, 29, 179);
    --bs-btn-hover-border-color: rgb(109, 27, 170);
    --bs-btn-active-bg: rgb(109, 27, 170);
    --bs-btn-active-border-color: rgb(109, 27, 170);
}