:root {

  --primary : #c4e7d4ff;
  --primary-offset : #c4dacfff;
  --contrast : #b9c0daff;
  --hero : #998da0ff;
  --nav : #63585eff;

  --primary-text: black;
  --primary-offset-text: black;
  --contrast-text: black;
  --hero-text: white;
  --nav-text: white;

  --heading-font: sans-serif;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
  font-family: "Afacad Flux", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-size: 1.1rem;
  font-variation-settings: "slnt" 0;
}

.font-heading-style {
  font-family: "Electrolize", serif;
  font-weight: 400;
  font-style: normal;
}


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

.colour-primary-offset {
  background-color: var(--primary-offset);
  color: var(--primary-offset-text);
}

.colour-contrast {
  background-color: var(--contrast);
  color: var(--contrast-text);
}

.colour-hero {
  background-color: var(--hero);
  color: var(--hero-text);
}

.colour-nav {
  background-color: var(--nav);
  color: var(--nav-text);
}

.colour-nav a, a:hover, .nav-link:hover {
  color: var(--nav-text);
}

.btn-primary {
  background-color: transparent;
  border-color: var(--nav);
  color: var(--nav);
  opacity: 0.7;
}

.btn-primary:hover {
  background-color: transparent;
  border-color: var(--nav);
  color: var(--nav);
  opacity: 1.0;
}

.btn-secondary {
  background-color: var(--primary-offset);
  border-color: var(--primary);
  color: var(--nav);
}

.btn-secondary:hover {
  background-color: var(--hero);
  border-color: var(--hero);
  color: var(--nav);
}

h1 {
  font-size: 60px;
}

.height-fixer {
  min-height: calc(100vh - 120px);
}