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

@font-face {
  font-family: "Circular";
  src: url("/fonts//circular/circularstd-bold.woff2") format("woff2"),
    url("/fonts/circular/circularstd-bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-y: scroll;
}

.px-site {
  @apply px-4 sm:px-12 lg:px-20 2xl:px-36;
}

.px-site-list {
  @apply px-0 sm:px-12 lg:px-20 2xl:px-36;
}

.px-site-list-inner {
  @apply px-4 sm:pl-0 sm:pr-4;
}

.py-site {
  @apply py-4 lg:py-24 2xl:py-36;
}

.py-page {
  @apply py-4 sm:py-8;
}

.pt-page {
  @apply md:pt-4;
}

.pb-page {
  @apply pb-4 sm:pb-8;
}

.bg-white-glass {
  @apply bg-white/90 backdrop-blur-sm;
}

.bg-image-load {
  @apply bg-black/10;
}

.creator-component-size {
  @apply w-full aspect-square sm:aspect-[16/9] xl:aspect-[16/6];
}

.content-text h1,
.content-text h2,
.content-text h3,
.content-text h4,
.content-text h5,
.content-text h6,
.content-text ul {
  @apply my-6 first:mt-0 last:mb-0;
}

.content-text p {
  @apply mb-3 first:mt-0 last:mb-0;
}

.content-text a {
  @apply font-bold underline underline-offset-2 text-mma-blue hover:text-mma-yellow transition-colors;
}

.content-text table {
  /* table-layout: fixed; */
  /* word-break: break-all ; */
  @apply my-6 w-full;
}

.content-text table td,
th {
  @apply border border-neutral-200 p-2 sm:p-6 text-xs sm:text-base;
}

.content-text td {
  /* display: -webkit-box;
  word-break: break-word; */
}

.content-text ol {
  @apply list-decimal list-inside;
}

.content-text ul {
  @apply list-disc list-inside;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track-piece {
  background-color: #eeeeee;
}

::-webkit-scrollbar-thumb {
  background-color: #a0a0a0;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #787878;
}

.react-horizontal-scrolling-menu--scroll-container::-webkit-scrollbar {
  display: none;
}

.react-horizontal-scrolling-menu--scroll-container {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.youtube-play-button {
  @apply aspect-square h-[20%] bg-black/50 transition hover:bg-mma-blue rounded-full shadow-2xl top-[40%] absolute left-[50%] -translate-x-1/2 backdrop-blur-sm;
}

.youtube-play-button:before {
  content: "";
  background: url("../../public/assets/images//icons//play.svg");
  background-size: cover;
  position: absolute;
  width: 30%;
  height: 30%;
  margin-top: -15%;
  margin-left: -13%;
}

.clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  max-height: 128px;
  line-break: after-white-space;
  text-overflow: ellipsis;

  * {
    display: inline;
  }
}

.clamped > p {
  margin-bottom: 0;
}