@import url('./utils/font-face.css');
@import url('./utils/variables.css');
@import url('./utils/typography.css');
@import url('./utils/shared-components.css');

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

:root {
  /* Layout */
  --max-section-grid-width: 90rem;

  /* Colors */
  --primary-color: #000000;
  --secondary-color: #ffffff;
  --grey: #f5f5f5;
  --white: #fff;
  --black: #000;
  --divider: rgba(74, 85, 72, 0.6);
  --divider-light: rgba(74, 85, 72, 0.2);
  --beige-section-background: rgba(205, 163, 110, 0.26);

  /* Gradients */
  --fiandre-gradient: linear-gradient(180deg, #9ebc9b -10%, #4f8884 100%);
  --fiandre-gradient-2: linear-gradient(to bottom left, #69796e, #908d73);
  --fiandre-gradient-secondary: linear-gradient(
    to bottom right,
    #9fa9ae,
    #9caab3,
    #a0a8ad,
    #a7a6a0,
    #aea396
  );
  --fiandre-gradient-footer: linear-gradient(
    to top right,
    #54756d,
    #819898,
    #a5b4bd
  );
}

body {
  overflow-x: hidden;
  #page.site {
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
    main.site-main {
      flex: 1;
    }
  }
}

.hide {
  display: none;
}