@font-face {                  
font-family: 'Pixelify Sans';
src: url(graphics/PixelifySans-Regular.woff2) format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face {                  
font-family: 'Pixelify Sans';
src: url(graphics/PixelifySans-Bold.woff2) format('woff2');
font-weight: bold;
font-style: normal;
}
@font-face {                  
font-family: 'Bytesized';
src: url(graphics/Bytesized-Regular.woff2) format('woff2');
font-weight: normal;
font-style: normal;
}
/* var colors */
        :root{
          --background: #0d0d0d;
          --top-background: #1a1a1a;
          --border: #2a2a2a;
          --accent: #ffaaff;
          --accent-faded: #d0b0d6;
          --text-faded: #888;
          --text-hover: #e5e5e5;
          }
        @media (prefers-color-scheme: light) {
        :root {
          --background: #fafafa;
          --top-background: #ffffff;
          --border: #e8e8e8;
          --accent: #c026d3;
          --accent-faded: #a882b0;
          --text-faded: #6b6b6b;
          --text-hover: #1a1a1a;
          }
        }
/* basic resets */
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          scrollbar-width: thin;
          scrollbar-color: var(--border) var(--background);
          }

        body {
          font-family: "Pixelify Sans", sans-serif;
          background-color: var(--background);
          /*color: var(--accent-faded);*/
          display: flex;
          min-height: 100vh;
          /*margin: 0;*/
          }
        .about img[src*="stamps"] {
          image-rendering: pixelated;
          cursor: pointer;
          }

/* left navbar */
        .sidebar {
          width: 180px;
          background-color: var(--top-background);
          padding: 16px 16px;
          position: sticky;
          top: 0;
          height: 100vh;
          border-right: 1px solid var(--border);
          overflow-y: auto;
          flex-shrink: 0;
          z-index: 10;
          }
        .sidebar h2 {
          font-family: "Bytesized", sans-serif;
          font-size: 18px;
          color: var(--accent);
          margin-bottom: 16px;
          border-bottom: 1px solid var(--border);
          padding-bottom: 16px;
          pointer-events: none;
          }
        .sidebar .nav-category {
          margin-bottom: 16px;
          }
        .sidebar .nav-category .cat-title {
          font-family: "Bytesized", sans-serif;
          font-weight: bold;
          color: var(--accent-faded);
          font-size: 14px;
          margin-bottom: 4px;
          }
        .sidebar .nav-category a {
          display: block;
          color: var(--accent-faded);
          text-decoration: none;
          padding: 4px 0 4px 12px;
          font-size: 13px;
          transition: 0.25s ease;
          }
        .sidebar .nav-category a:hover {
          color: var(--accent);
          padding-left: 14px;
          letter-spacing: 0.5px;
          }
        .sidebar .nav-category a.active {
          color: var(--text-faded);
          font-weight: bold;
          pointer-events: none;
          }
        
        
        /* main */
        .main {
          flex: 1;
          padding: 28px 40px;
          }

        /* about */
        .about {
          margin-bottom: 28px;
          border-bottom: 1px solid var(--border);
          padding-bottom: 28px;
          }
        .about.borderless {
          margin-bottom: 0;
          border-bottom: none;
          padding-bottom: 0;
          }
        .about h1 {
          font-family: "Bytesized", sans-serif;
          font-size: 28px;
          color: var(--accent);
          margin-bottom: 12px;
          letter-spacing: -0.5px;
          }
        .about h4 {
          font-family: "Bytesized", sans-serif;
          font-size: 18px;
          color: var(--text-faded);
          margin: 12px 0;
          letter-spacing: -0.5px;
          }
        .about p {
          font-size: 15px;
          line-height: 1.7;
          color: var(--text-faded);
          max-width: 600px;
          transition: 0.25s ease;
          }
        .about p:hover {
          color: var(--text-hover);
          }
        .about a {
          color: var(--accent-faded);
          text-decoration: none;
          transition: 0.25s ease;
          }
        .about a:hover {
          color: var(--accent);
          text-decoration: underline;
        }

/* shitpost grid */
        .shitpost-grid {
          column-width: 180px;
          -webkit-column-count: 7;
          -moz-column-count: 7;
          column-count: 7;
          column-gap: 16px;
          }
        .shitpost-grid .item {
          display: block;
          width: 100%;
          margin-bottom: 16px;
          background-color: var(--top-background);
          break-inside: avoid;
          -webkit-column-break-inside: avoid;
          border-radius: 6px;
          border: 1px solid var(--border);
          transition: 0.5s ease;
          }
        .shitpost-grid .item:hover {
          background-color: var(--border);
          }
        .shitpost-grid .item img {
          cursor: pointer;
          display: block;
          width: 100%;
          height: auto;
          border-radius: 5px;
          }
        .shitpost-grid .item .caption {
          font-size: 12px;
          color: var(--text-faded);
          margin: 5px;
          text-align: left;
          word-wrap: break-word;
          overflow-wrap: break-word;
          transition: 0.5s ease;
          }
        .shitpost-grid .item .caption a {
          color: var(--accent-faded);
          text-decoration: none;
          border-radius: 2px;
          transition: color 0.25s ease-out, text-decoration 0.25s ease-out;
          }
        
        .shitpost-grid .item .caption:hover {
          color: var(--text-hover);
          }
        .shitpost-grid .item .caption a:hover {
          color: var(--accent);
          text-decoration: underline;
          }

/* big picture dark bg */
        .modal-overlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          background-color: rgba(0, 0, 0, 0.85);
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 9999;
          cursor: pointer;
          animation: fadeIn 0.5s ease;
          }
        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        .modal-overlay img {
          max-width: 90vw;
          max-height: 90vh;
          object-fit: contain;
          border-radius: 8px;
          }

/* phone screens (700px) call */
        @media (max-width: 700px) {
          body {
            flex-direction: column;
            }
          .sidebar {
            position: relative;
            width: 100%;
            height: auto;
            border-right: none;
            border-bottom: 1px solid var(--border);
            padding: 16px;
            }
          .main {
            padding: 20px;
            }
          .shitpost-grid {
            column-count: 2;
            column-width: auto;
            }
          .sidebar h2 {
            cursor: pointer;
            margin-bottom: 0;
            border-bottom: none;
            padding-bottom: 0;
            user-select: none;
            pointer-events: auto;
            }
          .sidebar h2::before {
            content: "+ ";
            }
            .sidebar.open h2::before {
            content: "− ";
            }
          .sidebar .nav-category {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.25s ease, margin-top 0.25s ease;
            margin-top: 0;
            margin-bottom: 0;
            }
          .sidebar.open .nav-category {
            max-height: 200px;
            margin-top: 16px;
            }
          .about {
          margin-bottom: 20px;
          padding-bottom: 20px;
          }
        }