style.css

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

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

@layer base {
  * {
    margin: 0;
    padding: 0;
  }

  body {
    width: 380px;
    height: 500px;
    font-family: "Poppins", sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
}

@layer utilities {
  .truncate-custom {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1rem;
  width: 1rem;
  background: url("assets/icons/x-bold.svg") no-repeat 50% 50%;
  background-size: contain;
  transition: opacity 0.2s;
}

.search input::-webkit-search-cancel-button:hover {
  opacity: 0.7;
  cursor: pointer;
}

.ReactModal__Content--after-open {
  box-shadow: 0px 4px 48px rgba(0, 0, 0, 0.45);
}

#plasmo-shadow-container {
  z-index: 0 !important;
}