* Global Styles */
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 16px */
  line-height: 1.5;
  margin: 0;
  padding: 0;
  background-color: #bdd4da; /* Sky Bloom */
}

body h1 {
  text-shadow: 0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */
  -0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */
  -0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */
  0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */
}



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

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

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

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

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

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

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

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


main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
}