/* Global Styles */
/* Override Font Awesome font-face globally to prevent CLS */
@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://ka-f.fontawesome.com/releases/v7.0.1/webfonts/free-fa-brands-400.woff2") format("woff2");
}

html {
  font-size: 17px; /* Base font size for scaling */
  scroll-behavior: smooth; 
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Calibri', sans-serif;
  font-size: 1rem; /* Default font size based on 17px */
  line-height: 1.5;
  margin: 0;
  padding: 0;
  background-color: var(--color-light-teal); /* Sky Bloom */
}

body h1 {
  text-shadow: var(--text-outline-light);
}

/* Title Large (Arial Bold ~32px) */
h1 {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  font-size: 1.875rem;
}

/* Title (Arial Bold ~27px) */
h2 {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  font-size: 1.5625rem;
}

/* Subtitle (Comfortaa Normal ~16px) */
h3 {
  font-family: 'Comfortaa', sans-serif;
  font-size: .9375rem ;
}

/* Body Large (Calibri Normal ~21px) */
p.body-large {
  font-family: 'Calibri', sans-serif;
  font-size: 1.25rem;
}

/* Body Strong (Calibri Bold 17px) */
strong {
  font-family: 'Calibri', sans-serif;
  font-weight: bold;
  font-size: 1rem;
}

/* Body (Calibri Normal 17px) */
p.body {
  font-family: 'Calibri', sans-serif;
  font-size: 1rem;
}

/* Captions (Arial Bold ~12px) */
figcaption {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  font-size: .6875rem;
}

@media (max-width: 780px) {
  html {
    font-size: 14px;
  }
}

.main-content-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1440px;
  padding: 20px;
}