@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

* {
  font-family: "JetBrains Mono", monospace;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  transition: all .2s linear;
  scroll-behavior: smooth;
}

:root {
  --background: #131313;
  --secondary-background: #1a1919;
  --primary-text: #FFFFFF;
  --primary-text-soft: #d3d3df;
  --secondary-text: #5D5D5D;
  --accent-color: #32C743;
  --border-color: #494949;
  --divider-color: #505050;
  --tag-color: #c9c9c9;
  --tag-background: #252525;
  --shadow-color: rgba(51, 48, 48, 0.5);
  --not-retired: rgb(255, 180, 41);


  --polka-bg-image:
    radial-gradient(rgb(44, 44, 44) 10%, transparent 10%),
    radial-gradient(rgb(31, 31, 31) 10%, transparent 10%);
  --polka-bg-position: 0px 0px, 16px 16px;
  --polka-bg-size: 32px 32px;
  --polka-bg-color: rgb(29, 29, 29);
}

::selection {
  color: var(--accent-color);
}

@media screen and (min-width: 320px) {

  .space-50 {
    margin: 20px 0;
  }

  .space-100 {
    margin: 100px 0;
  }

  .space-20 {
    height: 20px;
  }

  .space-10 {
    height: 10px;
  }

  .space-30 {
    height: 30px;
  }

  .space-fullpage {
    margin: 550px 0;
  }

  .script-section {
    margin: 20px 0;
  }

  .cursor {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: 0 0 15px var(--secondary-text);
    position: absolute;
    pointer-events: none;
    z-index: 1000;

    &::after {
      content: '';
      inset: -10px;
      border-radius: 50%;
      position: absolute;
    }
  }

  code {
    font-size: 12px;
    color: var(--accent-color);
    padding: 5px;
    border-radius: 2px;
    line-height: 2;
  }

  body {
    background-color: var(--background);
    margin: 0 10px;
    overflow-x: hidden;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    -webkit-overflow-scrolling: touch;
    flex: 1;

    &::-webkit-scrollbar {
      display: none;
    }

  }

  .main {
    margin: 0;
  }

  .line {
    border-top: 1px solid var(--divider-color);
    margin: 10px 0;
  }

  .big-card-header {
    font-size: 26px;
    color: var(--primary-text);
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 10px 0;
  }

  .medium-card-header {
    font-size: 14px;
    color: var(--primary-text);
    font-weight: 500;
    text-transform: uppercase;
    margin: 0 0 5px 0;
  }

  .markdown-h1 {
    font-size: 36px;
    line-height: 1.2;
    color: var(--primary-text-soft);
    font-weight: 800;
    margin: 20px 0 10px 0;
  }

  /* Markdown h2 styling */
  .markdown-h2 {
    font-size: 32px;
    line-height: 1.2;
    color: var(--primary-text-soft);
    margin: 20px 0 10px 0;
    font-weight: 800;
  }

  /* Markdown h3 styling */
  .markdown-h3 {
    font-size: 22px;
    line-height: 1.2;
    color: var(--primary-text-soft);
    margin: 20px 0 10px 0;
    font-weight: 800;
    text-transform: uppercase;
  }

  /* Markdown h4 styling */
  .markdown-h4 {
    font-size: 24px;
    line-height: 1.2;
    color: var(--primary-text-soft);
    margin: 20px 0 5px 0;
    font-weight: 800;
  }

  /* Markdown h5 styling */
  .markdown-h5 {
    font-size: 20px;
    line-height: 1.2;
    color: var(--primary-text-soft);
    margin: 10px 0 5px 0;
    font-weight: 800;
  }

  /* Markdown h6 styling */
  .markdown-h6 {
    font-size: 17px;
    line-height: 1.2;
    color: var(--primary-text-soft);
    margin: 10px 0 5px 0;
    font-weight: 800;
  }

  /* Markdown inline code styling */
  .markdown-inline-code {
    font-family: "JetBrains Mono", monospace;
    background-color: var(--secondary-background);
    color: var(--accent-color);
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
  }

  /* Markdown preformatted code block styling */
  .markdown-pre {
    background-color: var(--secondary-background);
    color: var(--primary-text);
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    font-family: "JetBrains Mono", monospace;
    margin: 0;
  }

  .markdown-table-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling for iOS */
    margin: 15px 0;
  }

  .markdown-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .markdown-table th,
  .markdown-table td {
    border: 1px solid var(--border-color);
    padding: 10px;
    font-size: 12px;
    text-align: left;
    white-space: normal;
    vertical-align: top;
    min-width: 100px;
  }

  .markdown-table th {
    background-color: var(--secondary-background);
    color: var(--primary-text);
    font-weight: 600;
    position: sticky;
    /* Keep headers visible during horizontal scrolling */
    top: 0;
    z-index: 1;
  }

  .markdown-table tr {
    display: table-row;
  }

  .markdown-table td {
    display: table-cell;
    background-color: var(--background);
    color: var(--primary-text);

    &::after {
      content: none;
    }
  }

  /* Ensure tables are not affected by list styles */
  .markdown-table ul,
  .markdown-table ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* List styling */
  .markdown-ul,
  .markdown-ol {
    margin: 10px 0;
    padding-left: 20px;
    color: var(--primary-text);
  }

  .markdown-ul {
    list-style-type: circle;
  }

  .markdown-ol {
    list-style-type: decimal;
  }

  .markdown-li {
    font-size: 14px;
    color: var(--primary-text-soft);
    line-height: 1.3;
    font-weight: 400;
    margin: 10px 0;
  }

  /* Nested list styling with proper specificity */
  .markdown-ul .markdown-ul,
  .markdown-ol .markdown-ol {
    padding-left: 20px;
  }

  .markdown-ul .markdown-ul .markdown-ul,
  .markdown-ol .markdown-ol .markdown-ol {
    padding-left: 20px;
  }

  /* Different bullet styles for nested levels */
  .markdown-ul .markdown-ul {
    list-style-type: disc;
  }

  .markdown-ul .markdown-ul .markdown-ul {
    list-style-type: circle;
  }

  /* Markdown strong (bold) text styling */
  .markdown-strong {
    font-weight: bold;
    color: var(--primary-text);
  }

  /* Markdown emphasis (italic) text styling */
  .markdown-em {
    font-style: italic;
    color: var(--secondary-text);
  }

  .markdown-p {
    font-size: 14px;
    line-height: 1.7;
    font-weight: 400;
    margin: 0 0 15px 0;
    color: var(--primary-text-soft);
  }

  .markdown-img {
    max-width: 100%;
    height: auto;
  }

  .markdown-link {
    color: var(--secondary-text);
    text-decoration: underline;

    &:hover {
      color: var(--accent-color);
    }
  }

  .markdown-link-toc {
    color: var(--secondary-text);
    font-size: 12px;
    text-decoration: underline;

    &:hover {
      color: var(--accent-color);
    }
  }

  .markdown-link-text {
    color: var(--secondary-text);
    font-size: 14px;
    font-style: italic;
  }

  .markdown-link-custom {
    color: var(--secondary-text);
    font-size: 14px;
    text-decoration: none;
    font-style: italic;

    &:hover {
      color: var(--accent-color);
      text-decoration: underline;
    }
  }

  /* Markdown tag styling */
  .markdown-tag {
    background-color: var(--tag-background);
    color: var(--tag-color);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
  }


  .markdown-code {
    font-family: "JetBrains Mono", monospace;
    background-color: var(--secondary-background);
    padding: 5px;
    border-radius: 3px;
  }

  .diary-entry {

    /* Title styling */
    .entry-title {
      font-size: 30px;
      font-weight: 800;
      color: var(--primary-text-soft);
      margin: 20px 0 15px 0;
    }

    .container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      /* Date styling */
      .entry-date {
        font-size: 12px;
        color: var(--secondary-text);
        margin-bottom: 15px;
      }

      .entry-week {
        font-size: 12px;
        color: var(--secondary-text);
        margin: 0 0 5px 0;
      }
    }

    /* Summary styling */
    .entry-summary {
      font-size: 16px;
      color: var(--secondary-text);
      margin-bottom: 20px;
    }

    /* Content styling */
    .entry-content {
      line-height: 1.8;
      margin: 0;
    }

  }



  .paragraph {
    font-size: 12px;
    color: var(--primary-text);
    font-weight: 400;
    text-wrap: wrap;
  }

  .paragraph-caps {
    font-size: 12px;
    color: var(--primary-text);
    font-weight: 400;
    text-transform: uppercase;
  }

  .h1 {
    font-size: 12px;
    color: var(--primary-text);
    font-weight: 600;
  }

  .h2 {
    font-size: 12px;
    color: var(--secondary-text);
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 5px 0;
  }

  .h3 {
    font-size: 10px;
    color: var(--secondary-text);
    font-weight: 400;
    text-transform: uppercase;
    margin: 0 0 10px 0;
  }

  .h2-lower {
    font-size: 12px;
    color: var(--secondary-text);
    font-weight: 600;
    text-transform: unset;
  }

  .h1-caps {
    font-size: 14px;
    color: var(--primary-text);
    font-weight: 700;

  }

  .paragraph-link {
    font-size: 12px;
    color: var(--primary-text);
    font-weight: 400;
    text-decoration: underline;

    &:hover {
      color: var(--accent-color);
      text-decoration: underline;
    }
  }

  .hide-on-mobile {
    display: none;
  }

  #loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.5s ease, visibility 0.5s ease;

    &.hidden {
      opacity: 0;
      visibility: hidden;
    }
  }

  .main-content {
    opacity: 0;
    transition: opacity 0.5s ease;

    &.visible {
      opacity: 1;
    }
  }

  .pong-loader {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    height: 40px;
    width: 6px;
    background-color: transparent;
    animation: paddles 0.75s ease-out infinite;
    transform: translate3d(0, 0, 0);

    &:before {
      content: "";
      position: absolute;
      margin: 0 auto;
      left: 0;
      right: 0;
      top: 15px;
      width: 10px;
      height: 10px;
      background-color: #fff;
      border-radius: 50%;
      animation: ballbounce 0.6s ease-out infinite;
    }
  }

  @keyframes paddles {
    0% {
      box-shadow: -25px -10px 0px #fff, 25px 10px 0px #fff;
    }

    50% {
      box-shadow: -25px 8px 0px #fff, 25px -10px 0px #fff;
    }

    100% {
      box-shadow: -25px -10px 0px #fff, 25px 10px 0px #fff;
    }
  }

  @keyframes ballbounce {
    0% {
      transform: translateX(-20px) scale(1, 1.2);
    }

    25% {
      transform: scale(1.2, 1);
    }

    50% {
      transform: translateX(15px) scale(1, 1.2);
    }

    75% {
      transform: scale(1.2, 1);
    }

    100% {
      transform: translateX(-20px);
    }
  }

  .link-style {
    overflow: hidden;
    position: relative;
    display: inline-block;
    color: var(--accent-color);
    margin: 0 0 -5px 0;

    &:hover::before {
      transform-origin: 0% 50%;
      transform: scaleX(1);
    }

    &:hover::after {
      transform: translate3d(0, 0, 0);
    }

    &::before {
      content: '';
      position: absolute;
      width: 100%;
      left: 0;
      background-color: var(--accent-color);
      height: 2px;
      bottom: 0;
      transform-origin: 100% 50%;
      transform: scaleX(0);
      transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
    }

    &::after {
      position: absolute;
      width: 100%;
      left: 0;
      content: attr(data-replace);
      height: 100%;
      top: 0;
      transform-origin: 100% 50%;
      transform: translate3d(200%, 0, 0);
      transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
      color: var(--primary-text);

    }

    span {
      display: inline-block;
      transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);

    }
  }

  .link-style:hover span {
    transform: translate3d(-200%, 0, 0);
  }

  .secondary-link:hover {
    color: var(--accent-color);
  }

  /*
Fonts and global styles. 

_______________________________________________________________________________________________________________________________

Section styles.

*/

  .top-info-section {
    display: flex;
    padding: 10px 0;
    flex-direction: column;
    width: 100%;

    p {
      display: inline-block;
      flex-direction: row;
      padding: 10px 0;
    }

    .header-box {
      display: grid;
      grid-template-columns: 1fr 1fr;
      justify-content: space-between;
      padding: 10px 0;

      a:hover {
        color: var(--accent-color);
      }
    }

    .row-2 {
      display: flex;
      padding: 20px 0;

      .column {
        margin: 0 10px 0 0;
        width: 50%;
      }
    }

  }

  .tech-stack-section {
    padding: 10px 0;
    max-width: 100%;
    display: grid;
    grid-template-columns: auto;

    .header {
      margin: 10px 0;
    }

    .medium-card-box {
      display: grid;
      grid-template-columns: auto;
      overflow-y: scroll;
      max-height: 400px;
      scrollbar-width: thin;
      scrollbar-color: var(--divider-color) var(--background);
      padding: 10px;

      img {
        width: 40px;
        height: auto;
        border-radius: 2px;
        margin: 0 10px 0 0;
      }

      .medium-card {
        display: flex;
        flex-direction: column;
        box-shadow: 0 0 2px var(--secondary-text);
        padding: 10px;
        background: -webkit-radial-gradient(circle, var(--shadow-color), var(--background));
        border-radius: 5px;
        margin: 0 0 10px 0;

        &:hover {
          scale: 1.03;
        }

        .row {
          display: grid;
          grid-template-columns: 1fr 5fr 3fr;
          align-items: center;
          padding: 5px 0;

          h4 {
            margin: 0;
          }
        }
      }
    }
  }


  .search-wrapper {
    display: flex;
    flex-direction: column;
    margin: 0px 0 50px 0;

    label {
      margin: 0 0 10px 0;
    }

    input {
      padding: 15px;
      border-radius: 2px;
      border: var(--tag-background) 1px solid;
      background-color: var(--background);
      color: var(--primary-text);
      margin: 0 0 10px 0;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;

      &:focus {
        outline: none;
        border: var(--accent-color) 1px solid;
      }

      &:hover {
        border: var(--border-color) 1px solid;
      }

      &.valid {
        border-color: var(--accent-color);
        box-shadow: 0 0 5px rgba(50, 199, 67, 0.3);
      }

      &.invalid {
        border-color: #ff4444;
        box-shadow: 0 0 5px rgba(255, 68, 68, 0.3);
      }
    }
  }

  /* Styling for tag buttons */
  .tag-buttons {
    padding: 10px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-height: 95px;
    overflow: hidden;

    .tag-button {
      padding: 8px 12px;
      background-color: var(--tag-background);
      color: var(--tag-color);
      border: 1px solid var(--tag-background);
      border-radius: 5px;
      cursor: pointer;
      font-size: 12px;
      text-transform: uppercase;
      transition: all 0.3s ease, color 0.3s ease;

      &:hover {
        background-color: var(--accent-color);
        color: var(--background);
        transform: translateY(-2px);
      }

      &.active {
        background-color: var(--accent-color);
        color: var(--background);
        border: 1px solid var(--accent-color);
        padding: 8px 12px;
        transition: all 0.3s ease;
      }
    }
  }

  .project-section {

    .grid {
      display: grid;
      grid-template-columns: auto;
      break-inside: avoid;
      gap: 15px;

      .big-card-box {
        display: none;
        border-radius: 5px;
        box-shadow: 0 0 2px var(--secondary-text);
        background: -webkit-radial-gradient(circle, var(--shadow-color), var(--background));
        padding: 10px;
        opacity: 0;
        width: 100%;
        transform: translateY(20px);
        transition: opacity 1s ease, scale 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;

        .header {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          background-color: transparent;
        }

        &:hover {
          scale: 0.99;
        }

        &:hover img {
          background-color: var(--background);
          opacity: 0.6;
        }

        img {
          width: 100%;
          height: auto;
          overflow: hidden;
          margin: 0 0 10px 0;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .tags {
          padding: 10px 0;
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }

        .tag {
          color: var(--tag-color);
          font-size: 11px;
          border-radius: 5px;
          border: var(--tag-background) 1px solid;
          padding: 2px 8px;
          background-color: var(--tag-background);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Dynamic project loading states */
        &.project-visible {
          display: block;
          opacity: 1;
          transform: translateY(0);
        }

        &.project-hidden {
          display: block;
          opacity: 0;
          transform: translateY(20px);
          pointer-events: none;
          height: 0;
          overflow: hidden;
          margin: 0;
          padding: 0;
        }

        &.project-loading {
          display: block;
          opacity: 0;
          transform: translateY(20px);
          pointer-events: none;
        }

        /* Enhanced transitions for all elements */
        a {
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .big-card-header,
        .h2 {
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
      }
    }
  }

  /* Error message styling */
  .project-error {
    color: #ff6b6b;
    padding: 20px;
    text-align: center;
    background-color: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 5px;
    margin: 20px 0;
  }

  .button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
  }

  .load-more-button {
    padding: 6px 50px;
    margin: 10px 0;
    cursor: pointer;
    background-color: var(--background);
    border: var(--shadow-color) 1px solid;
    border-radius: 5px;

    &:hover {
      box-shadow: 0 0 30px var(--shadow-color);
      border: var(--background) 0px solid;
      scale: 0.90;
    }

    a {
      color: var(--primary-text);
    }
  }





  .footer {
    padding: 30px 0px 40px 10px;
    display: grid;
    grid-template-columns: 1fr 5fr 3fr;
    margin: 0 -10px;
    background-image: var(--polka-bg-image);
    background-position: 1px 5px;
    background-size: 16px 16px;
    background-color: var(--polka-bg-color);
    justify-content: space-between;

    .version-updated {
      margin: 0 10px;
    }

    .version-button {

      p {
        color: var(--accent-color);
        padding: 8px 10px;
        margin: 0 10px;
        cursor: pointer;
        border: var(--accent-color) 2px solid;
        border-radius: 25px;
        font-size: 12px;
        text-align: center;
        max-width: max-content;

        &:hover {
          background-color: var(--accent-color);
          color: var(--background);
          transform: scale(1.1);
        }
      }
    }

    .social-bar {

      img {
        width: 30px;
        height: auto;
        cursor: pointer;

        &:hover {
          transform: scale(1.2);
          color: var(--primary-text);
        }
      }
    }
  }

  /*
___________________________________________________________________________________________________________________________


Individual project page

**Strats here** 

*/


  .header {
    background-color: var(--background);

    .header-box {
      display: grid;
      grid-template-columns: 5fr 4fr 2fr 1fr;
      padding: 20px 0 0 0;

      a:hover {
        color: var(--accent-color);
      }
    }
  }

  .close-button {
    position: absolute;
    top: 10px;
    right: 30px;
    cursor: pointer;
    color: var(--primary-text);
    font-size: 25px;

    &:hover {
      color: var(--accent-color);
      transform: rotate(90deg);
      transition: all 0.5s ease;
    }
  }


  .hero-img {
    width: 100%;
    height: auto;
    margin: 0 0 20px 0;
  }

  .about-project .space {
    margin: 0 0 20px 0;
  }

  .two-columns {
    column-count: 1;
    margin: 0 0 20px 0;
  }

  .group {
    display: flex;
    flex-direction: column;
    margin: 0 0 20px 0;
  }

  .short-info {
    display: grid;
    grid-template-columns: auto auto;
    padding: 10px 0;
  }

  .buttons {
    column-count: 2;

  }

  .button {
    padding: 15px 10px;
    cursor: pointer;
    background-color: var(--background);
    border: var(--shadow-color) 1px solid;
    border-radius: 5px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: start;
    text-wrap: stable;

    .arrow {
      font-size: 15px;
    }

    a {
      color: var(--primary-text);
    }

    &:hover {
      box-shadow: 0 0 20px var(--shadow-color);
      border: var(--background) 0px solid;
    }
  }

  .content {

    p {
      margin: 0 0 20px 0;
    }

    img {
      width: 100%;
      margin: 0 0 10px 0;
    }
  }

  .h2-toc {
    color: var(--secondary-text);
    font-size: 14px;

    &:hover {
      color: var(--accent-color);
      text-decoration: underline;
    }
  }

  .sidebar-container {

    .sidebar {

      li {
        margin: 5px 0;
      }
    }
  }


  .active {
    border-left: var(--accent-color) 2px solid;
    padding: 0 0 0 4px;
  }

  .class {

    .h2-toc {
      margin: -10px 0 0px 0;
    }

    table {
      width: 100%;
      margin: 0 0 50px 0;
    }

    tr {
      display: grid;
      grid-template-columns: 1fr 3fr 3fr;
      margin: 0 0 10px 0;
    }

    td {
      display: flex;
      width: 100%;
      border-collapse: collapse;
      align-items: first baseline;

      &::after {
        content: '';
        flex-grow: 1;
        border-bottom: 2px dotted var(--secondary-text);
        margin: 10px 4px 0 4px;
      }
    }

    th {
      text-align: start;
      padding: 20px 0 4px 0;
    }

    .sub-heading {
      margin: 5px 0 10px 0;
    }

  }

  .four-columns tr {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr;
    margin: 0 0 10px 0;
  }

  .four-columns .not-retired {
    color: var(--not-retired)
  }

  .four-columns .retired {
    color: var(--accent-color)
  }

  /* 
___________________________________________________________________________________________________________________________

404 SECTION CSS

*/
  .error-section {
    display: flex;
    flex-direction: column;
    margin: 20px;

    .error-image {
      width: 100%;
      height: auto;
      margin: 0 0 20px 0;
    }

    .error-message {
      font-size: 18px;
      color: var(--secondary-text);
      font-weight: 400;
      text-transform: uppercase;
      margin: 0 0 20px 0;
    }

    .error-button {
      padding: 15px 10px;
      cursor: pointer;
      background-color: var(--background);
      border: var(--accent-color) 1px solid;
      border-radius: 5px;
      width: 250px;

      &:hover {
        box-shadow: 0 0 30px var(--shadow-color);
        border: var(--background) 0px solid;
      }

      a {
        font-weight: 700;
        color: var(--accent-color);
      }
    }
  }

  .space-below {
    padding: 100px 0;
  }

  .article {
    margin: 0px 0;
    padding: 0 10px;

    p {
      margin: 0 0 10px 0;
    }

    .h2-lower {
      margin: 10px 0 0 0;
    }

    .h2 {

      .h2-toc {
        font-size: 12px;
        text-decoration: underline;
      }
    }

    img {
      display: block;
      width: 100%;
      height: auto;
      margin: 10px auto 10px auto;
    }

    table {
      width: 100%;
      margin: 5px 0 10px 0;

      tr {
        display: grid;
        grid-template-columns: 2fr 3fr 3fr;
        margin: 0 0 0px 0;
      }

      th {
        padding: 10px;
        border: 1px solid var(--border-color);
      }

      td {
        display: block;
        width: 100%;
        padding: 5px;
        align-items: center;
        border: 1px solid var(--border-color);
      }
    }

    pre {
      border-radius: 2px;
      width: 100%;
      padding: 0 15px;
      overflow-x: scroll;
      scrollbar-width: thin;
      background-color: var(--secondary-background);
      scrollbar-color: var(--divider-color) var(--secondary-background);

      code {
        font-size: 12px;
        font-weight: 100;
        padding: 0;
        margin: 0;
        color: var(--primary-text);
        background-color: var(--secondary-background);
      }
    }
  }

  article li {
    margin: 0 0 0 15px;
    padding: 0 0 20px 0;
  }

  .school-container {
    margin: 10px 0;
    height: 100%;
    display: flex;
    flex-direction: column;

    .container {
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 2px var(--border-color);
      width: 100%;
      margin: 10px 0;
      padding: 15px;
      flex: 1;
      min-height: 0;

      &:hover {
        transform: scale(1.01);
      }

      .header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-shrink: 0;
      }

      /* Ensure content areas are flexible */
      #radar-chart,
      .toolbox-preview {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 200px;
        min-width: 280px;
      }
    }
  }

  .containers-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }


  /* Styling for the diary cards container */
  #diary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 10px;
  }

  /* Styling for individual diary cards */
  .diary-list {
    border: 1px solid var(--tag-background);
    border-radius: 5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    background: -webkit-radial-gradient(circle, var(--secondary-background), var(--background));
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 320px;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 10px var(--shadow-color);
    }

    .header {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      background-color: transparent;

      .h3 {
        font-size: 11px;
        color: var(--secondary-text);
        margin: 0;
      }
    }

    .content {
      padding: 0 20px 60px 20px;
      /* Add bottom padding to prevent overlap */
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;

      .medium-card-header {
        margin: 5px 0;
        font-size: 22px;
      }

      .h3 {
        margin: 0 0 30px 0;
        font-size: 11px;
      }

      .paragraph {
        font-size: 12px;
        color: var(--primary-text);
        line-height: 1.6;
      }
    }

    .container {
      border-top: 1px solid var(--tag-background);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 5px 10px;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;

      .read-time {
        font-size: 12px;
        color: var(--secondary-text);
        margin: 10px;
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 8px 10px;

        .tag {
          background-color: var(--tag-background);
          color: var(--tag-color);
          font-size: 11px;
          padding: 4px 8px;
          border-radius: 5px;
          text-transform: uppercase;
        }
      }
    }

    .line {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 45px;
      margin: 0;
      z-index: 1;
    }
  }

  /* Radar Chart Styles */
  #radar-chart {
    width: 100%;
    min-height: 200px;
    min-width: 300px;
    position: relative;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
  }

  #radar-chart svg {
    width: 100%;
    height: 100%;
    min-width: 300px;
    min-height: 300px;
    max-width: calc(100% - 10px);
    max-height: calc(100% - 10px);
  }

  .radar-label {
    font-size: 16px !important;
  }

  /* QR Code Generator Styles */
  .qr-generator-container {
    margin: 20px 0;
  }

  .qr-input-section {
    margin-bottom: 20px;
  }

  .qr-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
  }

  .qr-button {
    padding: 12px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "JetBrains Mono", monospace;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;

    &.primary {
      background-color: var(--accent-color);

      &:hover {
        background-color: var(--background);
        transform: translateX(-2px);
        box-shadow: 0 4px 15px var(--shadow-color);
      }
    }

    &.secondary {
      background-color: var(--secondary-background);
      color: var(--primary-text);
      border: 1px solid var(--border-color);

      &:hover {
        background-color: var(--border-color);
        transform: translateY(-2px);
      }
    }

    &.danger {
      background-color: transparent;
      color: var(--secondary-text);
      border: 1px solid var(--secondary-text);

      &:hover {
        background-color: var(--secondary-text);
        color: var(--background);
        transform: translateY(-2px);
      }
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none !important;

      &:hover {
        transform: none !important;
        box-shadow: none !important;
      }
    }

    &.rate-limited {
      background-color: #ff4444;
      color: var(--background);

      &:hover {
        background-color: #ff4444;
      }
    }
  }

  /* Security Features Styles */
  .security-status {
    border-radius: 8px;
    padding: 8px 12px;
    margin: 15px 0 10px 0;

    &.secure {
      border-color: var(--accent-color);
      background-color: rgba(50, 199, 67, 0.1);
    }

    &.warning {
      border-color: #ffaa00;
      background-color: rgba(255, 170, 0, 0.1);
    }

    &.danger {
      border-color: #ff4444;
      background-color: rgba(255, 68, 68, 0.1);
    }
  }

  .security-indicator {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .security-icon {
    font-size: 16px;
  }

  .rate-limit-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: 0;
  }

  .input-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin-top: 6px;
    padding: 0 5px;
  }

  .input-status-success {
    color: var(--accent-color) !important;
  }

  .input-status-error {
    color: #ff4444 !important;
  }

  .input-status-neutral {
    color: var(--secondary-text) !important;
  }

  .security-info {
    text-align: center;
    padding: 8px;
    background-color: var(--background);
    border: 1px solid var(--accent-color);
    border-radius: 5px;
    margin-top: 10px;

    .h3 {
      color: var(--accent-color);
      margin: 0;
      font-size: 10px;
    }
  }

  .qr-display-section {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
  }

  .qr-code-container {
    padding: 15px;
    background-color: var(--secondary-background);
    border-radius: 10px;
    box-shadow: 0 0 20px var(--shadow-color);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .qr-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 15px;
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    background-color: var(--secondary-background);
    width: 100%;
    max-width: 300px;
  }

  .placeholder-content {
    text-align: center;
  }

  .placeholder-icon {
    font-size: 36px;
    margin-bottom: 10px;
    opacity: 0.6;
  }



  /* Character counter styling */
  #char-count {
    font-size: 10px;
    opacity: 0.7;

    &.warning {
      color: #ffaa00;
    }

    &.danger {
      color: #ff4444;
    }
  }

  @keyframes slideIn {
    from {
      transform: translateX(100%);
      opacity: 0;
    }

    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  /* Terminal Preview Styles */
  .terminal-preview {
    display: flex;
    border-radius: 8px;
    padding: 0;
    font-family: "JetBrains Mono", monospace;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: scroll;
    min-height: 100px;
    max-height: 420px;
    align-items: center;
    justify-content: center;
    scrollbar-width: none;
  }

  .terminal-body {
    height: 100%;
  }

  .terminal-line {
    display: flex;
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.4;
  }

  .terminal-prompt {
    color: #27ca3f;
    margin-right: 6px;
    flex-shrink: 0;
  }

  .terminal-command {
    color: #ffffff;
  }

  .terminal-output {
    color: #8a8a8a;
    margin-left: 0;
  }

  .terminal-success {
    color: #27ca3f;
  }

  .terminal-warning {
    color: #ffbd2e;
  }

  .terminal-error {
    color: #ff5f56;
  }

  .terminal-ascii {
    color: var(--accent-color);
    font-weight: bold;
    font-size: 10px;
    line-height: 1.1;
  }

  @keyframes terminalBlink {

    0%,
    50% {
      opacity: 1;
    }

    51%,
    100% {
      opacity: 0;
    }
  }

  .terminal-cursor {
    display: inline-block;
    width: 8px;
    height: 14px;
    background-color: #ffffff;
    margin-left: 2px;
    animation: terminalBlink 1s infinite;
  }

  /* Toolbox Cards Grid Layout */
  #toolbox-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 10px;
  }

  .tool-card {
    border: 1px solid var(--tag-background);
    border-radius: 5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    background: -webkit-radial-gradient(circle, var(--secondary-background), var(--background));
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 320px;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 10px var(--shadow-color);
    }
  }

  /* Image Converter Styles - Mobile */
  .converter-section {
    margin: 20px 0;
  }

  .upload-area {
    border: 3px dashed var(--tag-background);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--card-background);
    position: relative;
    overflow: hidden;

    &:hover {
      border-color: var(--accent-color);
      background: rgba(255, 255, 255, 0.01);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    &.drag-over {
      border-color: var(--accent-color);
      background: rgba(133, 133, 133, 0.1);
      transform: scale(1.02);
      box-shadow: 0 0 20px rgba(133, 133, 133, 0.3);

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(133, 133, 133, 0.2), transparent);
        animation: drag-shimmer 1s infinite;
      }
    }
  }

  .upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 1;

    small {
      display: block;
      margin-top: 8px;
      opacity: 0.7;
      font-size: 12px;
      line-height: 1.4;
    }
  }


  .upload-icon {
    font-size: 2.5em;
    opacity: 0.7;
  }

  .controls-section {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--tag-background);
    border-radius: 8px;
    padding: 20px;
    margin: 25px 0;

    .controls-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      margin: 15px 0;
    }
  }

  .action-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;

    @media (max-width: 480px) {
      flex-direction: column;
    }
  }

  .btn-primary,
  .btn-secondary {
    padding: 8px 18px;
    border-radius: 5px;
    border: none;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85em;
  }

  .btn-primary {
    background: var(--accent-color);
    color: var(--background);

    &:hover:not(:disabled) {
      background: var(--accent-hover, var(--accent-color));
      transform: translateY(-2px);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }

  .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--tag-background);

    &:hover {
      background: rgba(255, 255, 255, 0.2);
    }
  }

  .preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin: 20px 0;
  }

  .preview-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tag-background);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;

    .preview-image {
      width: 100%;
      height: 120px;
      object-fit: cover;
      border-radius: 5px;
      background: rgba(0, 0, 0, 0.2);
    }

    .preview-info {
      text-align: center;
    }

    .file-name {
      color: rgba(255, 255, 255, 0.9);
      font-size: 0.85em;
      font-weight: 600;
      margin-bottom: 4px;
      word-break: break-word;
    }

    .file-size {
      color: rgba(255, 255, 255, 0.6);
      font-size: 0.75em;
      margin-bottom: 10px;
    }

    .download-single {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid var(--tag-background);
      border-radius: 4px;
      padding: 6px 12px;
      color: rgba(255, 255, 255, 0.9);
      cursor: pointer;
      font-size: 0.8em;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-1px);
      }
    }
  }

  .download-section {
    text-align: center;
    margin: 30px 0;
  }

  .preview-section {
    margin: 30px 0;
  }

  /* Sticky Download Header - Mobile */
  .sticky-download-header {
    background: var(--background);
    border: 1px solid var(--tag-background);
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 16px;
    transition: all 0.2s ease;
    will-change: transform;

    &.stuck {
      position: sticky;
      top: 20px;
      z-index: 100;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .sticky-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .files-summary {
      display: flex;
      flex-direction: column;
      gap: 4px;
      text-align: left;
      min-width: 140px;

      @media (max-width: 480px) {
        text-align: center;
        width: 100%;
      }

      .files-count {
        color: var(--primary-text);
        font-weight: 600;
        font-size: 16px;
      }

      .total-size {
        color: var(--primary-text-soft);
        font-size: 14px;
      }
    }

    .sticky-actions {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;

      @media (max-width: 480px) {
        width: 100%;
        justify-content: center;
      }

      .btn-primary,
      .btn-secondary {
        padding: 8px 16px;
        font-size: 14px;
        white-space: nowrap;
      }
    }
  }

  /* Enhanced Preview Items - Mobile */
  .preview-item {
    position: relative;
  }

  .file-name {
    font-weight: 600;
    margin-bottom: 4px;
    word-break: break-word;
  }

  .file-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0 12px 0;
    gap: 8px;
    flex-direction: row;
    flex-wrap: wrap;

    @media (max-width: 400px) {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .file-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 0;

    @media (max-width: 400px) {
      margin-top: 8px;
    }
  }

  .file-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #333;
    cursor: pointer;
    flex-shrink: 0;
    appearance: none;
    border: 2px solid var(--tag-background);
    border-radius: 3px;
    background: var(--secondary-background);
    position: relative;
    transition: all 0.2s ease;

    &:checked {
      background: #2a2a2a;
      border-color: #1a1a1a;

      &::after {
        content: '';
        position: absolute;
        top: -2px;
        left: 3px;
        width: 5px;
        height: 10px;
        border: solid var(--accent-color);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }
    }

    &:hover {
      border-color: var(--accent-color);
    }
  }

  .compression-method {
    background: var(--tag-background);
    color: var(--primary-text-soft);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
  }

  /* Conversion Statistics - Mobile */
  .conversion-statistics {
    background: var(--card-background);
    border: 2px solid var(--tag-background);
    border-radius: 8px;
    padding: 12px;
    margin: 16px 0;
    animation: slideInUp 0.5s ease-out;

    .stats-header {
      text-align: center;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--tag-background);
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
    }

    .stat-group {
      padding: 8px;
      border-radius: 6px;

      h4 {
        color: var(--accent-color);
        margin-bottom: 8px;
        font-size: 14px;
        text-align: center;
      }
    }

    .stat-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      &:last-child {
        border-bottom: none;
      }
    }

    .stat-label {
      color: var(--primary-text-soft);
      font-size: 13px;
    }

    .stat-value {
      color: var(--primary-text);
      font-weight: 600;
      font-size: 13px;
      text-align: right;

      &.stat-positive {
        color: #4ade80 !important;
      }

      &.stat-negative {
        color: #f87171 !important;
      }
    }
  }

  /* Progress Bar Section */
  .progress-section {
    background: var(--background);
    border: 1px solid var(--tag-background);
    border-radius: 8px;
    animation: slideInUp 0.3s ease-out;
    padding: 15px;
    
    .progress-container {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    .progress-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      
      h3 {
        font-size: 16px;
        margin: 0;
      }
      
      @media (max-width: 480px) {
        flex-direction: column;
        text-align: center;
      }
    }
    
    .progress-stats {
      display: flex;
      gap: 15px;
      align-items: center;
      color: var(--secondary-text);
      font-size: 12px;
      
      @media (max-width: 480px) {
        flex-direction: column;
        gap: 4px;
      }
    }
    
    .progress-bar-container {
      display: flex;
      align-items: center;
      gap: 10px;
      
      @media (max-width: 480px) {
        flex-direction: column;
        gap: 8px;
      }
    }
    
    .progress-bar {
      flex: 1;
      height: 8px;
      background: var(--secondary-background);
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid var(--tag-background);
      position: relative;
      
      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--accent-color), #25e46b);
        border-radius: 4px;
        width: 0%;
        transition: width 0.3s ease;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
          animation: progress-shimmer 2s infinite;
        }
      }
    }
    
    .progress-percentage {
      color: var(--secondary-text);
      font-size: 12px;
      min-width: 35px;
      text-align: right;
    }
  }

  @keyframes progress-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  /* HEIC Help Section */
  .heic-help-section {
    margin: 20px 0;
    animation: slideInUp 0.3s ease-out;
  }

  .info-card {
    background: var(--background);
    border: 1px solid #ff9800;
    border-radius: 8px;
    padding: 20px;
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      background: linear-gradient(90deg, #ff9800, #ffa726);
      border-radius: 8px;
    }
    
    h4 {
      color: #ff9800;
      margin: 0 0 15px 0;
      font-size: 12px;
    }
    
    p {
      color: var(--primary-text-soft);
      margin-bottom: 15px;
      line-height: 1.5;
    }
  }

  .conversion-tips {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
    
    .tip {
      background: rgba(255, 152, 0, 0.1);
      border-left: 3px solid #ff9800;
      padding: 10px 12px;
      border-radius: 0 5px 5px 0;
      font-size: 14px;
      line-height: 1.4;
      
      strong {
        color: #ff9800;
        display: inline-block;
        min-width: 100px;
      }
    }
    
    @media (max-width: 480px) {
      .tip {
        padding: 8px 10px;
        font-size: 13px;
        
        strong {
          display: block;
          margin-bottom: 4px;
          min-width: auto;
        }
      }
    }
  }

  /* Image Converter - Shared Components */
  .control-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .control-group label {
    color: var(--primary-text);
    font-weight: 500;
  }

  .format-select,
  .size-input {
    background-color: var(--secondary-background);
    border: 2px solid var(--tag-background);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--primary-text-soft);
    font-size: 14px;
    transition: all 0.3s ease;
  }

  /* Custom styling for number input spinners */
  .size-input {
    position: relative;
  }

  .size-input::-webkit-outer-spin-button,
  .size-input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }

  .size-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
  }

  .resize-input-wrapper {
    position: relative;
    display: inline-block;
  }

  .custom-spinner {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    width: 16px;
    height: 24px;

    .spinner-btn {
      width: 16px;
      height: 12px;
      border: none;
      background: var(--tag-background);
      color: var(--primary-text-soft);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      line-height: 1;
      transition: background-color 0.2s ease;

      &:hover {
        background: var(--accent-color);
        color: var(--background);
      }

      &:first-child {
        border-radius: 3px 3px 0 0;
        border-bottom: 1px solid var(--secondary-background);
      }

      &:last-child {
        border-radius: 0 0 3px 3px;
      }
    }
  }

  .format-select:focus,
  .size-input:focus {
    outline: none;
  }

  .format-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
    min-width: 120px;
  }

  .quality-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--card-background-color);
    border: 2px solid var(--tag-background);
    outline: none;
    appearance: none;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .quality-slider::-webkit-slider-thumb {
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--tag-background);
    cursor: pointer;
    border: 2px solid var(--secondary-background);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
  }

  .quality-slider::-webkit-slider-thumb:hover {
    background: var(--accent-color);
    transform: scale(1.1);
  }

  .quality-slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--secondary-text);
    cursor: pointer;
    border: 1px solid var(--secondary-text);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .quality-display {
    color: var(--secondary-text);
    font-size: 1em;
  }

  .resize-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--background);
  }

  .resize-x {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.2em;
  }

  .maintain-ratio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
  }

  .maintain-ratio input[type="checkbox"] {
    accent-color: var(--accent-color);
  }

  /* Keyframes */
  @keyframes drag-shimmer {
    0% {
      left: -100%;
    }

    100% {
      left: 100%;
    }
  }

  @keyframes progress-shimmer {
    0% {
      left: -100%;
    }

    100% {
      left: 100%;
    }
  }

  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes progress-pulse {
    0% {
      width: 0%;
    }

    50% {
      width: 100%;
    }

    100% {
      width: 0%;
    }
  }

  .script-section {
    margin: 30px 0;
  }

  .warning-container {
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.3);
    border-radius: 5px;
    padding: 15px;
    margin: 20px 0;
  }

  .warning-label {
    color: rgba(255, 59, 48, 1);
    font-weight: bold;
    font-size: 0.9em;
    margin-bottom: 8px;
  }
}

@media screen and (min-width: 768px) {

  .main {
    margin: 0 10%;
  }

  .hide-on-mobile {
    display: block;
  }

  .space-fullpage {
    margin: 600px 0;
  }

  .top-info-section {

    .header-box {
      display: grid;
      grid-template-columns: 3fr 2fr 1fr;

      .header {

        .h1 {
          margin: 0 0 20px 0;
        }
      }
    }

    .top-row {
      display: grid;
      grid-template-columns: 1fr 2fr;
    }

    .containers-wrapper {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: stretch;
    }

    .row-1 {
      display: flex;
      padding: 20px 0;

      .column {
        margin: 0 40px 0 0;
      }
    }
  }

  .tech-stack-section {
    overflow-y: scroll;
    max-height: 800px;
    scrollbar-width: thin;
    scrollbar-color: var(--divider-color) var(--background);

    .technologies {
      -ms-overflow-style: none;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .medium-card-box {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      overflow-y: scroll;
      max-height: 550px;
      scrollbar-width: none;

      img {
        width: 50px;
        height: auto;
        border-radius: 2px;
      }

      .medium-card {
        display: flex;
        flex-direction: column;
        box-shadow: 0 0 2px var(--secondary-text);
        padding: 10px;
        margin: 0 0 10px 0;

        .row {
          display: grid;
          grid-template-columns: 1fr;
          align-items: center;
        }

        .column {
          margin: 10px 0;
        }
      }
    }
  }

  .project-section {

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      break-inside: avoid;
      gap: 15px;
    }
  }

  .skills-section {
    padding: 10px 0;
    display: block;

    .h2 {
      margin: 20px 0 13px 0;
    }

    .row-2 {
      display: grid;
      grid-template-columns: 2fr 3fr;
    }

    .language-box {
      margin: 0 0 50px 0;
      padding: 0px;

      li {
        display: flex;
        flex-direction: column;
        padding: 0;
      }

      h3 {
        margin: 0 0 20px 0;

        &::after {
          content: '';
          display: block;
          border-bottom: 2px dotted var(--secondary-text);
          margin: -6px 5px 0 70px;
        }
      }
    }

    .small-card-box {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      break-inside: avoid;
      gap: 20px;
      max-width: 500px;
    }
  }

  .footer {
    padding: 30px 0px 40px 20px;
    display: grid;
    grid-template-columns: 1fr 7fr 2fr;

  }

  /*
___________________________________________________________________________________________________________________________


Individual project page

**Strats here** 

*/
  .about-project {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 20px;
    margin: 0 0 20px 0;
  }


  .two-columns {
    column-count: 2;
    margin: 0 0 20px 0;
  }

  .group {
    display: flex;
    flex-direction: column;
    margin: 0 0 20px 0;
  }

  .short-info {
    display: grid;
    grid-template-columns: auto auto auto auto;
    padding: 10px 0;
  }

  .content {
    display: grid;
    grid-template-columns: 1fr 3fr;

    .contents {

      .big-card-header {
        margin: 0 0 10px 0;
      }
    }
  }

  ol {
    margin: 10px 0;

    li {
      display: block;
      line-height: 1.6;
      text-decoration-color: var(--secondary-text);
    }
  }

  .close-button {
    font-size: 25px;
  }

  .sidebar-container {
    display: grid;
    grid-template-columns: 2fr 5fr;
    gap: 20px;
    padding: 20px 50px 0 10px;
  }

  .hide-on-desktop {
    display: none;
  }

  .article {
    margin: 30px 0;
    padding: 20px 30px;

    img {
      display: block;
      max-width: 800px;
      height: auto;
      margin: 10px 0 20px 0;
    }

    table {
      width: 80%;
    }
  }

  .column {

    .container {
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 2px var(--border-color);
      width: 95%;
      height: 85%;
      min-height: 280px;
      padding: 10px;

      img {
        width: 100%;
        height: auto;
        border-radius: 2px;
        margin: 0 0 10px 0;
      }

    }
  }

  /* Content styling */
  .entry-content {
    font-size: 1em;
    color: var(--primary-text);
    line-height: 1.8;
    margin: 0 10%;
  }

  /* Radar Chart Tablet Styles */
  #radar-chart {
    max-width: 100%;
    min-width: 350px;
  }

  #radar-chart svg {
    min-width: 300px;
    min-height: 300px;
    max-width: 350px;
    max-height: 350px;
  }

  .radar-label {
    font-size: 14px !important;
  }

  /* QR Code Generator Tablet Styles */
  .qr-controls {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
  }

  .qr-button {
    min-width: 150px;
    font-size: 13px;
    padding: 14px 18px;
  }

  .qr-placeholder {
    max-width: 350px;
    padding: 50px 20px;
  }

  .placeholder-icon {
    font-size: 48px;
    margin-bottom: 12px;
  }

  .qr-display-section {
    min-height: 370px;
  }

  .qr-code-container {
    padding: 25px;
  }

  /* Security Features Tablet Styles */
  .security-status {
    padding: 10px 15px;
    margin-bottom: 12px;
  }

  .security-indicator {
    gap: 15px;
  }

  .security-icon {
    font-size: 18px;
  }

  .input-info {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }

  .rate-limit-info {
    margin-top: 0;
    gap: 10px;
  }

  .security-info {
    padding: 10px;

    .h3 {
      font-size: 12px;
    }
  }

  /* Image Converter - Tablet */
  .converter-section {
    margin: 30px 0;
  }

  .upload-area {
    padding: 40px;
  }

  .upload-icon {
    font-size: 3em;
  }

  .controls-section {
    padding: 25px;
    margin: 30px 0;
  }

  .controls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin: 20px 0;
  }

  .action-buttons {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
  }

  .preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
  }

  /* Sticky Header - Tablet */
  .sticky-content {
    flex-direction: row;
    gap: 16px;
  }

  .files-summary {
    text-align: left;
  }

  .sticky-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}

@media screen and (min-width: 1024px) {

  .main {
    margin: 0 15%;
  }

  main {
    padding: 0 20px;
  }

  code {
    font-size: 14px;
  }

  .big-card-header {
    font-size: 32px;
  }

  .medium-card-header {
    font-size: 18px;
  }

  .paragraph {
    font-size: 14px;
  }

  .paragraph-caps {
    font-size: 13px;
  }

  .h1 {
    font-size: 14px;
  }

  .h2 {
    font-size: 14px;
  }

  .h2-lower {
    font-size: 14px;
  }

  .h2-toc {
    font-size: 14px;
  }

  .h3 {
    font-size: 12px;
  }

  .markdown-h1 {
    font-size: 42px;
    font-weight: 800;
  }

  .markdown-h2 {
    font-size: 38px;
    font-weight: 800;
  }

  .markdown-h3 {
    font-size: 28px;
    font-weight: 800;
  }

  .markdown-h4 {
    font-size: 30px;
    font-weight: 700;
  }

  .markdown-h5 {
    font-size: 26px;
    font-weight: 800;
  }

  .markdown-h6 {
    font-size: 22px;
    font-weight: 800;
  }

  .markdown-inline-code {
    font-size: 14px;
  }

  .markdown-table th,
  .markdown-table td {
    font-size: 14px;
  }

  .markdown-li {
    font-size: 16px;
  }

  .markdown-p {
    font-size: 16px;
  }

  /* Markdown tag styling */
  .markdown-tag {
    font-size: 13px;
  }

  .markdown-link-toc {
    font-size: 14px;
  }

  .diary-entry {

    /* Title styling */
    .entry-title {
      font-size: 40px;
      color: var(--primary-text);
    }

    .container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      /* Date styling */
      .entry-date {
        font-size: 14px;
        color: var(--secondary-text);
        margin-bottom: 15px;
      }

      .entry-week {
        font-size: 14px;
        color: var(--secondary-text);
      }
    }

    /* Summary styling */
    .entry-summary {
      font-size: 16px;
      color: var(--secondary-text);
      margin-bottom: 20px;
    }

    /* Content styling */
    .entry-content {
      color: var(--primary-text);
      line-height: 1.8;
      margin: 0;
    }

  }

  /* Styling for individual diary cards */
  .diary-list {
    min-height: 380px;

    .header {
      padding: 15px;

      .h3 {
        font-size: 14px
      }
    }

    .content {
      padding: 0 20px 80px 20px;
      /* Add bottom padding to prevent overlap */

      .medium-card-header {
        margin: 5px 0;
        font-size: 22px;
      }

      .h3 {
        margin: 0 0 30px 0;
        font-size: 12px;
      }

      .paragraph {
        font-size: 14px;
        font-weight: 200;
      }
    }

    .container {
      padding: 8px;


      .read-time {
        font-size: 14px;
      }

      .tags {

        .tag {
          font-size: 12px;
          padding: 5px 10px;
        }
      }
    }
  }

  .h1-caps {
    font-size: 16px;
  }

  .paragraph-link {
    font-size: 14px;
  }

  .sidebar-container {

    .h2 {
      font-size: 15px;
      font-weight: 400;
    }

    .h2-toc {
      font-size: 15px;
    }
  }

  .class {

    .h2-toc {
      font-size: 16px;
    }
  }

  .top-info-section {

    .column {
      width: 100%;
    }

    .containers-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      align-items: stretch;
    }
  }

  .tech-stack-section {

    .technologies {
      display: grid;
      grid-template-columns: auto auto;
      padding: 0 0 0 2px;

      .container {
        margin: 0 20px 0 0;
      }
    }

    .medium-card-box {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));


      .medium-card {
        padding: 20px;

      }
    }

    .column {

      .paragraph {
        font-size: 18px;
        text-transform: uppercase;
      }
    }
  }

  .skills-section {
    width: 100%;

    .column {
      margin: 0 80px 0 0;
    }
  }

  .footer {
    padding: 30px 0px 40px 30px;
    grid-template-columns: 1fr 9fr 2fr;

    .version-button {
      font-size: 14px;

      p {
        font-size: 14px;
      }
    }

    .social-bar {

      img {
        width: 40px;
      }
    }
  }

  /*
___________________________________________________________________________________________________________________________


Individual project page

**Strats here** 

*/
  .about-project {
    grid-template-columns: 2fr 4fr;
  }

  .content {
    grid-template-columns: 2fr 4fr;
  }

  .close-button {
    font-size: 30px;
    top: 5px;
    right: 40px;
  }

  .article {
    margin: 50px 0;
    padding: 0 20%;

    .h2 {

      .h2-toc {
        font-size: 14px;
        text-decoration: underline;
      }
    }

    pre {

      code {
        font-size: 14px;
      }
    }
  }

  .column {

    .container {
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 2px var(--border-color);
      width: 95%;
      min-height: 280px;
      padding: 20px;

      a {
        margin: 0 0 10px 0;

        img {
          width: 250px;
          border-radius: 2px;
          margin: 10px auto 50px auto;
          /* Centers the image horizontally */
          display: block;
        }
      }
    }
  }

  .tags {

    .tag {
      color: var(--tag-color);
      font-size: 11px;
      border-radius: 5px;
      border: var(--tag-background) 1px solid;
      padding: 2px 8px;
      background-color: var(--tag-background);

    }

  }


  /* Content styling */
  .entry-content {
    margin: 0 20%;
  }

  .tag-buttons {
    max-height: 95px;

    .tag-button {
      font-size: 12px;
    }
  }

  .container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* QR Code Generator Desktop Styles */
  .qr-display-section {
    min-height: 400px;
  }

  .qr-code-container {
    padding: 30px;
  }

  .placeholder-icon {
    font-size: 64px;
    margin-bottom: 15px;
  }

  .qr-button {
    font-size: 14px;
    padding: 15px 20px;
  }

  /* Security Features Desktop Styles */
  .security-status {
    padding: 12px 18px;
    margin-bottom: 15px;
  }

  .security-indicator {
    gap: 20px;
  }

  .security-icon {
    font-size: 20px;
  }

  .security-info {
    padding: 12px;

    .h3 {
      font-size: 14px;
    }
  }

  /* Image Converter - Desktop */
  .upload-icon {
    font-size: 3.5em;
  }

  .controls-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
  }

  .action-buttons {
    gap: 20px;
  }

  .btn-primary,
  .btn-secondary {
    font-size: 0.9em;
    padding: 10px 20px;
  }

  /* Progress Bar - Desktop */
  .progress-section {
    padding: 18px;
    
    .progress-container {
      gap: 15px;
    }
    
    .progress-header {
      h3 {
        font-size: 18px;
      }
      
      .progress-stats {
        font-size: 13px;
        gap: 20px;
      }
    }
    
    .progress-bar {
      height: 10px;
      
      .progress-fill {
        border-radius: 5px;
      }
    }
    
    .progress-percentage {
      font-size: 13px;
      min-width: 40px;
    }
  }

}

@media screen and (min-width: 1440px) {

  .main {
    margin: 0 20%;
  }

  .top-info-section {

    .about {
      width: 60%;
    }
  }

  .tech-stack-section {

    .medium-card-box {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .column {

      .paragraph {
        font-size: 18px;
        text-transform: uppercase;
      }
    }
  }

  .skills-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;

    .column {
      margin: 0 40px 0 0;
    }
  }

  .footer {
    padding: 30px 0px 40px 50px;
    grid-template-columns: 1fr 11fr 2fr;
  }

  .article {
    margin: 50px 0;
    padding: 0 25%;
  }


  /* Content styling */
  .entry-content {
    margin: 0 25%;
  }

  .container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* Radar Chart Desktop Styles */
  #radar-chart {
    min-width: 400px;
    max-width: 500px;
  }

  #radar-chart svg {
    min-width: 350px;
    min-height: 350px;
    max-width: 400px;
    max-height: 400px;
  }

  /* QR Code Generator Large Desktop Styles */
  .qr-generator-container {
    margin: 40px 0;
  }

  .qr-input-section {
    margin-bottom: 40px;
  }

  .qr-display-section {
    min-height: 450px;
    margin: 40px 0;
  }

  .qr-code-container {
    padding: 40px;
  }

  .qr-placeholder {
    max-width: 450px;
    padding: 80px 30px;
  }

  .placeholder-icon {
    font-size: 72px;
    margin-bottom: 20px;
  }

  /* Security Features Large Desktop Styles */
  .security-status {
    padding: 15px 25px;
    margin-bottom: 18px;
  }

  .security-info {
    padding: 15px;

    .h3 {
      font-size: 16px;
    }
  }

  .terminal-body {
    padding: 16px;
    height: 100%;
  }

  .terminal-line {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .terminal-prompt {
    margin-right: 8px;
  }

  .terminal-ascii {
    font-size: 11px;
    line-height: 1.2;
  }

}