@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Instrument+Serif:ital@0;1&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


@font-face {
  font-family: 'font1bold';
  src: url('../fonts/cy-grotesk-key-bold.ttf') format('opentype');
}

@font-face {
  font-family: 'font1medium';
  src: url('../fonts/CyGrotesk-KeyMedium.otf') format('opentype');
}

@font-face {
  font-family: 'font1regular';
  src: url('../fonts/CyGrotesk-KeyRegular.otf') format('opentype');
}


/* =========================
   SELECTION
========================= */

::selection {
  background: #0800ffa1;
  color: black;
  text-shadow: none;
}

::-moz-selection {
  background: #0800ffa1;
  color: black;
  text-shadow: none;
}


/* =========================
   RESET
========================= */

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

html {
  /* stop iOS / Android from inflating text when the phone is rotated */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  background: #f0ece2;
  overflow-x: hidden;
}

/* media can never be wider than the screen */
img,
video,
svg {
  max-width: 100%;
}
/* =========================================
   FINE GLOBAL FILM GRAIN
========================================= */

html::after {
  content: "";

  position: fixed;
  z-index: 2147483647;

  inset: -50%;
  width: 200%;
  height: 200%;

  pointer-events: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");

  opacity: 0.20;

  mix-blend-mode: normal;

  animation: globalGrain 0.18s steps(2) infinite;
}

@keyframes globalGrain {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-1%, 1%);
  }

  50% {
    transform: translate(1%, -1%);
  }

  75% {
    transform: translate(-1%, -1%);
  }

  100% {
    transform: translate(1%, 1%);
  }
}