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

@layer base {
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-display: swap;
    font-weight: 300;
    src:
      local('Comfortaa Light'),
      local('Comfortaa'),
      url(/fonts/comfortaa/Comfortaa-Light.woff2) format('woff2'),
      url(/fonts/comfortaa/Comfortaa-Light.ttf) format('truetype');
  }
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src:
      local('Comfortaa Regular'),
      local('Comfortaa'),
      url(/fonts/comfortaa/Comfortaa-Regular.woff2) format('woff2'),
      url(/fonts/comfortaa/Comfortaa-Regular.ttf) format('truetype');
  }
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src:
      local('Comfortaa Medium'),
      local('Comfortaa'),
      url(/fonts/comfortaa/Comfortaa-Medium.woff2) format('woff2'),
      url(/fonts/comfortaa/Comfortaa-Medium.ttf) format('truetype');
  }
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src:
      local('Comfortaa SemiBold'),
      local('Comfortaa'),
      url(/fonts/comfortaa/Comfortaa-SemiBold.woff2) format('woff2'),
      url(/fonts/comfortaa/Comfortaa-SemiBold.ttf) format('truetype');
  }
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src:
      local('Comfortaa Bold'),
      local('Comfortaa'),
      url(/fonts/comfortaa/Comfortaa-Bold.woff2) format('woff2'),
      url(/fonts/comfortaa/Comfortaa-Bold.ttf) format('truetype');
  }
  @font-face {
    font-family: 'Baloo2';
    font-style: normal;
    font-display: swap;
    src:
      local('Baloo2'),
      url(/fonts/baloo2/Baloo2-VariableFont_wght.ttf) format('truetype');
  }
}

a {
  @apply text-pink-800 underline underline-offset-2 hover:transition hover:text-blue-500;
}

strong {
  @apply font-medium;
}

.article-body {
  h1 {
    @apply px-4 text-2xl font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-4xl lg:text-5xl;
  }
  h2 {
    @apply px-4 text-xl font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-2xl md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-4xl;
  }

  h3 {
    @apply px-4 text-lg font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-xl md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-3xl;
  }

  h4 {
    @apply px-4 text-lg font-medium text-blue-900 mb-2 mt-3 max-w-read mx-auto md:text-lg md:mb-6 md:mt-8 lg:mb-8 lg:mt-12 lg:text-3xl;
  }

  p {
    @apply px-4 my-2 text-slate-950 text-justify mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl;
  }

  pre {
    @apply p-4 my-1 overflow-auto text-sm mx-auto max-w-read;
  }

  figure {
    @apply p-4;

    img {
      @apply rounded shadow-md mx-auto lg:max-w-image;
    }
  }
  figcaption {
    @apply mt-2 text-center text-sm italic text-blue-800 md:text-base lg:text-lg;
  }

  table {
    @apply text-sm mx-auto my-4 max-w-image table-auto border-collapse border-spacing-12 border border-slate-200 rounded md:text-base lg:text-xl lg:my-8;
  }

  thead {
    @apply bg-blue-100;
  }

  tbody {
    @apply bg-slate-50;
  }

  td,
  th {
    @apply py-0.5 px-2 border-b md:py-2 md:px-5;
  }

  tr {
    @apply even:bg-slate-100;
  }

  blockquote {
    @apply mx-6 py-1 px-2 bg-pink-50 lg:mx-auto max-w-note border-l-4 border-pink-600;

    p {
      @apply my-2 md:my-4 text-slate-600 max-w-note;
    }
  }

  :not(pre) code {
    @apply text-pink-900 rounded border border-blue-300 px-1 py-0.5 bg-blue-100 text-sm md:text-base lg:text-xl;
  }

  pre code pre {
    @apply mx-2 rounded lg:mx-auto lg:text-lg shadow-sm lg:max-w-note;
  }

  ul,
  ol {
    @apply pl-10 pr-6 my-2 text-slate-950 mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl lg:pl-14;

    & p {
      @apply px-2;
    }
  }

  ul {
    @apply list-disc;
  }
  ol {
    @apply list-decimal;
  }

  iframe {
    @apply rounded shadow-md mx-auto lg:max-w-image;
  }
}

article a {
  @apply visited:text-purple-700;
}

.video-embed {
  @apply m-4 mx-auto max-w-image aspect-video;
}

.social-card-twitch:hover {
  transform: translate3d(0.6rem, -0.6rem, 0px);
  box-shadow: -3px 3px 0px 3px #6441a5;
  transition-delay: 75ms;
}

.social-card-youtube:hover {
  @apply rounded-none;
  transform: scale(1.02);
  transition-delay: 100ms;
}

.social-card-instagram:hover {
  filter: brightness(84%);
  transition-delay: 100ms;
}

.social-card-tiktok {
  position: relative;

  &:hover {
    animation: tiktok-glitch 1.5s infinite;
    animation-delay: 200ms;
  }
}

@keyframes tiktok-glitch {
  0% {
    box-shadow:
      0px 0px 0 rgba(0, 255, 255, 0),
      0px 0px 0 rgba(255, 0, 255, 0);
    transform: translate(0, 0);
  }

  10% {
    box-shadow:
      -3px -3px 0 rgba(0, 255, 255, 0.8),
      3px 3px 0 rgba(255, 0, 255, 0.8);
    transform: translate(-1px, -1px);
  }

  15% {
    box-shadow:
      2px -2px 0 rgba(0, 255, 255, 0.6),
      -2px 2px 0 rgba(255, 0, 255, 0.6);
    transform: translate(2px, -2px);
  }

  20% {
    box-shadow:
      -1px 1px 0 rgba(0, 255, 255, 0.4),
      1px -1px 0 rgba(255, 0, 255, 0.4);
    transform: translate(1px, 1px);
  }

  25% {
    box-shadow:
      -4px 4px 0 rgba(0, 255, 255, 1),
      4px -4px 0 rgba(255, 0, 255, 1);
    transform: translate(-2px, 2px);
  }

  30% {
    box-shadow:
      3px -3px 0 rgba(0, 255, 255, 0.5),
      -3px 3px 0 rgba(255, 0, 255, 0.5);
    transform: translate(3px, -3px);
  }

  40% {
    box-shadow:
      -2px 2px 0 rgba(0, 255, 255, 0.9),
      2px -2px 0 rgba(255, 0, 255, 0.9);
    transform: translate(-1px, 1px);
  }

  50% {
    box-shadow:
      -1px -2px 0 rgba(0, 255, 255, 0.7),
      2px -1px 0 rgba(255, 0, 255, 0.7);
    transform: translate(1px, -1px);
  }

  60% {
    box-shadow:
      2px -2px 0 rgba(0, 255, 255, 0.3),
      -2px 2px 0 rgba(255, 0, 255, 0.3);
    transform: translate(2px, -2px);
  }

  75% {
    box-shadow:
      -3px 3px 0 rgba(0, 255, 255, 1),
      3px -3px 0 rgba(255, 0, 255, 1);
    transform: translate(-3px, 3px);
  }

  85% {
    box-shadow:
      -2px -2px 0 rgba(0, 255, 255, 0.2),
      2px 2px 0 rgba(255, 0, 255, 0.2);
    transform: translate(-2px, -2px);
  }

  100% {
    box-shadow:
      0px 0px 0 rgba(0, 255, 255, 0),
      0px 0px 0 rgba(255, 0, 255, 0);
    transform: translate(0, 0);
  }
}