:root {
            --header-image: url('https://zalno.neocities.org/images/banners/zalno_overlooking_the_city_banner.jpg');
            --body-bg-image: url('https://zalno.neocities.org/images/backgrounds/orangegrid.png');
            --content-color: #43256E;
        }

        body {
            font-family: 'Nunito', sans-serif;
            margin: 0;
            background-color: #08031A;
            background-image: var(--body-bg-image);
            background-size: 200px;
            background-repeat: repeat;
            color: #fceaff;
            cursor: url("http://www.rw-designer.com/cursor-extern.php?id=15510"), auto;
            animation: diagonalScroll 20s linear infinite; /* Animation for diagonal scrolling */
        }
        
        .box {
            background-color: #170003;
            border: 1px solid #f07f00;
            padding: 10px;
            border-radius: 20px; /* Adjust px for more/less roundness */
            margin-bottom: 20px; /* ⬅️ this keeps them from merging */
            overflow: visible;
        }
        
        .box-main {
            
            background-color: #170003;
            border: 1px solid #f07f00;
            max-width: 950px;
            width: 100%;
            height: 100px;
            padding: 10px;
            text-align: center;
            border-radius: 20px; /* Adjust px for more/less roundness */
            
        }
        
        .box-player{
          
            background-color: #170003;
            border: 1px solid #f07f00;
            max-width: 950px;
            width: 100%;
            height: 150px;
            padding: 10px;
            text-align: center;
          
        }
        
        #container {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 950px;
            width: 100%;
            margin: 0 auto;
        }
        
        /* Dropdown menu styling */
        .dropdown {
            display: none;
            position: absolute;
            background-color: #370003;
            min-width: 100px;
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .dropdown a {
            display: block;
            padding: 12px 16px;
            color: #f07f00;
            text-decoration: none;
        }

        .dropdown a:hover {
            background-color: #570003;
            color: #fff;
        }
        
        #filter-container {
          margin-bottom: 20px;
          text-align: center;
        }
        
        flex-container {
          background-color: #170003;
            flex: 1;
            margin: 10;
            padding: 20px;
            order: 2;
        }

        .photo-gallery {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          justify-content: center;
        }


        .photo-gallery img {
          width: 150px;
          height: 150px;
          object-fit: cover;
        }


        #gallery { 
          background-color: #720007; 
          width: 556px; 
          margin-left: 10px; 
          height: 500px; 
          }
        
        .gallery-item { 
          width: 100px; /* Adjust thumbnail container size */ 
          text-align: center; 
          margin: 10px; 
          background-color: #170003; 
          border: 1px solid #f07f00; 
          padding: 10px; 
          display: inline-block; }

        

        /* Lightbox background */
        #lightbox {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.85);
          display: none;
          justify-content: center;
          align-items: center;
          z-index: 9999;
        }

        /* Image inside lightbox */
        #lightbox img {
          max-width: 85%;
          max-height: 550px;
          border: 2px solid #f07f00;
          border-radius: 10px;
          transform: scale(0.8);
          opacity: 0;
          transition: transform 0.25s ease, opacity 0.25s ease;
        }

        /* Active state (animation trigger) */
        #lightbox.active img {
        transform: scale(1);
        opacity: 1;
        }

        /* Close button */
        #lightbox-close {
          position: absolute;
          top: 20px;
          right: 30px;
          font-size: 40px;
          color: #fff;
          cursor: pointer;
        }
        
        /* Arrows */
        .lightbox-arrow {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          font-size: 50px;
          color: white;
          cursor: pointer;
          user-select: none;
          padding: 10px;
        }

        #lightbox-prev { left: 20px; }
        #lightbox-next { right: 20px; }

        /* Hover effect */
        .lightbox-arrow:hover {
        color: #f07f00;
        }
        
        .lightbox-content {
          position: relative;
          text-align: center;
        }
        
        /* Caption */
        #lightbox-caption {
          margin-top: 10px;
          color: #fff;
          font-size: 14px;
        }
        
        /* Counter (top-right corner) */
        #lightbox-counter {
          position: fixed;
          bottom: 90px; /* sits above thumbnail bar */
          left: 50%;
          transform: translateX(-50%);

          color: #fff;
          font-size: 14px;

          

          padding: 4px 10px;
          z-index: 10001;
          
        }
        
        #lightbox-thumbs {
          position: fixed;
          bottom: 10px;
          left: 50%;
          transform: translateX(-50%);

          display: flex;
          gap: 6px;

          max-width: 90vw;
          overflow-x: auto;
          overflow-y: hidden;

          padding: 8px 12px;

          background: rgba(0, 0, 0, 0.6);
          border: 1px solid #f07f00;
          border-radius: 10px;

          z-index: 10000;
          white-space: nowrap;
        }

        #lightbox-thumbs img {
          width: 60px;
          height: 60px;
          object-fit: cover;
          border: 2px solid transparent;
          border-radius: 6px;
          cursor: pointer;
          opacity: 0.6;
          transition: 0.2s ease;
        }

        #lightbox-thumbs img:hover {
          opacity: 1;
          transform: scale(1.05);
        }

        #lightbox-thumbs img.active-thumb {
          border-color: #f07f00;
          opacity: 1;
        }
        
        #lightbox-content {
          position: relative;
        }
        
        #lightbox-thumbs::-webkit-scrollbar {
          height: 6px;
        }

        #lightbox-thumbs::-webkit-scrollbar-thumb {
          background: #f07f00;
          border-radius: 10px;
        }
        
        #lightbox-img {
          cursor: zoom-in;
          will-change: transform;
          transform-origin: center center;
          backface-visibility: hidden;
        }

        #lightbox-img.zoomed {
          cursor: grab;
        }
        
        #lightbox.idle-ui .lightbox-arrow,
        #lightbox.idle-ui #lightbox-counter,
        #lightbox.idle-ui #lightbox-caption,
        #lightbox.idle-ui #lightbox-thumbs,
        #lightbox.idle-ui #lightbox-close {
          opacity: 0;
          transition: opacity 0.3s ease;
          pointer-events: none;
        }

        .gallery-item img { 
          width: 100px; 
          height: auto; 
          border: 1px solid #f07f00; 
          transition: 
          transform 0.2s ease; /* Smooth hover effect */ 
          }
        
        .gallery-item img:hover {
          transform: scale(1.05); /* Slight zoom on hover */
        }

        .gallery-item a {
          text-decoration: none;
        }
        
        header {
            
            background-color: #370003;
            background-image: url('https://zalno.neocities.org/images/banners/zalno_overlooking_the_city_banner.jpg');
            background-size: cover;
            height: 190px;
            max-width: 950px;
            width: 100%;
        }

        nav li:hover .dropdown {
            display: block;
        }

        @keyframes diagonalScroll {
          0% {
              background-position: 0 0;
          }
          100% {
                 background-position: 1000px 1000px; /* Adjust the values for speed and distance */
          }
        }

        * {
            box-sizing: border-box;
        }

        
        

        a {
            color: #FFA500;
            font-weight: bold;
        }
        
        
        
        



        nav {
            position: fixed;
            top: 0;
            max-width: 950px;
            width: 100%;
            color: #f07f00; /* Orange color */
            font-weight: bold;
            text-decoration: none;
            background-color: #370003;
            padding: 10px 0;

        }

        nav ul {
            display: flex;
            justify-content: space-evenly;
            list-style: none;
            padding: 0;
            margin: 0;
            position: relative;
        }

        nav li {
            position: relative;
        }

        nav li a {
            color: #f07f00;
            font-weight: 800;
            text-decoration: none;
        }

        nav li a:hover {
            color: #a49cba;
            text-decoration: underline;
        }
        
        .profile-column {
          float: left;
          width: 250px;
        }
        
        .party {
          margin-top: 10px;
          margin-left: 0;
          width: 100%;       /* match left column */
          float: none;
          clear: left;        
          text-align: center;
        }
        
        .profile-left { /*for the profile pages*/
          border:1px solid #f07f00;
          margin-right: 10px;
          padding: 10px;
          padding-left: 10px;
          padding-right: 10px;
          float: none;
          width: 100%;
          flex-shrink: 0;
          border-radius: 12px;
          background: #170003;
          text-align: center;
      
      }
      
    .profile-right {
      border: 1px solid #f07f00;
      flex: 1;
      margin-left: 270px;
      max-height: 350px;     /* scrollable area (box height - heading) */
      overflow-y: auto;        /* vertical scroll when full */
      padding: 10px;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 5px;
      text-align: left;
      border-radius: 12px;
      background: #170003;
      }
        
        #spotify-player {
          
          width: 100%;
          margin: 0;
          padding: 0;
          margin-bottom: 0; /* Adjust if the nav has extra space */
        }

        

        #flex {
            display: flex;
        }

        aside {
            background-color: #430003;
            width: 200px;
            padding: 20px;
            font-size: smaller;
            text-align: center;
            border-radius: 20px; /* Adjust px for more/less roundness */

        }

        main {
            background-color: #720007;
            flex: 1;
            margin: 0;
            width: 750px;
            padding: 20px;
            text-align: center;
            order: 2;   
            border-radius: 20px; /* Adjust px for more/less roundness */
            
            
        }
        
        main p {
            text-align: left; 
        }
        
        main p {
          text-align: left;
        }

        footer {
            background-color: #370003;
            padding: 10px;
            text-align: center;
            color: white;
            border-radius: 20px; /* Adjust px for more/less roundness */
        }

        h1, h2, h3, h4 {
            color: #f07f00;
        }

        #youtube-player {
            display: none; /* Hide the video player */
            margin: 0;
            padding: 0;
            max-width: 950px;
            width: 100%;
            margin-bottom: 0; /* Adjust if the nav has extra space */
            border-radius: 20px;
        }
        .custom-controls {
            display: flex;
            flex-direction: column; /* Stack the buttons vertically */
            gap: 10px;
            align-items: flex-end; /* Align controls to the right */
            margin: 0;
            padding: 0;
        }
        button {
            padding: 5px 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            cursor: pointer;
        }
        button:hover {
            background-color: #ddd;
        }

        @media (max-width: 600px) {
            
            
            #flex {
                flex-wrap: wrap;
            }

            aside {
                width: 100%;
            }

            main {
                order: 1;
                
            }
        }


        @media (max-width: 800px) {
            #flex {
                flex-wrap: wrap;
            }

            aside {
                width: 100%;
            }

            main {
                order: 1;
                
            }
        }
        
        .recent-posts {
          background-color: #170003;
          border: 1px solid #f07f00;
          padding: 10px;
          margin-top: 10px;
          width: 100%;          /* was 950px */
          text-align: left;
          border-radius: 20px; /* Adjust px for more/less roundness */
          }

        .recent-posts h2 {
          color: #f07f00;
          font-size: 1.2em;
          margin: 0 0 10px 0;
          padding-bottom: 5px;
          border-bottom: 1px solid #f07f00;
        }

        .recent-posts ul { list-style: none; padding-left: 0; margin: 0; }
        .recent-posts li { padding: 5px 0; border-bottom: 1px solid #43256E; }
        .recent-posts li:last-child { border-bottom: none; }
        .recent-posts a { color: #FFA500; text-decoration: none; font-weight: bold; }
        .recent-posts a:hover { text-decoration: underline; }
        
        .update {
          padding: 5px 10px 16px 10px;
          margin: 10px 5px 15px 0px;
          width: 320px;
          background-color: #170003;
          border: 1px solid #f07f00;
          box-shadow: 3px 3px #FFEDB6, -3px -3px #4AB1E3;
          overflow: auto;
          max-height: 700px; 
        }

        .inner {
          
        }
        
        .center {
          text-align: center; 
        }
        
        .three-column-row {
          display: flex;
          gap: 20px;
          align-items: flex-start;
        }
        
        /* Left column */
          .left-box {
          width: 270px;
        }
        
        /* Middle column */
        .middle-box {
          width: 250px;
          text-align: center;
        }
        
        /* Right column */
        .right-box {
          width: 270px;
        }
        
        .game-scroll {
        max-height: 350px;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-right: 5px;
      }

      .game-scroll img {
        width: 100%;
        border-radius: 8px;
      }
        
        .checklist {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 8px;              /* spacing between items */
          max-height: 350px;     /* scrollable area (box height - heading) */
          overflow-y: auto;      /* adds vertical scrollbar */
          padding-right: 8px;    /* prevents scrollbar overlap */
          text-align: left;      /* align labels nicely */
        }
        
        .checklist ul {
          margin: 0;
          padding: 0;
          list-style: none;   /* no bullets */
        }
        
        .checklist li {
          margin: 2px 0;      /* tighter vertical spacing */
        }
        
        .checklist label {
          cursor: pointer;
          display: flex;
          align-items: center;
          font-size: 14px;
          gap: 6px;
        }
        
        .ribbons-gallery {
          display: flex;
          flex-wrap: wrap;         /* allow items to wrap into rows */
          gap: 8px;                /* spacing between images */
          max-height: 350px;       /* stay inside 450px box (minus header/padding) */
          max-width: 200px;
          overflow-y: auto;        /* vertical scroll when full */
          overflow-x: hidden;      /* no sideways scroll */
          justify-content: space-evenly; /* align items at the center */
          padding: 5px;
          
        }

        .ribbons-gallery img {
          width: 50px;             /* fixed size */
          height: 50px;            /* fixed size */
          object-fit: contain;     /* keeps proportions inside the box */
          border-radius: 6px;      /* rounded corners */
          background: #170003;     /* match your theme */
          border: 1px solid #f07f00; /* optional orange border */
        }
        
        /* Tooltip container */
      .tooltip {
        position: relative;
        display: inline-block;
      }

      /* Hidden tooltip text */
      .tooltip .tooltiptext {
        visibility: hidden;
        width: max-content;
        max-width: 160px;         /* prevent giant tooltips */
        background-color: #170003;
        color: #fff;
        text-align: center;
        padding: 4px 8px;
        border-radius: 6px;
        border: 1px solid #f07f00;

        /* Position tooltip above the image */
        position: absolute;
        z-index: 9999;
        bottom: 110%;             /* move it above the image */
        left: 50%;
        transform: translateX(-50%);

        /* Hide smoothly */
        opacity: 0;
        transition: opacity 0.2s;
        white-space: nowrap;
        pointer-events: none; /* prevents tooltip from blocking hover */
      }

      /* Tooltip arrow */
      .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%; /* arrow points downward */
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #f07f00 transparent transparent transparent;
      }

      /* Show tooltip on hover */
      .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
      }

      .graph-wrapper {
        width: 100%;
        overflow: hidden; /* contain Cytoscape properly */
        position: relative;
      }

      #node-graph {
        width: 100%;
        height: 350px;
        border: 1px solid #f07f00;
        border-radius: 12px;
        background: #170003;
        position: relative;
        z-index: 0;
        overflow: visible;
      }