/*
For customization examples:
See https://bulma.io/documentation/features/css-variables/
*/

:root {

  --bulma-danger-h: 356deg;
  --bulma-danger-s: 63%;
  --bulma-danger-l: 53%;

  --bulma-success-h: 130deg;
  --bulma-success-s: 42%;
  --bulma-success-l: 46%;

  --bulma-link-h: 222deg;

  --bulma-footer-background-color: hsl(217, 71%, 53%);
  --bulma-footer-padding: 1rem 2.5rem 2.5rem 2.5rem;

  --bulma-box-shadow: none;
  --bulma-box-background-color: hsl(0, 0%, 96%);

  --bulma-primary-invert-l: 96%;

  --cyan: hsl(204, 71%, 53%);
  --bulma-primary-h: 204deg;
  --bulma-primary-s: 71%;
  --bulma-primary-l: 53%;
  --bulma-primary-dark-l: 53%;
  --bulma-primary: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-dark-l));

  --orange: hsl(14, 73%, 61%);
  --bulma-info-h: 14deg;
  --bulma-info-s: 100%;
  --bulma-info-l: 53%;
  --bulma-info: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l));
  
  .menu {
    --bulma-menu-item-selected-h: 229deg;
    --bulma-menu-item-selected-s: 53%;
    --bulma-menu-item-selected-background-l: 53%;
  }

  .notification {
    &.is-success, &.is-danger {
      color: white;
    }
  }

  .section {
    --bulma-section-padding: 1.5rem 1.5rem;
    --bulma-section-padding-medium: 3rem 1.5rem;
    --bulma-section-padding-large: 6rem 1.5rem;
  }

  .navbar.is-dark {
    color: var(--bulma-text-invert);
  }

  .button.is-success {
    /* Override text color */
    color: white;
  }
}