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

.baskerville {
  font-family: baskerville, serif;
}

blockquote::before {
  font-family: "Font Awesome 6 Free";
  color: #79c753;
  content: "\f10d";
  font-weight: 900;
  font-size: 2rem;
  position: absolute;
  left: 10px;
  top: -15px;
}

@layer base {
  blockquote {
    @apply border-l-4 p-6 py-1 m-8 relative border-lime-500 baskerville;
  }
  blockquote p:last-of-type {
    @apply text-center uppercase mt-4 tracking-wide;
  }
  h1 {
    @apply text-5xl font-bold my-4;
  }
  h2 {
    @apply text-4xl font-bold my-4;
  }
  h3 {
    @apply text-3xl font-bold my-4;
  }
  h4 {
    @apply text-2xl font-bold my-4;
  }
  h5 {
    @apply text-xl font-bold my-4;
  }
  h6 {
    @apply text-lg font-bold my-4;
  }
}

@layer components {
  #hero {
    text-shadow: 2px 2px 3px black;
  }
  .main-content p {
    @apply my-4 text-xl;
  }
  .main-content p code {
    @apply text-blue-500 px-1;
  }
  .main-content a {
    @apply px-1 text-lime-500;
  }
  .main-content a[href^="http"]::after {
    content: "";
    width: 11px;
    height: 11px;
    margin-left: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
  }
  .main-content dl {
    @apply px-8 text-xl;
  }
  .main-content dt {
    @apply font-bold;
  }
  .main-content dd {
    @apply ml-8;
  }
  /* The following one are post render thus I need to build them */
  .main-content .highlight .chroma {
    @apply p-1 overflow-x-scroll;
  }
}

@layer utilities {
  @font-face {
    font-family: "BerkshireSwash-Regular";
    font-display: optional;
    src:
      url("/css/fonts/BerkshireSwash-Regular.ttf.woff") format("woff"),
      url("/css/fonts/BerkshireSwash-Regular.ttf.svg#BerkshireSwash-Regular")
        format("svg"),
      url("/css/fonts/BerkshireSwash-Regular.ttf.eot"),
      url("/css/fonts/BerkshireSwash-Regular.ttf.eot?#iefix")
        format("embedded-opentype");
    font-weight: normal;
    font-style: normal;
  }

  .berkshire-swash {
    font-family: "BerkshireSwash-Regular";
  }
}