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

@layer components {
  @font-face {
    font-family: "outfit-light";
    src: local("outfit-light"),
      url(https://cdnstatic.detik.com/live/2023/microsite/uncovered/Outfit-Light.ttf)
        format("truetype");
  }
  @font-face {
    font-family: "outfit-regular";
    src: local("outfit-regular"),
      url(https://cdnstatic.detik.com/live/2023/microsite/detikcom-awards/Outfit-Regular.ttf)
        format("truetype");
  }
  @font-face {
    font-family: "outfit-medium";
    src: local("outfit-medium"),
      url(https://cdnstatic.detik.com/live/2023/microsite/uncovered/Outfit-Medium.ttf)
        format("truetype");
  }
  @font-face {
    font-family: "outfit-semibold";
    src: local("outfit-semibold"),
      url(https://cdnstatic.detik.com/live/2023/microsite/detikcom-awards/Outfit-SemiBold.ttf)
        format("truetype");
  }
  @font-face {
    font-family: "outfit-bold";
    src: local("outfit-bold"),
      url(https://cdnstatic.detik.com/live/2023/microsite/uncovered/Outfit-Bold.ttf)
        format("truetype");
  }
  @font-face {
    font-family: "outfit-extrabold";
    src: local("outfit-extrabold"),
      url(https://cdnstatic.detik.com/live/2023/microsite/uncovered/Outfit-ExtraBold.ttf)
        format("truetype");
  }
  @font-face {
    font-family: "broadsheet-ldo";
    src: local("broadsheet-ldo"),
      url(https://cdnstatic.detik.com/live/2023/microsite/detikcom-awards/Broadsheet-LDO.ttf)
        format("truetype");
  }
  @font-face {
    font-family: "montserrat-light";
    src: local("montserrat-light"),
      url(https://cdnstatic.detik.com/live/2023/microsite/detikcom-awards/Montserrat-Light.ttf)
        format("truetype");
  }
  @font-face {
    font-family: "montserrat-regular";
    src: local("montserrat-regular"),
      url(https://cdnstatic.detik.com/live/2023/microsite/detikcom-awards/Montserrat-Regular.ttf)
        format("truetype");
  }
  @font-face {
    font-family: "montserrat-medium";
    src: local("montserrat-medium"),
      url(https://cdnstatic.detik.com/live/2023/microsite/detikcom-awards/Montserrat-Medium.ttf)
        format("truetype");
  }
  @font-face {
    font-family: "montserrat-semibold";
    src: local("montserrat-semibold"),
      url(https://cdnstatic.detik.com/live/2023/microsite/detikcom-awards/Montserrat-SemiBold.ttf)
        format("truetype");
  }
  @font-face {
    font-family: "montserrat-bold";
    src: local("montserrat-bold"),
      url(https://cdnstatic.detik.com/live/2023/microsite/detikcom-awards/Montserrat-Bold.ttf)
        format("truetype");
  }
  @font-face {
    font-family: "montserrat-extrabold";
    src: local("montserrat-extrabold"),
      url(https://cdnstatic.detik.com/live/2023/microsite/detikcom-awards/Montserrat-ExtraBold.ttf)
        format("truetype");
  }
  .navbar-wrap {
    @apply grid h-full max-w-[360px] md:max-w-[639px] grid-cols-[repeat(auto-fit,minmax(20px,1fr))] max-w-4xl gap-4 mx-auto font-light rounded-lg backdrop-blur-sm bg-black/80;
  }
  .navbar-wrap-winner-show {
    @apply grid h-full max-w-[360px] md:max-w-[639px] grid-cols-4 md:grid-cols-5 mx-auto font-light rounded-lg backdrop-blur-sm bg-black/80;
  }
  .navbar-button {
    @apply inline-flex flex-col items-center justify-center px-0 py-[10px];
  }
  .navbar-menu-span {
    @apply text-[10px] md:text-[14px] text-white hover:text-white rounded-[12px] hover:bg-[#493c50] px-[8px] py-[3px] md:px-[20px] md:py-[10px] md:text-[#ffffff];
  }
  .about-sosmed-img {
    @apply w-[20px];
  }

  .slider-bottom-thumbnail {
    @apply rounded-[5px] md:rounded-[20px] object-cover h-[44px] sm:h-[84px] md:h-[110px] lg:h-[140px] w-[80px] sm:w-[106px] md:w-[190px] lg:w-[240px] my-[16px];
  }

  .winner-thumbnail-box {
    @apply flex-shrink-0 relative w-full rounded-t-xl overflow-hidden pt-[40%] mb-[20px] sm:rounded-l-[20px] sm:max-w-[15rem] md:rounded-r-[20px] md:max-w-xs h-[280px];
  }

  .winner-thumbnail {
    @apply w-full h-full absolute top-0 left-0 object-cover rounded-[20px];
  }

  .card-contents {
    @apply col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-4 grid items-center;
  }

  .wrap-contents {
    @apply flex flex-col shadow-sm rounded-xl text-white h-[310px] sm:h-[320px] lg:h-[360px];
  }

  .img-contents {
    @apply w-full h-[180px] rounded-[20px] object-cover;
  }

  .p-contents {
    @apply text-[18px] leading-[25px] font-bold overflow-ellipsis overflow-hidden w-full line-clamp-3;
  }

  .date-contents {
    @apply text-[12px] leading-[18px] mt-1;
  }

  .active {
    background: #493c50;
    color: white;
  }
  @media (max-width: 480px) {
    .active {
      background: none;
      color: white;
    }
  }
}