body {
    font-family: Arial, sans-serif;
    line-height: 1.3;
    padding: 0 7px;
    padding-top: 0px;
    margin-top: 0px;
    background-color: #ffffff;
    /*color: #333;*/
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
h2 {
    font-size: 1.3rem;
    color: #0056b3;
    margin: 1rem 0 1rem;
}
p {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    margin-top: 0;
}
a {
    color: #0073e6;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
iframe {
      width: 100%;
      height: auto;
      max-width: 100%;
      aspect-ratio: 16 / 9;
      display: block;
      border: none;
}
img {
    max-width: 100%; /* Ensures the image width does not exceed the width of the container */
    height: auto; /* Maintains the aspect ratio of the image */
    display: block; /* Prevents inline element spacing issues */
}
.justLink {
  display: block;
  margin-bottom: 1em;
}

/* Apply to all <h2> and <a> elements */
h2, a {
  white-space: normal;         /* Allow text to wrap */
  word-wrap: break-word;       /* Break long words to prevent overflow */
  overflow-wrap: break-word;   /* Same as word-wrap, for broader support */
  word-break: normal;          /* Default behavior: break words only at normal break points */
}

/* If you only want extra space on your #content container: */
#content {
  padding-bottom: env(safe-area-inset-bottom);
}