h1, .h1
{
   font-family: Arial;
   font-weight: bold;
   font-size: 32px;
   text-decoration: none;
   color: #000000;
   --color: #000000;
   background-color: transparent;
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   display: inline-block;
}
h2, .h2
{
   font-family: Arial;
   font-weight: bold;
   font-size: 27px;
   text-decoration: none;
   color: #000000;
   --color: #000000;
   background-color: transparent;
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   display: inline-block;
}
h3, .h3
{
   font-family: Arial;
   font-weight: bold;
   font-size: 24px;
   text-decoration: none;
   color: #000000;
   --color: #000000;
   background-color: transparent;
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   display: inline-block;
}
h4, .h4
{
   font-family: Arial;
   font-weight: bold;
   font-size: 21px;
   font-style: italic;
   text-decoration: none;
   color: #000000;
   --color: #000000;
   background-color: transparent;
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   display: inline-block;
}
h5, .h5
{
   font-family: Arial;
   font-weight: bold;
   font-size: 19px;
   text-decoration: none;
   color: #000000;
   --color: #000000;
   background-color: transparent;
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   display: inline-block;
}
h6, .h6
{
   font-family: Arial;
   font-weight: bold;
   font-size: 16px;
   text-decoration: none;
   color: #000000;
   --color: #000000;
   background-color: transparent;
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   display: inline-block;
}
.CustomStyle
{
   font-family: "Courier New";
   font-weight: bold;
   font-size: 16px;
   text-decoration: none;
   color: #2E74B5;
   --color: #2E74B5;
   background-color: transparent;
}

/* Responsive centering and automatic scaling */
html, body {
   height: 100%;
   margin: 0;
   padding: 0;
}
#body, body {
   display: flex;
   align-items: flex-start;
   justify-content: center;
   background: #ffffff;
   overflow: auto;
}
#viewport {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   overflow: auto;
}

/* compute a site scale once (unitless) and use it both for transform and
   to calculate symmetric top/bottom padding so margins match */
:root {
  --site-scale: clamp(0.6, calc(min(100vw/1920, 100vh/1080) * 1.08), 1.12);
}

#site-wrapper {
   position: relative; /* so absolute children are positioned relative to this */
   width: 1920px; /* design width */
   transform-origin: top center;
   transform: scale(var(--site-scale));
}

/* Add equal top and bottom padding around the scaled site so margins match.
   If the scaled site is taller than the viewport this will clamp to 0. */
#viewport {
  padding-top: max(0px, calc((100vh - (1080px * var(--site-scale))) / 2));
  padding-bottom: max(0px, calc((100vh - (1080px * var(--site-scale))) / 2));
}

/* Make images fluid inside the scaled wrapper */
#site-wrapper img {
   max-width: 100%;
   height: auto;
   display: block;
}

/* Ensure text wraps nicely on small screens */
#site-wrapper span, #site-wrapper div {
   word-wrap: break-word;
}
