/* VARS */
:root {
--primary-color: #2FA653;
--ar-green: #2FA653;
--ar-blue: #0402D2;
/* Set the header variable used when scrolling */
--h-header: 100px;
}

/* CSS RESET */
html {
    
    scroll-behavior: smooth !important;
}
*, *::before, *::after {
box-sizing: border-box;
}

* {
margin: 0;
padding: 0;
}

img, picture, svg, video {
display: block;
max-width: 100%;
}

input, textarea, button, select {
font: inherit;
}

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

p,
li,
figcaption {
text-wrap: pretty;
max-width: 65ch;
}

body > :is(header, footer),
main,
section,
article {
container-type: inline-size;
}

body {
font-family: system-ui, sans-serif;
font-size: 1.125rem;
min-height: 100vh;
}

h1 { font-size: 4.25rem; font-weight: 900 }
h2 { font-size: 2.75rem; font-weight: 900 }
h3 { font-size: 1.625rem; font-weight: 900 }



/* ANCHOR SCROLL */

/* Set the scroll margin top on all anchor elements by using .anchor class */
/* Note: I'm setting plus 2.5em so the element has some breathing room on the top */
.anchor {
    scroll-margin-top: calc(var(--h-header) + 2.5em);
}