@font-face {
  font-family: 'Offset TM';
  src: url(./assets/fonts/offset-tm.woff2);
}

@font-face {
  font-family: 'AUTHENTIC Sans';
  font-weight: 700;
  src: url(./assets/fonts/authenticsans-150.woff);
}

@font-face {
  font-family: 'AUTHENTIC Sans';
  font-weight: 600;
  src: url(./assets/fonts/authenticsans-130.woff);
}

body {
  font-family: 'AUTHENTIC Sans', Arial, sans-serif;
}

.hero-text-container {
  border: 3px dashed #000;
  font-family: 'Offset TM';
  text-transform: uppercase;
}

.nav-btn,
.lang-btn,
.dnl-btn {
  border: 3px solid #000;
  border-radius: 42px;
  font-weight: 700;
}

.lang-btn.active,
.nav-btn.active,
.zine-btn.active {
  background: #000;
  color: #fff;
}

.zine-btn {
  border: 3px solid #000;
  border-radius: 16px;          /* less extreme than 42px */
  font-weight: 700;
  text-transform: uppercase;
  
  padding: 10px 18px;
  line-height: 1.2;

  display: inline-block;
  max-width: 220px;             /* prevents mega-wide buttons */
  white-space: normal;          /* allows wrapping */
  text-align: center;

  transition: all 0.2s ease;
}

.zine-btn:hover {
  transform: scale(1.03);
}

.footer-line, .bottom-line {
      height: 3px;
      background-color: #000;
      width: 100%;
    }

.fade-image { opacity: 1; transition: opacity .3s; }
.fade-out { opacity: 0; }

#zineViewer {
  touch-action: pan-y;            /* allow vertical scroll, handle horizontal swipe */
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity;
}

.swipe-left {
  transform: translateX(-40px);
  opacity: 0.6;
}

.swipe-right {
  transform: translateX(40px);
  opacity: 0.6;
}