:root {
  --primary-color: green;
  --secondary-color: #ad46bf;
  --tertiary-color:  #ffbb00;
  --quaternary-color: #554f48;
  --light-gray: #f4f4f4;
}

html {
  color: #000;
}

.color-primary, .uk-text-primary {
  color: var(--primary-color) !important;
}

.uk-background-primary {
  background-color: var(--primary-color);
}

.uk-background-secondary {
  background-color: var(--quaternary-color);
}

.uk-section-primary {
  background-color: var(--primary-color);
}

.uk-section-secondary {
  background-color: var(--secondary-color);
}

.uk-button-primary {
  background-color: var(--primary-color);
}

.uk-button-primary:focus, .uk-button-primary:active {
  background-color: var(--secondary-color);
}

.uk-button-primary:hover {
  background-color: var(--tertiary-color);
}

.uk-offcanvas-bar {
  background-color: var(--quaternary-color);
}

#offcanvas-menu li a {
	color: #FFF;
}

.uk-dotnav>.uk-active>* {
  background-color: var(--tertiary-color);
  border-color: transparent;
}

.uk-dotnav>*>* {
    background-color: rgba(102,102,102,.4);
}

.light-gray-background {
  background-color: var(--light-gray);
}