@font-face {
  font-family: 'TX-02';
  src: url('/assets/fonts/TX-02-Variable.woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  font-stretch: 60% 100%;
}

@font-face {
  font-family: 'TX-02';
  src: url('/assets/fonts/TX-02-Variable.woff2');
  font-weight: 100 900;
  font-style: oblique -16deg;
  font-display: swap;
  font-stretch: 60% 100%;
}

:root {
  color-scheme: light dark;
  --grey-100: oklch(0.97 0.0 20);
  --grey-200: oklch(0.92 0.0 20);
  --grey-300: oklch(0.86 0.0 20);
  --grey-400: oklch(0.8 0.0 20);
  --grey-500: oklch(0.72 0.0 20);
  --grey-600: oklch(0.63 0.0 20);
  --grey-700: oklch(0.54 0.0 20);
  --grey-800: oklch(0.42 0.0 20);
  --grey-900: oklch(0.31 0.0 20);
  --grey-999: oklch(0.21 0.0 20);

  --red-100: oklch(0.97 0.02 20);
  --red-200: oklch(0.92 0.05 20);
  --red-300: oklch(0.86 0.08 20);
  --red-400: oklch(0.8 0.12 20);
  --red-500: oklch(0.72 0.17 20);
  --red-600: oklch(0.63 0.14 20);
  --red-700: oklch(0.54 0.12 20);
  --red-800: oklch(0.42 0.1 20);
  --red-900: oklch(0.31 0.07 20);
  --mustard-100: oklch(0.96 0.02 90);
  --mustard-200: oklch(0.92 0.05 90);
  --mustard-300: oklch(0.85 0.08 90);
  --mustard-400: oklch(0.79 0.12 90);
  --mustard-500: oklch(0.71 0.17 90);
  --mustard-600: oklch(0.61 0.14 90);
  --mustard-700: oklch(0.52 0.12 90);
  --mustard-800: oklch(0.41 0.1 90);
  --mustard-900: oklch(0.3 0.07 90);
  --turquoise-100: oklch(0.96 0.02 170);
  --turquoise-200: oklch(0.91 0.05 170);
  --turquoise-300: oklch(0.84 0.08 170);
  --turquoise-400: oklch(0.77 0.12 170);
  --turquoise-500: oklch(0.68 0.17 170);
  --turquoise-600: oklch(0.59 0.14 170);
  --turquoise-700: oklch(0.5 0.12 170);
  --turquoise-800: oklch(0.4 0.1 170);
  --turquoise-900: oklch(0.29 0.07 170);
  --azure-100: oklch(0.96 0.02 250);
  --azure-200: oklch(0.92 0.05 250);
  --azure-300: oklch(0.85 0.08 250);
  --azure-400: oklch(0.79 0.12 250);
  --azure-500: oklch(0.7 0.17 250);
  --azure-600: oklch(0.61 0.14 250);
  --azure-700: oklch(0.52 0.12 250);
  --azure-800: oklch(0.41 0.1 250);
  --azure-900: oklch(0.3 0.07 250);
  --fuchsia-100: oklch(0.97 0.02 320);
  --fuchsia-200: oklch(0.92 0.05 320);
  --fuchsia-300: oklch(0.86 0.08 320);
  --fuchsia-400: oklch(0.8 0.12 320);
  --fuchsia-500: oklch(0.73 0.17 320);
  --fuchsia-600: oklch(0.63 0.14 320);
  --fuchsia-700: oklch(0.54 0.12 320);
  --fuchsia-800: oklch(0.42 0.1 320);
  --fuchsia-900: oklch(0.31 0.07 320);

  --bg: light-dark(#ccc, black);
  --fg: light-dark(black, #ccc);
  --fg-strong: light-dark(var(--turquoise-900), var(--turquoise-100));
  --highlight: light-dark(var(--turquoise-700), var(--turquoise-500));
  --code: light-dark(var(--turquoise-800), var(--turquoise-200));
  --font-normal: "TX-02", "Atkinson Hyperlegible Next", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
  --font-fancy: "TX-02", "Sour Gummy", sans-serif;
  --font-mono: "TX-02", "Atkinson Hyperlegible Mono", monospace;
}

@layer prereset {

  /* 1. Use a more-intuitive box-sizing model */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* 2. Remove default margin */
  *:not(dialog) {
    margin: 0;
  }

  /* 3. Enable keyword animations */
  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }

  /* 6. Improve media defaults */
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  /* 7. Inherit fonts for form controls */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  /* 8. Avoid text overflows */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }


  /* 9. Improve line wrapping */
  p {
    text-wrap: pretty;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  /*
  10. Create a root stacking context
*/
  #root,
  #__next {
    isolation: isolate;
  }
}

@layer reset {
  ul {
    padding-left: 0;
  }

  a {
    text-decoration: none;
    color: unset;
  }

  a::hover {
    text-decoration: none;
    color: unset;
  }

  * {
    font-family: var(--font-normal);
  }

  ul,
  li {
    list-style: none;
  }
}

@layer base {

  *,
  ::before,
  ::after {
    transition: all 0.2s ease-in-out;
  }

  body {
    font-family: var(--font-normal);
    color: var(--fg);
    line-height: 2.0;
    background: var(--bg);
    word-wrap: break-word;
    text-rendering: optimizeLegibility;
    font-size: 1.4rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  b,
  strong,
  th {
    font-family: var(--font-fancy);
    font-weight: 900;
  }

  button {
    width: inherit;
    border: none;
  }
}

@layer layout {
  body {
    display: grid;
    row-gap: 5rem;
    margin-bottom: 5rem;
    margin-top: 5rem;
    grid-template-columns: auto;
  }

  header {
    grid-area: header;
    display: grid;

    a {
      grid-area: logo;
    }
  }

  main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    row-gap: 5rem;
  }

  main,
  footer {
    max-width: 900px;
  }


  footer {
    grid-area: footer;
    display: flex;
  }

  @media (max-width: 1000px) {
    body {
      grid-template-areas:
        "header"
        "main"
        "footer"
      ;
    }

    header {
      grid-template-areas: ". logo .";
      grid-template-columns: auto 100px auto;
    }
  }

  @media (min-width: 1000px) {
    body {
      grid-template-areas:
        "header main"
        ". footer"
      ;

      main,
      footer {
        width: 900px;

      }
    }

    header {
      grid-template-areas: "logo";
      width: 90%;

      a {
        direction: rtl;
        grid-area: logo;
        padding: 0rem;
        position: sticky;
        height: fit-content;
        width: inherit;
        top: 0;
        min-width: 100px;
      }
    }

    main {
      grid-area: main;
    }

    footer {
      grid-area: footer;
    }
  }


}

@layer components {

  abbr[title] {
    position: relative;
    text-decoration: underline dotted;

    &:hover,
    &:focus {
      &::after {
        content: attr(title);
        position: absolute;
        left: 0;
        bottom: -30px;
        width: auto;
        white-space: nowrap;

        background-color: var(--fg);
        color: var(--bg);
        border-radius: 5px;
        font-size: 1.0rem;
        padding: 2px;
      }
    }
  }


  /*self exaplanetory*/
  #logo {
    height: 70px;
    width: 100px;
  }

  /* site navigation in the footer for example */
  .site-navigation {
    width: 100%;
  }


  /* list of entries in the homepage */
  section#entry-list-container {
    button.show-more {
      width: inherit;
      color: var(--fg);
      background-color: inherit;
      font-family: var(--font-fancy);
      font-size: inherit;
      margin: 0px;
      padding: 1rem;
      border: 2px solid var(--fg);
      border-radius: 5px;
      outline: none;
      align-content: center;
      width: 100%;

      &::before,
      &::after {
        content: "+";
        padding: 1rem;
        color: var(--highlight);
      }

      &:hover {
        color: var(--bg);
        background-color: var(--fg);

        &::before,
        &::after {
          content: "++";
          color: var(--highlight);
        }
      }
    }

    ul#entry-list {
      font-family: var(--font-fancy);
      display: flex;
      flex-direction: column;

      li[data-category="dailies"] a::before {
        color: var(--azure-600);
      }

      li[data-category="posts"] a::before {
        color: var(--turquoise-600);
      }

      li[data-category="recommendations"] a::before {
        color: var(--mustard-600);
      }

      li[data-category="tils"] a::before {
        color: var(--red-600);
      }

      @media (max-width: 1000px) {
        gap: 1rem;
      }

      a {
        text-decoration: none;
        font-family: var(--font-fancy);

        &::before {
          content: "-";
          color: var(--highlight);
          padding-right: 1rem;
          font-weight: bold;
        }

        &:hover {
          background-color: var(--bg);
          color: var(--fg);

          &::before {
            content: "x";
            color: var(--highlight);
            padding-right: 1rem;
            font-weight: bold;
          }
        }
      }

      li {
        display: flex;
        margin-right: 2rem;

        @media (min-width: 1000px) {
          flex-direction: row;
          justify-content: space-between;
          align-content: center;
          align-items: center;
          min-height: 4rem;

          hr {
            flex-grow: 4;
            margin-right: 0.5rem;
            margin-left: 0.5rem;
          }
        }

        @media (max-width: 1000px) {
          padding-left: 0.5rem;
          flex-direction: column;

          hr {
            display: none;
          }

          time {
            display: none;
          }
        }
      }
    }
  }

  /* a list of links */
  ul.link-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    gap: 1rem;

    grid-template-columns: 1fr 1fr;

    li {
      align-items: center;
      width: 100%;
      text-align: center;

      a {
        font-family: var(--font-fancy);
        font-size: 1.2rem;
        display: block;


        &:hover {

          text-shadow: -1px 1px light-dark(var(--turquoise-700), var(--turquoise-500)), -4px 5px light-dark(var(--red-700), var(--red-600));

          &::before,
          &::after {
            font-weight: 900;
            color: var(--highlight);
            content: "x";
          }

          &::before {
            padding-right: 1rem;
          }

          &::after {
            padding-left: 1rem;
          }
        }
      }
    }
  }



  /* displaying article entries */
  @scope (article) {
    ol li {
      list-style-type: decimal;

      &::marker {
        color: light-dark(var(--turquoise-600), var(--turquoise-400));
        font-family: var(--font-fancy);
        font-weight: 900;
        text-shadow: -1px 1px light-dark(var(--turquoise-800), var(--turquoise-200));

      }

    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin-bottom: 12px;
      margin-top: 24px;
      font-family: var(--font-fancy);
    }

    strong {
      color: var(--fg-strong);
      font-family: var(--font-fancy);
    }

    /* article title */
    h1.article-title {
      padding: 1rem;
      font-size: 4rem;
      line-height: 3.7rem;
      margin: 0rem;
      width: 100%;
      font-stretch: 60%;

      font &::before,
      &::after {
        width: fit-content;
        display: inline-block;
        content: "x";
        color: var(--highlight);
      }

      &::before {
        padding-right: 1rem;
      }

      &::after {
        padding-left: 1rem;
      }

      &:hover {
        &::before {
          rotate: 45deg;
        }

        &::after {
          rotate: -45deg;
        }
      }
    }

    /* quote */
    q {
      border-left: 4px solid var(--highlight);
      margin: 1.5em 0;
      padding: 0.5em 1em;
      font-style: italic;
      font-family: var(--font-fancy);

      &::before,
      &::after {
        content: none;
      }
    }


    blockquote {
      border-left: 4px solid var(--highlight);
      margin: 1.5em 0;
      padding: 0.5em 1em;
      font-style: italic;
      font-family: var(--font-fancy);

      p {
        font-family: inherit;
      }

      >footer {
        font-style: normal;
        border: 0;
      }
    }



    blockquote cite {
      font-style: normal;
    }


    a {
      color: var(--fg);
      text-decoration-color: var(--highlight);
      text-underline-offset: 0.4rem;
      text-decoration-thickness: 0.15rem;
      text-decoration-style: wavy;
      text-decoration-line: underline;
      display: inline-block;

      &:visited {
        text-decoration-color: var(--fg);
      }

      &:hover {
        text-decoration-color: var(--bg);
        color: var(--bg);
        background-color: var(--fg);
        border-radius: 0.5rem;
      }
    }

    pre:has(code) {
      border-left: 0.3rem dotted light-dark(var(--grey-700), var(--grey-600));
      padding-left: 1rem;
      /* border-radius: 1rem; */
      font-size: 1rem;
      margin-top: 1rem;
      margin-bottom: 1rem;
      display: flex;

    }

    code {
      color: light-dark(var(--mustard-800), var(--mustard-200));
      font-family: var(--font-mono);
      padding: 2.5px 5px;

      .attribute {
        color: light-dark(var(--turquoise-800), var(--turquoise-200));
      }

      .type {
        color: light-dark(var(--fuchsia-800), var(--fuchsia-200));
      }

      .comment {
        color: light-dark(var(--turquoise-600), var(--turquoise-400));
      }

      .function {
        color: light-dark(var(--azure-800), var(--azure-200));
      }
    }

    samp {
      color: var(--code);
      background: var(--bg);
      font-family: var(--font-mono);
      padding: 2.5px 5px;
      border-radius: 6px;
      font-size: 1em;
    }

    time {
      color: var(--code);
      background: var(--bg);
      font-family: var(--font-mono);
      padding: 2.5px 5px;
      border-radius: 6px;
      font-size: 1em;
    }

    pre>code {
      padding: 10px;
      display: block;
      overflow-x: auto;
    }

    var {
      color: var(--code);
      font-family: var(--font-mono);
    }

    kbd {
      color: var(--fg);
      background: var(--bg);
      font-family: var(--font-mono);
      padding: 2px 4px 2px 4px;
      border: 1px solid var(--fg);
      border-radius: 2px;
    }

    img,
    video {
      max-width: 100%;
      height: auto;
    }

    hr {
      border-top: 1px solid var(--fg);
    }

    table {
      border-collapse: collapse;
      margin-bottom: 10px;
      width: 100%;
      table-layout: fixed;
    }

    table caption {
      text-align: left;
    }

    td,
    th {
      padding: 6px;
      text-align: left;
      vertical-align: top;
      word-wrap: break-word;
    }

    thead {
      border-bottom: 1px solid var(--fg);
    }

    tfoot {
      border-top: 1px solid var(--fg);
    }

    tbody tr:nth-child(even) {
      /* TODO: change this one */
      background-color: var(--bg);
    }

    tbody tr:nth-child(even) button {
      background-color: var(--bg);
    }

    tbody tr:nth-child(even) button:hover {
      background-color: var(--bg);
    }

    details {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      background-color: var(--bg);
      padding: 10px 10px 0;
      margin: 1em 0;
      border-radius: 6px;
      overflow: hidden;
    }

    details[open] {
      padding: 10px;
    }

    details> :last-child {
      margin-bottom: 0;
    }

    details[open] summary {
      margin-bottom: 10px;
    }

    summary {
      display: list-item;
      background-color: var(--bg);
      padding: 10px;
      margin: -10px -10px 0;
      cursor: pointer;
      outline: none;
    }

    summary:hover,
    summary:focus {
      text-decoration: underline;
    }

    details> :not(summary) {
      margin-top: 0;
    }

    summary::-webkit-details-marker {
      color: var(--fg);
    }

    .entry-footer {
      padding: 0rem;
    }

    @scope (.entry-footer) {
      dt {
        font-family: var(--font-fancy);
        font-weight: bold;
        text-align: left;
        padding-left: 10px;
        padding-top: 10px;
      }

      dd {
        padding: 10px;
        text-align: left;
        margin: 0px;
        font-family: var(--font-fancy);

        ul {
          display: inline-flex;
          list-style: none;
          gap: 1rem;
          padding: 0rem;
          margin: 0rem;

          li {
            list-style: none;
          }
        }
      }
    }
  }

  /* search results */
  .search-results {
    ul {
      padding: 1.5rem;
      list-style: none;

      li.search-result {
        a.article-title {
          font-family: var(--font-fancy);
        }

        .article-snippet {
          padding-left: 1rem;
        }

        mark {
          display: inline-block;
          color: var(--bg);
          background-color: var(--highlight);
          border-radius: 5px;
          padding: 0 2px 0 2px;
          font-family: var(--font-fancy)
        }
      }
    }
  }
}

@layer details {

  ::-moz-selection,
  ::selection {
    background-color: light-dark(var(--turquoise-100), var(--turquoise-900));
  }


  @scope(main) {
    .photo {
      border-radius: 0.2rem;
      min-width: 0px;
      min-height: 0px;
      max-width: 100%;
      padding: 0.2rem;
      display: flex;
      flex-direction: column;

      img {
        max-height: 90vh;
        outline: 0.2rem solid var(--fg);

      }

      figure {
        display: block;

        figcaption {
          display: block;

        }
      }
    }

    .photo-details {
      list-style: none;
      margin: 0;
      padding: 0;

      display: inline-flex;
      flex-direction: row;
      gap: 10px;
      flex-wrap: wrap;


      .photo-detail {
        display: block;
        padding: 0.2rem;
        text-justify: newspaper;
        width: max-content;
        font-size: 0.9rem;
      }

      margin-bottom: 1rem;
    }

    .article-text {
      display: block;
      padding: 1rem;
    }


    nav:has(.previous-button),
    nav:has(.next-button) {
      padding: 0.5rem;
      display: flex;
      flex-direction: row;
      justify-items: stretch;
      justify-content: space-between;
      row-gap: 1rem;

      a {
        width: 100%;
      }

      .next-button {
        text-align: right;
      }

      .previous-button {
        text-align: left;
      }
    }

    .photofeed {
      list-style: none;
      padding: 0;
      display: inline-grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;

      .photo-item {
        background: var(--fg);

        display: flex;
        align-items: center;
        justify-content: center;

        a {
          line-height: 0;
          width: 100%;
          display: flex;
          flex-direction: column;
        }
      }
    }
  }
}

@layer prereset, reset, base, layout, components, details;