@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");

body {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.hero {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background-image: url("./assets/hero.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.bg-boxes {
  background: linear-gradient(#9192962f 1px, transparent 1px),
    linear-gradient(to right, #9192962f 1px, transparent 1px),
    linear-gradient(to bottom, #9192962f 2px, transparent 2px),
    linear-gradient(to right, #9192962f 2px, transparent 2px);

  background-size: 23px 23px, 23px 23px, 69px 69px, 69px 69px;
}

.bg-cards {
  background: linear-gradient(#9192962f 1px, transparent 1px),
    linear-gradient(to right, #9192962f 1px, transparent 1px),
    linear-gradient(to bottom, #9192962f 2px, transparent 2px),
    linear-gradient(to right, #9192962f 2px, transparent 2px),
    radial-gradient(
      50% 50% at center bottom,
      rgba(232, 134, 15, 0.2),
      rgba(255, 255, 255, 0)
    );

  background-size: 23px 23px, 23px 23px, 69px 69px, 69px 69px, 100% 100%;
}

img {
  pointer-events: none;
}