.cardcontainer {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 4px; /* Adjust spacing between cards */
        width: 100%; /* Make the container full width */
        padding: .5em;
        box-sizing: border-box;
      }
      
      .combo {
        display: inline-block;
        position: relative;
        background-color: white;
        border-radius: 10px;
        overflow: hidden;
        text-align: center;
      }
      
      .thumbnails {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: .25em 1em 0 1em;
        border-bottom: 1px solid #d6d0c9;
      }
      
      .thumbnails .name {
        display: none;
      }
      
      .thumbnails img {
        width: 10%;
        aspect-ratio: 190 / 265;
        border: 1px solid black;
        border-radius: 2px;
        display: inline-block;
        cursor: pointer;
        vertical-align: top;
      }
      
      .plus {
        display: inline-block;
        font-weight: 700;
        font-size: 1.2rem;
        padding: 0 2px;
      }

      .card {
        position: relative;
        width: 100%;
        padding: 0 1px;
        box-sizing: border-box;
      }
      
      .card.grid-active::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: white;
          z-index: 1;
          box-sizing: border-box;
        }
        
        .card.grid-active .thumb-nav {
          display: none;
        }

        .card .thumb-nav {
          position: absolute;
          bottom: 0;
          background: rgba(0,0,0,0.6);
          color: white;
          border: none;
          font-size: 1.5rem;
          cursor: pointer;
          padding: 4px 0;
          z-index: 4;
          user-select: none;
        }
        
        .card .thumb-nav:hover {
          color: #ff6638;
        }
        
        .card .thumb-nav:active {
          background: #ff6638;
          color:black;
        }
        
        .card .thumb-prev {
          left: 0;
          width: 50%;
        }
        
        .card .thumb-next {
          right: 0;
          width: 50%;
        }
      
      .card .name {
        display: block;
        font-weight: 700;
        font-size: .8em;
        overflow: hidden; /* Hide overflow text */
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: .25em 1em;
        background: white;
      }
      
      .card img {
        display: block;
        width: 100%;
        border: none;
        border-radius: .5em;
        cursor: zoom-in;
      }

      .card[rarity]:before {
        position: absolute;
        top: 15%;
        left: 0;
        border-right: 2px solid white;
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        padding: 3px 4px 3px 2px;
        font-size: .9em;
        font-weight: 700;
      }
      .card[rarity="R1"]:before {content: "R1";background-color:#ff0096;color:white;}
      .card[rarity="R2"]:before {content: "R2";background-color:#ff0096;color:white;}
      .card[rarity="R3"]:before {content: "R3";background-color:#ff0096;color:white;}
      .card[rarity="R4"]:before {content: "R4";background-color:#ff0096;color:white;}
      .card[rarity="U1"]:before {content: "U1";background-color:#ff6638;color:white;}
      .card[rarity="U2"]:before {content: "U2";background-color:#ff6638;color:white;}
      .card[rarity="U3"]:before {content: "U3";background-color:#ff6638;color:white;}
      .card[rarity="U4"]:before {content: "U4";background-color:#ff6638;color:white;}
      .card[rarity="C1"]:before {content: "C1";background-color:#bc6d52;color:white;}
      .card[rarity="C2"]:before {content: "C2";background-color:#bc6d52;color:white;}
      .card[rarity="C3"]:before {content: "C3";background-color:#bc6d52;color:white;}
      .card[rarity="C4"]:before {content: "C4";background-color:#bc6d52;color:white;}
      .card[rarity="SP"]:before {content: "SP";background-color:#515968;color:white;}
      .card[rarity="PR"]:before {content: "PR";background-color:#8e7870;color:white;}
      
      .grid-view-btn {
          position: absolute;
          top: 10px;
          right: 1px;
          background: rgba(0,0,0,0.6);
          color: #d6d0c9;
          border: 1px solid #d6d0c9;
          border-radius: 6px;
          cursor: pointer;
          padding: 2px 4px;
          font-size: 1.5rem;
          aspect-ratio: 1 / 1;
          box-sizing: border-box;
          z-index: 3;
          user-select: none;
        }
        
        .grid-view-btn:hover {
          color: white;
          border: 1px solid white;
        }
        
        .grid-view-btn.active {
          color: #ff6638;
          font-weight: 700;
          border: 2px solid white;
          background: black;
          padding: 2px 4px;
          top: 9px;
          right: 0;
        }
        
        .grid-view {
          display: none;
          position: absolute;
          top: 50%;
          left: 0;
          width: 100%;
          max-height: 100%;
          transform: translate(0, -50%);
          padding: 2px;
          box-sizing: border-box;
          gap: 1px;
          grid-auto-rows: auto;
          cursor: pointer;
          z-index: 2;
        }
        
        .grid-view img {
          border-radius: 0.25em;
          width: 100%;
          height: auto;
          object-fit: contain;
          cursor: zoom-in;
        }
        
        .grid-view.active {
          display: grid;
          place-items: center;
        }
      
      #popup-overlay {
        display: none;
        position: fixed;
        top:0;
        left:0;
        width:100vw;
        height:100vh;
        background: rgba(0,0,0,0.5);
        z-index: 9;
      }
      
      .popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        background: #d6d0c9;;
        border: 3px solid white;
        border-radius: 1.2rem;
        font-size: 1.5rem;
        z-index: 10;
      }
    
      .popup-content {
          line-height: 0; /* collapse baseline gaps */
        }
        
        .popup-content * {
          line-height: normal; /* restore normal line-height for all children */
        }
      
      .popup-content .combo {
        background-color: transparent;
        border-radius: 0;
      }
      
      .popup-content .combo:after {
          position: absolute;
          content: 'C A R D S';
          color: #d6d0c9;
          font-size: 11px;
          bottom: 11px;
          z-index: 4;
          transform: translateX(-50%);
        }
      
      .popup-content .thumbnails {
          display: flex;
          background: transparent;
          flex-wrap: nowrap;
          padding: 0 6rem;
          max-width: 100%;
          overflow-x: auto;
          overflow-y: hidden;
          border-bottom: 0;
      }
      
      .popup-content .plus {
        font-size: 1.5rem;
      }
      
      .popup-content .card {
        padding: 0;
        padding-top: 2px;
      }
      
      .popup-content .card[rarity]:before {
        border-right: 3px solid white;
        top: 10%;
      }
      
      .popup-content .name {
        display: none;
      }
      
      .popup-content .card img {
        display: block;
        cursor: default;
      }
      
      .popup-content .card .thumb-nav {
          font-weight: 700;
          font-size: 2rem;
        }
      
      .popup-content .grid-view {
        gap: 2px;
        z-index: 6;
      }
      
      .popup-content .grid-view-btn {
          top: 30px;
          right: 7px;
          font-size: 35px;
          border: 2px solid #d6d0c9;
          padding: 2px 6px;
          z-index: 7;
      }
      
      .popup-content .grid-view-btn:hover {
          border: 2px solid white;
      }
      
      .popup-content .grid-view-btn.active {
          top: 29px;
          right: 6px;
          color: #ff6638;
          font-weight: 700;
          border: 3px solid white;
          background: black;
          padding: 2px 6px;
        }
        
      .popup-content .grid-view img {
        border-radius: .25em;
        cursor: pointer;
      }
      
      .popup-content .card.grid-active::after {
          z-index: 5;
        }

      .close {
        display: inline-flex;
        position: absolute;
        align-items: center;
        justify-content: center;
        top: 5px;
        right: 4px;
        font-size: 2rem;
        font-weight: 700;
        background-color: #14171c;
        color: white;
        border: 2px solid white;
        border-radius: 50%;
        aspect-ratio: 1 / 1;
        height: 33px;
        cursor: pointer;
        z-index: 8;
        user-select: none;
      }
      
      .close:hover {
        color: #ff6638;
        border: 2px solid #ff6638;
        background: black;
      }
      
      .popup-nav {
        display: flex;
        justify-content: center;
        position: relative;
        border-bottom-left-radius: 1.2rem;
        border-bottom-right-radius: 1.2rem;
      }
      
      .popup-nav button {
        min-width: 0;
        cursor: pointer;
        flex-grow: 1;
        background: linear-gradient(to right, #14171c, #570070, #14171c);
        color: #ff6638;
        font-size: 2rem;
        font-weight: 700;
        border: none;
        padding: 4px 0;
      }
      
      .popup-nav button:hover {
          color:white;
      }
      
      .popup-nav button:active {
          background: #ff6638;
          color:black;
      }
      
      .popup-nav button:after {
          position: absolute;
          content: 'C O M B O S';
          color: #d6d0c9;
          font-size: 11px;
          top: 50%;
          left: 50%;
          max-width: 20%;
          text-align: center;
          transform: translate(-50%, -50%);
          z-index: 4;
          font-weight: 400;
          font-family: 'Noto Serif';
        }
      
      .popup-nav .prev {
         border-bottom-left-radius: 1rem;
      }
      .popup-nav .next {
         border-bottom-right-radius: 1rem;
      }

      h1 {
        font-size: 1.2rem; /* Font size for paragraph text */
        font-weight: 400;
        text-transform: uppercase;
      }

      h1.spacebottom0 {
        padding-bottom: 0;
        margin-bottom: 0;      
      }

      h1.center {
        font-size: 1.4rem; /* Font size for paragraph text */
        font-weight: 400;
        text-align: center;
      }

      h2 {
        font-size: 1.2rem;
      }   

      h2.spacebottom0 {
        margin-bottom: 0;
        padding-bottom: 0;
      }

      h3 {
        font-size: 1rem;
        margin auto 0;
      }

      /* Style for the content inside the panels */
      p {
        font-size: 1rem;
        text-align: justify;
        text-indent: 1em;
        text-justify: inter-word;
      }

      p.caption {
        font-style: italic;
        text-indent: 0;
      }

      p.center {
        text-align: center;
        text-indent: 0;
      }

      p.noindent {
        text-indent: 0;
      }

      p.magenta {
        color: #ff0096;
        font-style: italic;
        font-weight: 600;
        margin: 0 auto;
        margin-bottom: 1em;
        padding-top: 0;
        text-align: center;
        width: 80%;
      }

      .uppercase {
        text-transform: uppercase;
      }

      .normalcase {
        text-transform: none;
      }

      .hlgreen {
        color: inherit;
        background-color: #c7ffe1;
      }

      .noHighlight {
        background-color: transparent !important; /* Adjust if other properties need removal */
      }

      .hlpurple {
        background-color: #5b2381;
        color: white;
        display: inline-block;
        font-family: 'Noto Sans';
        font-weight: 700;
      }

      .colorblue {
        color: #0036cf;
      }

      .colorgreendark {
        color: #00524a;
      }

      .colorgreenlight {
        color: #73c59e;
      }

      .colororange {
        color: #ff6638;
      }

      .colormagenta {
        color: #ff0096;
      }

      .colorbrown {
        color: #bc6d52;
      }

      .colorpurple {
        color: #5b2381;
        font-weight: 700;
      }

      /* Large desktops (up to 1920px) */
      @media (max-width: 1920px) {
        .cardcontainer {grid-template-columns: repeat(9, 1fr);}
      }

      /* Desktops and laptops (up to 1440px) */
      @media (max-width: 1440px) {
        .cardcontainer {grid-template-columns: repeat(7, 1fr);}
      }

      /* Tablets (up to 992px) */
      @media (max-width: 992px) {
        .cardcontainer {grid-template-columns: repeat(5, 1fr);}
      }

      @media screen and (max-width: 768px) {
        .cardcontainer {grid-template-columns: repeat(3, 1fr);}        
      }

      @media screen and (max-width: 600px) {
        .popup {max-width: 90%;}

        .cardcontainer {grid-template-columns: repeat(2, 1fr);}
      }