globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
}

@media (max-width: 345px) {
  body {
    zoom: 0.7;
  }
}

@media (min-width: 346px and max-width: 360px) {
  body {
    zoom: 0.88;
  }
}

.no-scroll::-webkit-scrollbar {
  display: none;
}

@keyframes left-to-right-and-right-to-left {
  0% {
    object-position: 0 0;
  }
  50% {
    object-position: 100% 0;
  }
  100% {
    object-position: 0 0;
  }
}

@layer utilities {
  .container {
    @apply mx-auto px-4 max-w-6xl;
  }

  .realistic-marker-highlight {
    position: relative;
  }
  .realistic-marker-highlight:before {
    content: '';
    background-color: #252530;
    width: 110%;
    height: 1em;
    position: absolute;
    z-index: -1;
    filter: url('#marker-shape');
    left: -0.1em;
    right: -0.1em;
    top: 0.1em;
    padding: 0 0.5em;
  }

  .marker-shape {
    filter: url('#marker-shape');
  }
}