/* ====================================
   MINI CSS FRAMEWORK BY ALAIN ;-)
======================================= */

/* THEME VARIABLES -------------------- */

:root {
    /* Font families */
    --heading-font: 'hmanist', sans-serif;
    --heading-line-height: 1em;
    --heading-weight: 900;

    --base-font: 'GSans', sans-serif;
    --base-weight: normal;
    --base-line-height: 1.5em;
    --base-size: 1.25rem;

    /* Heading sizes */
    --heading-4xl: 96px;
    --heading-3xl: 84px;
    --heading-2xl: 72px;
    --heading-xl: 60px;
    --heading-lg: 48px;
    --heading-md: 32px;
    --heading-sm: 24px;
    --heading-xs: 20px;

    /* Base sizes */
    --text-xs: 14px;
    --text-sm: 16px;
    --text-md: 20px; /* = base font-size */
    --text-lg: 24px;
    --text-xl: 28px;

    /* Font weights */
    --weight-light: 300;
    --weight-normal: 400;
    --weight-bold: 900;

    /* Kleuren algemeen */
    --color-text: #222;
    --body-bg: #ffffff;
    --gallery-bg: #e4c4c4;

    /* Links */
    --color-link: #000000;
    --color-link-hover: #000000;

    /* Sections */
    --section-bg-light: #f8f9fa;
    --section-bg-dark: #e9ecef;

    /* Buttons */
    --btn-primary: #161616;
    --btn-primary-hover: #262427;
    --btn-secondary: #6c757d;
    --btn-secondary-hover: #545b62;

    /* Borders */
    --border-default: #ddd;
    --border-strong: #c0c0c0;
    --border-inverse-default: #343434;
    --border-inverse-strong: #000000;

    /* Navigation header */
    --header-bg: #000000;
}

/* =========================
   RESET
========================= */

*, *::before, *::after {
  box-sizing: border-box;
}
*:not(dialog) {
  margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}
#root, #__next {
  isolation: isolate;
}

/* =========================
   ROW
========================= */

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1rem;
}

/* =========================
   CONTAINER
========================= */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.container-fluid {
    width: 100%;
    padding: 0 1rem;
}

/* =========================
   COLUMNS
========================= */

[class^="col-"] {
  padding: 1rem;
  width: 100%;
}

/* 12 column grid */
.col-1 { width: 8.333%; }
.col-2 { width: 16.666%; }
.col-3 { width: 25%; }
.col-4 { width: 33.333%; }
.col-5 { width: 41.666%; }
.col-6 { width: 50%; }
.col-7 { width: 58.333%; }
.col-8 { width: 66.666%; }
.col-9 { width: 75%; }
.col-10 { width: 83.333%; }
.col-11 { width: 91.666%; }
.col-12 { width: 100%; }

/* =========================
   RESPONSIVE BREAKPOINTS
========================= */

@media (max-width: 992px) {
  .col-md-12 { width: 100%; }
  .col-md-6 { width: 50%; }
  .col-md-4 { width: 33.333%; }
}

@media (max-width: 768px) {
  [class^="col-"] {
    width: 100%;
  }
}


/* =========================
   FLEX UTILITIES
========================= */
.d-flex { display: flex;}
.flex-column {flex-direction: column;}
.justify-center {justify-content: center;}
.align-center {align-items: center;}

.row-equal {
  display: flex;
  flex-wrap: wrap;
}

.row-equal > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.align-bottom {
   min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.v-space-between {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.v-space-between .row {
  flex: 1;
}

.v-space-between .col-12 {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* =========================
   SPACING UTILITIES
========================= */

.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 2rem; }

.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 2rem; }

.pt-1 { padding-top: .5rem; }
.pt-2 { padding-top: 1rem; }
.pt-3 { padding-top: 2rem; }

.pb-1 { padding-bottom: .5rem; }
.pb-2 { padding-bottom: 1rem; }
.pb-3 { padding-bottom: 2rem; }