@import url('https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:wght@400;700&family=Major+Mono+Display&display=swap');

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

@layer utilities {
  .w-prose {
    width: 80ch;
  }
  .grid-cols-2-auto {
    grid-template-columns: auto auto;
  }
  .grid-cols-3-auto {
    grid-template-columns: auto auto auto;
  }
}

@layer components {
  .resume {
    @apply break-inside-auto;
  }
  .resume h2, .resume h3 {
    @apply break-after-avoid-page break-before-auto;
  }
  @media print {
    /* Filthy hack, courtesy of https://stackoverflow.com/a/53742871 */
    .resume h3::after {
      content: "";
      display: block;
      height: 100px;
      margin-bottom: -100px;
    }

    .resume {
      @apply text-sm;
    }
    .resume h2 {
      @apply text-2xl;
    }
    .resume h3 {
      @apply text-xl;
    }
    .resume h4 {
      @apply text-lg;
    }
    .resume h5 {
      @apply text-base;
    }
    .resume li p {
      @apply mb-0;
    }
    .resume li {
      @apply mb-1;
    }
    .resume hr {
      @apply my-3;
    }
    .markdown.resume {
      @apply max-w-full;
    }
    .markdown.resume li {
      @apply mb-2;
    }
  }
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
  .markdown {
    @apply max-w-prose;
  }
  .markdown p {
    @apply mb-2;
  }
  .markdown ul {
    @apply list-disc ml-8;
  }
  .markdown ul ul {
    @apply mt-3;
    list-style-type: circle;
  }
  .markdown li {
    @apply mb-4;
  }
  .markdown ol {
    @apply list-decimal ml-8;
  }
  .markdown pre {
    @apply mb-4 p-4 rounded bg-black text-white;
  }
  .short-bio {
    @apply m-8 text-xl text-center mx-auto align-middle leading-10;
  }
  .short-bio img {
    @apply inline-block h-8 p-1 transform rotate-3 select-none;
  }
  @screen lg {
    .short-bio {
      @apply text-2xl;
    }
    .short-bio img {
      @apply h-14 p-2;
    }
    .short-bio strong {
      @apply whitespace-nowrap;
    }
  }
  @media print { .short-bio { @apply hidden; } }
  .link {
    @apply text-primary transform will-change-transform transition-transform duration-150 ease-out;
  }
  .link:hover {
    @apply transform -translate-y-1 underline underline-offset-4 decoration-2;
  }
  .portfolio-list-item {
    @apply grid p-4 border will-change-transform transition-all duration-150 ease-out;
  }
  .portfolio-list-item:hover {
    @apply text-black bg-white -translate-y-1;
  }
  .blog-post-list-item {
    @apply border grid place-items-center gap-4 p-4 transition-transform duration-150 ease-out;
  }
  .blog-post-list-item:hover {
    @apply -translate-y-1;
  }
  .page-title { @apply border-b-8 border-primary; }
  @media print { .page-title { @apply border-b-0; } }
  .page-title span {
    position: relative;
    display: inline-block;
    animation: bounce 3s infinite;
    animation-delay: calc(.1s * var(--i));
  }
  @media print {
    .page-title span { animation: none; }
  }
  .font-mono { font-family: "Sono", monospace; }
}

@layer base {
  * {
    @apply break-words break-inside-avoid;
  }
  body {
    @apply text-primary-fg min-h-screen scroll-smooth overflow-x-hidden;
    background-color: #fff;
    font-family: 'Fuzzy Bubbles', sans-serif;
  }
  @media print {
    body {
      @apply bg-transparent text-black;
    }
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold underline decoration-primary-light decoration-4 underline-offset-4;
    font-family: "Major Mono Display", monospace;
    /* text-transform: lowercase; */
  }
  @media print { h1, h2, h3, h4, h5, h6 { text-transform: none; } }
  h1 { @apply text-4xl; }
  h2 { @apply text-3xl  }
  h3 { @apply text-2xl; }
  h4 { @apply text-xl;  }
  h5 { @apply text-lg;  }
  details > summary {
    list-style: none;
  }
  details > summary::-webkit-details-marker {
    display: none;
  }
  blockquote > span {
    @apply text-xl font-medium underline decoration-4 underline-offset-2;
  }
  blockquote:nth-of-type(4n) > span   { @apply decoration-teal;   }
  blockquote:nth-of-type(4n+1) > span { @apply decoration-yellow; }
  blockquote:nth-of-type(4n+2) > span { @apply decoration-purple; }
  blockquote:nth-of-type(4n+3) > span { @apply decoration-pink;   }
  section:nth-of-type(4n) > h2   { @apply decoration-teal;   }
  section:nth-of-type(4n+1) > h2 { @apply decoration-yellow; }
  section:nth-of-type(4n+2) > h2 { @apply decoration-purple; }
  section:nth-of-type(4n+3) > h2 { @apply decoration-pink;   }
  .portfolio-list-item:nth-of-type(4n)   h3 { @apply decoration-teal;   }
  .portfolio-list-item:nth-of-type(4n+1) h3 { @apply decoration-yellow; }
  .portfolio-list-item:nth-of-type(4n+2) h3 { @apply decoration-purple; }
  .portfolio-list-item:nth-of-type(4n+3) h3 { @apply decoration-pink;   }
  @media print {
    blockquote > span {
      @apply text-base;
    }
  }

  blockquote > span > p::before, blockquote > span > p::after {
    content: '"'
  }

  pre {
    @apply overflow-x-scroll leading-normal;
  }

  @keyframes bounce {
    0%,30% {
      transform: translateY(0)
    }
    10% {
      transform: translateY(-.5rem)
    }
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */