html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #222;
}

#renderCanvas {
  touch-action: none;
}

#canvasZone {
  width: 100%;
  height: 100%;
}

.cards-collection {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.cards-collection .card {
  margin: 20px;
}

.masked {
  -webkit-mask-box-image: none !important;
  -webkit-mask-image: url("./../assets/mask.png");
          mask-image: url("./../assets/mask.png");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

.card-holder {
  position: relative;
}

.card {
  width: 250px;
  height: 400px;
  overflow: hidden;
  position: relative;
  -webkit-mask-box-image: url("./../assets/mask-border-radius.png") 30 fill/20px/1px round;
          mask-border: url("./../assets/mask-border-radius.png") 30 fill/20px/1px round; /* repeat */
}
.card + canvas {
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  transform: translate(-10px, -10px);
  position: absolute;
  top: 0px;
  left: 0px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
  overflow: hidden;
  pointer-events: none;
}
.card img, .card canvas, .card video {
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  transform: translate(-10px, -10px);
  position: absolute;
  top: 0px;
  left: 0px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
  overflow: hidden;
  pointer-events: none;
}
.card .mask {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000;
  -webkit-clip-path: url(#clip-evenodd);
          clip-path: url(#clip-evenodd);
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  background: rgba(0, 0, 0, 0.005);
  opacity: 1;
}
.card:hover .mask {
  opacity: 0;
}
.card .mask:nth-child(1) {
  scale: 1.01;
}
.card .mask:nth-child(2) {
  scale: 1.02;
}
.card .mask:nth-child(3) {
  scale: 1.03;
}
.card .mask:nth-child(4) {
  scale: 1.04;
}
.card .mask:nth-child(5) {
  scale: 1.05;
}
.card .mask:nth-child(6) {
  scale: 1.06;
}
.card .mask:nth-child(7) {
  scale: 1.07;
}
.card .mask:nth-child(8) {
  scale: 1.08;
}
.card .mask:nth-child(9) {
  scale: 1.09;
}
.card .mask:nth-child(10) {
  scale: 1.1;
}
.card:after {
  content: "";
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 48%, rgba(255, 255, 255, 0.1) 52%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1001;
  transform: translateY(var(--translateY));
}
.card .title {
  color: #e3b279;
  mix-blend-mode: difference;
  padding: 10px;
  position: absolute;
  top: 2%;
  left: 50%;
  width: calc(100% - 20px);
  transform: translateX(-50%);
  z-index: 1001;
  text-align: center;
  box-sizing: border-box;
  font-size: 30px;
  font-family: "Lugrasimo", cursive;
}
.card .call-to-action-btn {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 60px;
  height: 60px;
  border-radius: 60px;
  z-index: 1001;
  text-align: center;
  line-height: 60px;
  background: #000;
  color: #e3b279;
  font-size: 40px;
  cursor: pointer;
}

.evenodd {
  clip-rule: evenodd;
}/*# sourceMappingURL=style.css.map */