.searchfilter {
        display: flex;
        justify-content: center;
        position: sticky;
        top: 49px;
        z-index: 3;
        gap: 3px;
        background-color: #d6d0c9;
      }

      #searchinput {
        display: block;
        width: 100%;      
        font-family: inherit;
        font-weight: 1em;
        padding: .5em;
        text-align: center;
        border: 1px solid #14171c;
        box-sizing: border-box;
        flex: 1;
      }
      #clearSearch {
        display: none;
        cursor: pointer;
        font-size: 1.5em;
        font-weight: 700;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0.5em;
        align-items: center;
        color: gray;
      }
      #cardcounter {
        display: flex;
        padding: 0 .75em 0 .5em;
        align-items: center;
        font-size: 1.2em;
        font-weight: 700;
      }

      .filtercontainer {
        position: sticky;
        background: rgba(214, 208, 201, 0.9);
        top: 82px;
        z-index: 3;
      }
      
      .mobile-filter-bar {display: none;}

      .filtercontainer2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 2px 0;
        gap: 2px;
        box-sizing: border-box;
        margin: 0 auto;
        width: 810px;
      }
      
      .filter-dropdown {display: inline-block;}

      .filter-dropbtn {
        background-color: #14171c;
        border: none;
        color: white;
        cursor: pointer;
        font-family: inherit;
        font-size: 1rem;
        font-weight: 600;
        outline: none;
        padding: .5em .75em;
        border-radius: 3px;
        border-top-right-radius: 1em;
      }
      .filter-dropbtn:hover {color: #ff6638;}
      .filter-dropbtn.active {
        background-color: #570070 !important;
        color: white !important;
        font-weight: 700 !important;
        box-shadow:
            inset 0 0 0 2px black;
        border: none;
      }
      .filter-dropbtn.creature {background-color: #00524a;}
      .filter-dropbtn.creature:hover {color: #ffbc57;}
      
      .filter-dropdown-content {
        background-color: #14171c;
        border: 2px solid #8e7870;
        border-bottom-left-radius: 1em;
        border-top: none;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        color: white;
        display: none;
        min-width: 0;
        padding: .5em .25em;
        position: absolute;
        z-index: 3;      
        max-height: 200px;
        margin-top: 2px;
        overflow-y: auto;
      }

      .filter-dropdown-content label {
        display: flex;
        align-items: center;
        float: none;
        font-size: 1rem;
        margin: .375em 0;
        padding: .125em 1em;
        padding-left: .5em;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
      }

      .filter-dropdown-content label:hover {background-color: #570070;}
      .filter-dropdown-content label:first-of-type {
        color: #bc6d52;
        margin: auto;
        padding: auto;
        padding-left: auto;
        text-align: center;
        cursor: auto;
      }
      .filter-dropdown-content label:first-of-type:hover {
        background-color: initial;
        color: #bc6d52;
        font-weight: initial;
      }
      .filter-dropdown-content input {cursor: pointer;}
      
      .comment-filter-btn {
        background: #14171c;
        color: white;
        border: none;
        border-radius: 1em;
        border-bottom-left-radius: 3px;
        cursor: pointer;
        font-weight: 600;
        font-family: inherit;
        font-size: 1rem;
      }
      .comment-filter-btn:hover {color: #ff6638 !important;}
      .comment-filter-btn.active {
          background-color: #570070 !important;
          color: white !important;
          font-weight: 700 !important;
          box-shadow:
            inset 0 0 0 2px black;
          border: none;
      }

      .resetfilter {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 2em;
        font-weight: 900;
        background-color: #14171c;
        color: white;
        line-height: 1.2em;
        border-radius: 50%;
        aspect-ratio: 1 / 1;
        height: 33px;
        cursor: pointer;
      }
      .resetfilter:hover {color: #ff6638;}

      .cardcontainer {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
        width: 100%;
        padding: 4px;
        box-sizing: border-box;
      }

      .card {
        position: relative;
        display: inline-block;
        padding: 0 1px;
        box-sizing: border-box;
        border-bottom: 1px solid black;
        border-radius: 10px;
        background-color: white;
        overflow: hidden;
      }
      
      .card .name {
        display: block;
        font-weight: 700;
        font-size: .8em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: .25em 1em;
        text-align: center;
      }
      .card .textbox {
        display: none;
        text-align: left;
      }
      .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;}
      
      .comment-btn {
          position: absolute;
          top: 2px;
          right: 5px;
          background: rgba(0,0,0,0.8);
          color: #d6d0c9;
          border: 1px solid #d6d0c9;
          border-radius: 50%;
          border-bottom-left-radius: 0;
          cursor: pointer;
          font-size: 19px;
          aspect-ratio: 1 / 1;
          z-index: 2;
        }
        .comment-btn:hover {
          color: white;
          border: 1px solid white;
        }
        .comment-btn.active {
          top: 1px;
          right: 4px;
          background-color: #570070 !important;
          color: white !important;
          font-weight: 700 !important;
          border: 2px solid white;
        }
        
        .comment {
          position: absolute;
          content: 'COMMENTS';
          color: black;
          top: 24px;
          left: 0;
          width: 100%;
          max-height: calc(100% - 25px);
          overflow-y: auto;
          overflow-x: hidden;
          display: none;
          border-top: 1px solid black;
          background: #fff;
          padding: 5px;
          box-sizing: border-box;
          cursor: zoom-in;
          z-index: 2;
        }
        .comment p {
          font-size: .9rem;
          text-align: left;
          text-justify: none;
          box-sizing: border-box;
          padding: 0;
          margin: 0;
        }
        .comment ol {
          font-size: .9rem;
          padding-left: 1.5rem;
        }
        .comment hr {
           border: none;
           height: 1px;
           background: #d6d0c9;
           width: 100%;
           margin: 10px auto;
        }
        .card .comment img.comment-preview {
          float: left;
          margin-right: 8px;
          width: auto;
          height: 57px;
          border-radius: 3px;
          cursor: pointer;
        }
        .card .comment-header {display: flex;}
        .card .comment-label {
            flex-grow: 1;
            font-size: 1.1rem;
            font-weight: 700;
            text-transform: uppercase;
            text-indent: initial;
            border-bottom: 1px solid black;
            margin-bottom: 5px;
        }
        
        #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: white;
        border: 3px solid white;
        border-radius: 1.2rem;
        font-size: 1.5rem;
        z-index: 10;
      }

      .close {
        display: inline-flex;
        position: absolute;
        align-items: center;
        justify-content: center;
        top: 7px;
        right: 4px;
        font-size: 2rem;
        font-weight: 700;
        background: rgba(0,0,0,0.8);
        color: #d6d0c9;
        border: 2px solid #d6d0c9;
        border-radius: 50%;
        aspect-ratio: 1 / 1;
        height: 33px;
        cursor: pointer;
        z-index: 11;
        user-select: none;
      }
      .close:hover {
        color: #ff6638;
        border: 2px solid #ff6638;
        background: black;
      }
      
      .popup-card.showing-comment[rarity]::before {
        display: none;
      }
      
      .popup-content .card {
          position: relative;
          border-radius: 10px;
          padding: 0;
          cursor: default;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
      }
      .popup-content .card[rarity]:before {
        border: white;
        border-right: 3px solid white;
        border-left: 0;
        top: 10%;
      }
      .popup-content .card img {
        cursor: default;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
      }
      .popup-content .card .comment img.comment-preview {
          height: 99px;
          border-radius: 5px;
          cursor: pointer;
        }
        .popup-content .card .comment-label {
          border-bottom: 2px solid black;
          font-size: 1.5rem;        }
      
      .popup-content .name {
        display: none;
        position: absolute;
        top: 0;
        width: 100%;
        padding-left: 10px;
        padding-right: 35%;
        font-size: 2rem;
        font-weight: 400;
        box-sizing: border-box;
        cursor: auto;
        text-align: left;
        background: linear-gradient(to right, #570070, #14171c);
        color: white;
        z-index: 10;
      }
        .popup-content .comment-btn {
          top: 7px;
          right: 43px;
          font-size: 20px;
          height: 37px;
          border: 2px solid #d6d0c9;
          color: #d6d0c9;
          background: rgba(0,0,0,0.8);
          z-index: 11;
        }
        .popup-content .comment-btn:hover {
            color: white;
          border: 2px solid white;
        }
        .popup-content .comment-btn.active {
          background-color: #570070 !important;
          color: white !important;
          font-weight: 700 !important;
          border: 2px solid white;
        }
      .popup-content .comment {
        display: none;
        border-top: none;
        top: 55px;
        max-height: calc(100% - 55px);
        cursor: auto;
      }
      .popup-content .comment p {font-size: 1.2rem;}
      .popup-content .comment ol {font-size: 1.2rem;}
      .popup-content .comment hr {height: 2px;}
      
      .popup-nav {
        display: flex;
        justify-content: center;
        position: relative;
        border-bottom-left-radius: 1.2em;
        border-bottom-right-radius: 1.2em;
      }
      .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 .prev {border-bottom-left-radius: 1rem;}
      .popup-nav .next {
         border-bottom-right-radius: 1rem;
      }
      
      .card2 {
        cursor: pointer;  
        text-decoration: underline;
        z-index: 12;
      }
      .card2:hover, .card2:active {
        color: #0036cf;
        border-bottom: 1px solid #0036cf;
      }
      .card2[rarity]:before {
        display: none;
      }
      .card2[rarity="R1"]:before {content: "R1";background-color:#ff0096;color:white;}
      .card2[rarity="R2"]:before {content: "R2";background-color:#ff0096;color:white;}
      .card2[rarity="R3"]:before {content: "R3";background-color:#ff0096;color:white;}
      .card2[rarity="R4"]:before {content: "R4";background-color:#ff0096;color:white;}
      .card2[rarity="U1"]:before {content: "U1";background-color:#ff6638;color:white;}
      .card2[rarity="U2"]:before {content: "U2";background-color:#ff6638;color:white;}
      .card2[rarity="U3"]:before {content: "U3";background-color:#ff6638;color:white;}
      .card2[rarity="U4"]:before {content: "U4";background-color:#ff6638;color:white;}
      .card2[rarity="C1"]:before {content: "C1";background-color:#bc6d52;color:white;}
      .card2[rarity="C2"]:before {content: "C2";background-color:#bc6d52;color:white;}
      .card2[rarity="C3"]:before {content: "C3";background-color:#bc6d52;color:white;}
      .card2[rarity="C4"]:before {content: "C4";background-color:#bc6d52;color:white;}
      .card2[rarity="SP"]:before {content: "SP";background-color:#515968;color:white;}
      .card2[rarity="PR"]:before {content: "PR";background-color:#8e7870;color:white;}
      
      .popup2 {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 350px;
        background: black;
        border: 2px solid black;
        border-radius: 1rem;
        color: white;
        z-index: 12;
      }
      .popup2:before {
        content: "";
        position: absolute;
        background-color: black;
        opacity: 50%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100vw;
        height: 100vh;
        z-index: 4;
      }
      .popup2 img {
        position: relative;  
        width: 100%;
        display: block;
        border-radius: 1rem;
        box-sizing: border-box;
        z-index: 12;
      }
      .popup2-rarity {
        display: block;
        position: absolute;
        top: 2em;
        font-weight: 700;
        color: white;
        padding: 3px;
        padding-right: 6px;
        text-align: center;
        max-width: 1.5em;
        border-right: 2px solid white;
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        z-index: 12;
      }

      .close2 {
        display: inline-flex;
        position: absolute;
        align-items: center;
        justify-content: center;
        top: .25em;
        right: .25em;
        font-size: 2em;
        font-weight: 700;
        background-color: #14171c;
        color: #d6d0c9;
        border: 2px solid #d6d0c9;
        border-radius: 50%;
        aspect-ratio: 1 / 1;
        height: 33px;
        cursor: pointer;
        z-index: 13;
      }
      .close2:hover {
        color: #ff6638;
        border: 2px solid #ff6638;
      }

      h1 {
        font-size: 1.2rem;
        font-weight: 400;
        text-transform: uppercase;
      }
      h1.spacebottom0 {
        padding-bottom: 0;
        margin-bottom: 0;      
      }
      h1.center {
        font-size: 1.4rem;
        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;
      }

      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;}

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

      .filter-dropdown-content.show {
        display: block;
      }

      /* 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);}

        .filter-dropbtn, .filter-dropdown-content label, .comment-filter-btn {
          font-size: .9em;
          padding: .25em .5em;
        }

        .filtercontainer2 {width: auto;}
        .filtercontainer2 .resetfilter {
          height: 23px;
          font-size: 1.5em;
        }
      }

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

        #searchinput {
          font-weight: 1em;
          padding: .5em;
        }

        #cardcounter {padding: 0 .5em 0 .25em;}
        
        .mobile-filter-bar {
            display: flex;
            gap: 3px;
            height: 33px;
            background-color: #8e7870;
            padding: 3px;
            border-top: 1px solid black;
            margin: 0;
        }
        
        .mobile-filter-btn {
          width: 100%;
          height: 100%;
          background: #14171c;
          color: white;
          border: none;
          font-size: 14px;
          letter-spacing: 3px;
          cursor: pointer;
          font-family: 'Noto Serif';
          font-weight: 600;
          border-radius: 4px;
        }
        
        .mobile-filter-btn.filter-active {
            background-color: #570070 !important;
            color: white !important;
            font-weight: 700 !important;
            box-shadow:
                inset 0 0 0 2px black,
                inset 0 0 0 3px white;
            border: none;
        }

        .filtercontainer {
          top: 73px;
          background: rgba(142, 120, 112, 0.9);
        }
        
        .filtercontainer2 {display: none;}
        
        .filter-dropbtn.creature {
            background-color: #003d37;
        }
        
        .filtercontainer2.mobile-open {
            display: flex;      
            flex-wrap: wrap;
            justify-content: center;
            padding: 2px 0;
            gap: 2px;
            box-sizing: border-box;
            margin: 0 auto;
            width: 100%;
        }
        
        .mobile-filter-bar .resetfilter {
            align-items: center;
            justify-content: center;
            border-radius: 4px;
        }

        .filtercontainer2 .resetfilter {display: none;}
      }

      @media screen and (max-width: 600px) {
        .cardcontainer {grid-template-columns: repeat(2, 1fr);}
        .popup {width: 95%;}
        .popup2 {width: 85%;}
      }