/* Base: font-face declarations, resets, and cross-screen utility classes. */
@font-face {
  font-family: "Maison Neue Extended";
  src: url("../fonts/MaisonNeueExtended-ExtraBold-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "BT Solisiert";
  src: url("../fonts/BTSolisiert-ExtraBold-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dearpix";
  src: url("../fonts/dearpix-1-94-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  background: url("../images/bg-grid.jpg") center / cover no-repeat fixed, #b7ddff;
  font-family: "Maison Neue Extended", "Helvetica Neue", Arial, sans-serif;
  color: #0070ff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* Both html and body scroll independently (see overflow-y below), so an
   absolutely-positioned .br-header with no positioned ancestor would anchor
   to whichever one it doesn't need to — this makes it a positioning context
   for .br-header so the header always scrolls with the content next to it. */
body {
  position: relative;
}
html, body { overflow-y: auto; }
body.br-is-fixed { overflow: hidden; height: 100%; }

a { color: #0070ff; text-decoration: none; }
a:hover { opacity: 0.85; }

.br-mobile-only  { display: none; }
.br-desktop-only { display: block; }

.br-visually-hidden {
  position: absolute !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  margin: -1px; overflow: hidden;
  padding: 0; white-space: nowrap;
}

@media (max-width: 720px) {
  .br-mobile-only  { display: block; }
  .br-desktop-only { display: none !important; }

  html, body {
    background: url("../images/bg-grid-mobile.jpg") center / cover no-repeat fixed, #b7ddff;
  }
}