/**VARIABLE DECLARATION**/
:root{
  
    touch-action: pan-x pan-y;
    height: 100%;   
  
  /* Colors */
    --clr-primary-100:rgb(218, 182, 139);
    --clr-primary-200:#506966;
    --clr-primary-300:#00ffe1;

    --clr-neutral-100:#000000;
    --clr-neutral-200:#f0efef;
    --clr-accent-100: #2B2B2B;

    /*Fonts*/
    --ff-primary: "Inria Serif", serif;
    --ff-secondary:"Inria Sans", sans-serif;

    /* Font weight */
    --fw-light:300;
    --fw-regular:400;
    --fw-bold:700;

    /* Font sizes */
    --fs-300: 1rem;
    --fs-400: 1.25rem;
    --fs-500: 1.5rem;
    --fs-600: 2rem;
    --fs-700: 3.5rem;
    --fs-800: 4.5rem;
    --fs-900: 6rem;

    --fs-nav:var(--fs-500);
    --fs-body:var(--fs-400);
    --fs-primary-heading: var(--fs-900);
    --fs-secondary-heading: var(--fs-800);
    --fs-tertiary-heading:var(--fs-600);
    
    /* padding/size */
    --size-100: .25rem;
    --size-200: .5rem;
    --size-300: 1rem;
    --size-400: 2rem;
    --size-500: 3rem;
    --size-600: 4rem;
    --size-700: 6rem;   
}

@media(max-width:93.75rem){
  :root{
      --fs-primary-heading:var(--fs-800);
      --fs-secondary-heading:var(--fs-700);
      --fs-tertiary-heading:1.75rem;
      --fs-nav:1.3rem;
      --fs-body:19px;
  }
} 
@media(max-width:43.75rem){
  :root{
      --fs-primary-heading:clamp(2.5rem,12vw,3.5rem);
      --fs-secondary-heading:3rem;
      --fs-tertiary-heading:1.75rem;
      --fs-nav:1.3rem;
      --fs-body:18px;
  }
} 

/**RESET**/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
*{
    margin:0;
    padding: 0;
    font:inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol {
  list-style: none;
  list-style:none;
}
/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html,
body{
    height:100%;
    scroll-behavior: smooth;
    scroll-padding-top: 15rem;
}
/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  text-decoration: none;
  color: inherit;
}
/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/**UTILITY CLASSES*/
 
.primary-heading{
    font-size: var(--fs-primary-heading);
    font-family: var(--ff-primary);
    line-height: 1;
    font-weight: var(--fw-bold);
    color: var(--clr-neutral-100);
}
.secondary-heading{
    font-size: var(--fs-secondary-heading);
    font-family: var(--ff-primary);
    color: var(--clr-neutral-100);
    font-weight: var(--fw-bold);
    line-height: 1.15;
}
.tertiary-heading{
  font-size: var(--fs-tertiary-heading);
  font-family: var(--ff-primary);
  font-weight: var(--fw-bold);
  color: var(--clr-neutral-100);
  padding-top: var(--size-400);
}
.med-text{
    font-size: var(--fs-500);
    margin-top: 10px;
}

/*highlights*/
.highlight__link, .highlight{
  color: rgba((161, 89, 4,1));
  text-decoration: none;
}
.highlight__link:hover{
  text-decoration: underline;
}

/**GENERAL**/
body{
    color:var(--clr-accent-100);
    font-size: var(--fs-body);
    font-family: var(--ff-secondary);
}
.container{
    --max-width:1500px;
    --padding: 1.5rem;

    width: min(var(--max-width), 100% - var(--padding));
    margin-inline: auto;
}

/* js */
.lockScroll{
  overflow: hidden;
}



@media(max-width:93.75rem){
  .med-text{
    font-size: 1.35rem;
  }
} 


@media(max-width:43.75rem){
  .med-text{
    font-size: 1.1rem;
    line-height: clamp(1.3rem,7vw,1.7rem);
  }
}