/*====================================================================================
    New Website Base

  Base styles for the new website.
  This should only contain 
====================================================================================*/

:root {
  --color-light-grey: #EEF2F4;
  --color-grey-text: #9CB6C0;
  --color-header-bg: var(--color-bg-primary);
  --color-header-text: white;
  --color-header-accent: var(--color-primary);
  --min-width: 320;
  --max-width: 1920;
  --max-width-px: 1920px;
  --min-width-px: 320px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
  --fontawesome-font-family: 'Font Awesome 5 Free';
  --percent-width: calc((100vw - var(--min-width-px)) / (var(--max-width) - var(--min-width)));
  font-size: clamp(16px, calc(16px + (36 - 20) * (100vw - 768px)/(1920 - 768)), 20px);
  --font-size: clamp(16px, calc(16px + (36 - 20) * (100vw - 768px)/(1920 - 768)), 18px);
  --strong-scaled-font-size: clamp(10px, calc(16px + (36 - 20) * (100vw - 768px)/(1920 )), 18px);
  --x-strong-scaled-font-size: clamp(5px, calc(7px + (36 - 20) * (100vw - 768px)/(1920 )), 18px);

}

body {
  all: unset;
  line-height: 1.5;
  color: var(--color-bg-primary);
  margin: 0;
  padding: 0;
  width: 100%;
}

.button {
  all: unset;
}


.content-wrap {
  max-width: var(--max-width-px);
  margin: 0 auto;
  padding: 1rem clamp(1rem, calc((20 * 10) * (var(--percent-width))), 10rem);
}

/* Reset styles from sz defaults */
.container {
  all: unset;
}

p, pre, ul, ol, dl, dd, blockquote, address, table, fieldset, form {
 margin-top:unset;
 margin-bottom: unset;
}

h1, h2, h3, h4, h5, h6 {
  all:unset;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  
  font-family: Arial, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-bg-primary);
}

h1 {
  font-size: 3.5em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.75em;
}

h4 {
  font-size: 1.5em;
}

h5 {
  font-size: 1.25em;
}

h6 {
  font-size: 1em;
}

@media (max-width: 1400px) {
  h1 {
    font-size: 2.5em;
  }
}

.primary-color {
  color: var(--color-primary);
}
.secondary-color {
  color: var(--color-secondary);
}
.primary-bg-color {
  color: var(--color-bg-primary);
}

/*====================================================================================
  Css Resets
====================================================================================*/



/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/*
    10. Create a root stacking context
  */
#root,
#__next {
  isolation: isolate;
}