:root {
  --page-gap: 30px;
  --gallery-gap: 10px;
  --header-height: 10dvh;
  --footer-height: 10dvh;
  --gallery-height: 80dvh;
  --card-width: calc(var(--gallery-height) * 3 / 4);
  --product-width: calc(var(--gallery-height) * 4 / 5);
  --white-background: #FAFAFA;
  --blue-background: #003399;
  --white-text: #FAFAFA;
  --blue-text: #003399;
}
@font-face {
    font-family: "ArialNarrow";
    src: url("./fonts/arialnarrow.ttf") format("truetype");
    font-display: swap;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; height: 100%; }
body {
    /* font-family: "Arial Narrow", Arial, sans-serif; */
    /* font-stretch: condensed;
    transform: scaleX(0.85); */
    background: var(--white-background);
    color: var(--blue-text);
}
body {
  font-family: "ArialNarrow";
}

a { color: inherit; text-decoration: none; }
a:focus-visible, .gallery-scroll:focus-visible { outline: 2px solid var(--blue-text); outline-offset: -2px; }

.site-shell {
  display: grid;
  /* grid-template-rows: var(--header-height) minmax(0, 1fr) var(--footer-height); */
  grid-template-rows:
        var(--header-height)
        minmax(0, 1fr)
        var(--footer-height);
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.site-header, .site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 var(--page-gap);
  font-size: 20px;
  font-weight: 100;
}

.language { white-space: nowrap; }


@media (max-width: 900px) {
    :root {
      --page-gap: 25px;
      --gallery-gap: 10px;
  --header-height: 12dvh;
  --footer-height: 12dvh;
  --gallery-height: 76dvh;
    }
  .site-header, .site-footer { 
    font-size: clamp(12px, 2.8vw, 18px); 
  }

  
}

@media (max-width: 520px) {
      :root {
      --page-gap: 14px;
      --gallery-gap: 10px;
      --header-height: 52px;
      --footer-height: 52px;
      --gallery-height: calc(
          100dvh - var(--header-height) - var(--footer-height)
      );
    }
  .site-header, .site-footer { font-size: 12px; }
}