/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  /* font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; */
  /* font-family: "Roboto",  */
  margin: 2% 2% 2% 2%; 
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300; }
h1 { font-size: 2.4rem; line-height: 1.2;  letter-spacing: -.0rem; margin-bottom: 2rem; }
h2 { font-size: 2.0rem; line-height: 1.25; letter-spacing: -.0rem; margin-bottom: 0px; margin-top: 1rem;}
h3 { font-size: 1.8rem; line-height: 1.3;  letter-spacing: -.0rem; margin-bottom: 1.5rem; margin-top: 1.5rem;}
h4 { font-size: 1.6rem; line-height: 1.35; letter-spacing: -.0rem; margin-bottom: 1.2rem; margin-top: 0px; }
h5 { font-size: 1.4rem; line-height: 1.5;  letter-spacing: -.0rem; margin-bottom: 0.6rem; margin-top: 0.6rem;}
h6 { font-size: 1.0rem; line-height: 1.6;  letter-spacing: 0; margin-bottom: 0.75rem; margin-top: 0.75rem;}

/* h1 { font-size: 2.4rem; line-height: 1.2;  letter-spacing: -.1rem; margin-bottom: 2rem; }
h2 { font-size: 2.0rem; line-height: 1.25; letter-spacing: -.1rem; margin-bottom: 0px; margin-top: 1rem;}
h3 { font-size: 1.8rem; line-height: 1.3;  letter-spacing: -.1rem; margin-bottom: 1.5rem; margin-top: 1.5rem;}
h4 { font-size: 1.6rem; line-height: 1.35; letter-spacing: -.08rem; margin-bottom: 1.2rem; margin-top: 0px; }
h5 { font-size: 1.4rem; line-height: 1.5;  letter-spacing: -.05rem; margin-bottom: 0.6rem; margin-top: 0.6rem;}
h6 { font-size: 1.0rem; line-height: 1.6;  letter-spacing: 0; margin-bottom: 0.75rem; margin-top: 0.75rem;} */

/* Styles for caroulse in swipe */
#carousel-container {
    width: 400px;
    overflow: hidden;
    margin: auto;
    touch-action: pan-y; /* allow horizontal swipes */
}

#carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.carousel-image {
    width: 400px;
    flex-shrink: 0;
    user-select: none;
    pointer-events: none; /* image doesn’t block swipe */
}