@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "./academicons.css" layer(utilities);
@import "./fontawesome.css" layer(utilities);

@layer base {
  blockquote {
    @apply border-l-4 p-4 m-8 relative border-lime-500 baskerville;
  }

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

  blockquote p:last-of-type {
    @apply text-center uppercase mt-4 tracking-wide;
  }
  p {
    @apply my-2 text-lg;
  }

  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 {
  .baskerville {
    font-family: baskerville, serif;
  }
  .menu {
    transition: max-height 0.2s ease-out;
    overflow: hidden;
    display: flex;
    /* this parts must be overridden on non small  */
    flex-direction: column;
    width: 100%;
    position: fixed;
    max-height: 0px;
  }
  .menu-btn:checked ~ .menu {
    max-height: 240px;
    z-index: 2;
  }
  /* What comes next is only to style the ham menu to an X when clicking */
  .menu-icon {
    .navicon {
      display: block;
      height: 2px;
      position: relative;
      transition: background 0.2s ease-out;
      width: 18px;
    }
    .navicon:before,
    .navicon:after {
      background: #ebdbb2;
      content: "";
      display: block;
      height: 100%;
      position: absolute;
      transition: all 0.2s ease-out;
      width: 100%;
    }
    .navicon:before {
      top: 6px;
    }
    .navicon:after {
      top: -6px;
    }
  }
  .menu-btn:checked {
    ~ .menu-icon .navicon {
      background: 0 0;
    }
    ~ .menu-icon .navicon:before {
      transform: rotate(-45deg);
    }
    ~ .menu-icon .navicon:after {
      transform: rotate(45deg);
    }
    ~ .menu-icon:not(.steps) .navicon:before,
    ~ .menu-icon:not(.steps) .navicon:after {
      top: 0;
    }
  }

  #hero {
    text-shadow: 2px 2px 3px black;
  }
  .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;
    }
    dt {
      @apply font-bold;
    }
    dd {
      @apply ml-8;
    }
    .highlight {
      .chroma {
        @apply p-1 overflow-x-scroll;
      }
    }
  }
  .cv-entry,
  .cv-honor {
    @apply ml-4 pl-8 pb-2 relative;
    .cv-role {
      @apply m-0;
    }
    .cv-host,
    .cv-date,
    .cv-location {
      @apply font-light m-0 p-0;
    }
    .cv-host::before {
      font-family: "Font Awesome 6 Free";
      content: "\f1ad";
      font-weight: 900;
      margin: 0 0.5rem;
    }
    .cv-location::before {
      font-family: "Font Awesome 6 Free";
      content: "\f041";
      font-weight: 900;
      margin: 0 0.5rem;
    }
    p {
      @apply text-base my-2;
    }
    ul {
      all: revert;
    }
  }
  .cv-entry {
    @apply border-l border-gray-400;
    .cv-role::before {
      content: "";
      position: absolute;
      width: 2rem;
      height: 2rem;
      background-color: #79c753;
      border-radius: 50%;
      transform: translateX(-50%);
      left: 0;
    }
    .cv-date,
    .cv-location {
      @apply inline-block;
    }
    .cv-date::before {
      font-family: "Font Awesome 6 Free";
      content: "\f133";
      font-weight: 900;
      margin: 0 0.5rem;
    }
  }

  .cv-honor {
    .cv-role {
      @apply ml-12 text-xl;
    }
    .cv-date {
      top: 0.05rem;
      @apply absolute left-0 text-xl;
    }
    .cv-date::before {
      font-family: "Font Awesome 6 Free";
      color: #ffb700;
      content: "\f559";
      font-weight: 900;
      margin: 0 0.5rem;
    }
  }
  .comment {
    @apply my-2 pl-4 border-l border-lime-500 relative;
    h3,
    h4,
    h5,
    h6 {
      @apply my-0 pl-2;
      &::before {
        font-family: "Font Awesome 6 Free";
        color: #79c753;
        content: "\f075";
        font-weight: 900;
        font-size: 2rem;
        position: absolute;
        left: -0.75rem;
        top: -1rem;
        transform: scaleX(-1);
      }
    }
  }

  /* https://lubna.dev/articles/create-css-only-image-gallery/ */
  .gallery {
    --max-img-width: 72rem;
    --max-img-height: 48rem;
    max-width: var(--max-img-width);
    padding-top: min(66%, var(--max-img-height));

    input:checked + img {
      opacity: 1;
    }
    input:checked ~ label > img {
      @apply shadow-md shadow-lime-500;
    }
  }
}

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

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