@font-face {
  font-family: 'ES Klarheit Grotesk';
  src: url('../fonts/ESKlarheitGrotesk-Xlt.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ES Klarheit Grotesk';
  src: url('../fonts/ESKlarheitGrotesk-XltIt.woff2') format('woff2');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'ES Klarheit Grotesk';
  src: url('../fonts/ESKlarheitGrotesk-Bk.woff2') format('woff2');
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ES Klarheit Grotesk';
  src: url('../fonts/ESKlarheitGrotesk-BkIt.woff2') format('woff2');
  font-weight: 450;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'ES Klarheit Grotesk';
  src: url('../fonts/ESKlarheitGrotesk-Smbd.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ES Klarheit Grotesk';
  src: url('../fonts/ESKlarheitGrotesk-SmbdIt.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'ES Klarheit Grotesk';
  src: url('../fonts/ESKlarheitGrotesk-Xbd.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ES Klarheit Grotesk';
  src: url('../fonts/ESKlarheitGrotesk-XbdIt.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

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

body {
  --color-text: #ffffff;

  height: 100vh;
  overflow: hidden;
  background: #0000AA;
  color: var(--color-text);
  font-family: 'ES Klarheit Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* DECORATIVE TILES */

.bg-tiles {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 2;
  height: 11rem;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  filter: brightness(1.4) saturate(1.2);
  background-size: cover;
  background-repeat: no-repeat;
}

.bg-tiles-top {
  top: 0;
  background-image: url('../assets/background/pattern-top.png');
  background-position: top center;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
}

.bg-tiles-bottom {
  bottom: 0;
  height: 16.25rem;
  background-image: url('../assets/background/pattern-bottom.png');
  background-position: bottom center;
  -webkit-mask-image: linear-gradient(to top, black 0%, black 40%, transparent 100%);
  mask-image: linear-gradient(to top, black 0%, black 40%, transparent 100%);
}

/* PORTAL LAYOUT */

.portal {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0;
}

.portal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 75vh;
  text-align: center;
  padding: 2.5rem 1.5rem;
}

.logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
  padding-bottom: 1.5rem;
}

/* FLY-FI LOGO */

.fly-fi-logo {
  width: 5.625rem;
  height: auto;
  object-fit: contain;
}

/* CONNECT AREA */

.connect-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

/* FOOTER */

.portal-footer {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.footer-logo {
  width: 5.5rem;
  height: auto;
}

/* RESPONSIVE -- TABLET (768px+) */

@media (min-width: 48rem) {
  .bg-tiles {
    height: 17.5rem;
  }

  .bg-tiles-bottom {
    height: 25.875rem;
  }

  .fly-fi-logo {
    width: 6.875rem;
  }

  .footer-logo {
    width: 7.5rem;
  }

  .portal-content {
    padding: 3.75rem 2.5rem;
  }
}

/* RESPONSIVE -- DESKTOP (1200px+) */

@media (min-width: 75rem) {

  .portal-content {
    padding: 3.75rem 5rem;
  }
}

/* SHORT VIEWPORT */

@media (max-height: 31.25rem) {
  .portal-content {
    padding: 1rem 1.5rem;
  }

  .logo-area {
    padding-bottom: 0.75rem;
  }

  .fly-fi-logo {
    width: 4rem;
  }
}