Inscription #65990761#65,990,761pngInscription #65479892#65,479,892svgInscription #65479891#65,479,891svgInscription #64998789#64,998,789svg#64,488,352Inscription #20271662#20,271,662svgInscription #20271617#20,271,617svgInscription #14430338#14,430,338htmlInscription #14429302#14,429,302htmlInscription #14428643#14,428,643htmlInscription #14428055#14,428,055htmlInscription #14427586#14,427,586htmlInscription #14427490#14,427,490htmlInscription #14426441#14,426,441htmlInscription #14424475#14,424,475htmlInscription #14422981#14,422,981htmlInscription #14422750#14,422,750htmlInscription #14420895#14,420,895html/* V2 - fixed buggu johnson */ .root { margin: 0; padding: 0; } :root { --mainBackground: #3a2d48; --mainSecondary: #ffb0b8; --contentSecondary: #6a707a; --mainCardBg: #6a707a; --mainCardName: #609dce; --mainCardPrimary: #aebfd1; --mainCardSecondary: #8f578e; --matchCardBg: #6a707a; --matchCardPrimary: #ff74a3; --matchCardSecondary: black; --matchCardHover: #f795b6; --metadataPrimary: #8f578e; --metadataGold: #c99f34; --metadataRed: #e04242; --metadataOrange: #e07f42; --metadataGreen: #42e052; --metadataBoxRed: #463135; --metadataBoxOrange: #463631; --metadataBoxGreen: #103714; --messagesFrom: #c1e2b4; --messagesTo: #609dce; --scrollbarColor: #714870; --scrollbarThumbColor: #91a3bd; --websiteVersion: #45b634; --linkHover: #dc71db; } body { background-color: var(--mainBackground); color: black; margin: 0px; font-size: 16px; font-family: Arial, Helvetica, sans-serif !important; } .fullPageContainer { height: 100vh; width: 100vw; overflow-y: auto; } .headerSection { width: 100%; height: 10%; display: flex; justify-content: center; align-items: center; } .headerDiv { width: 80%; height: 90%; background-color: var(--mainSecondary); display: flex; justify-content: center; align-items: center; font-size: 1.5em; border-radius: 6px; } .header { font-size: 2em; } .mainSection { width: 99%; height: 80%; display: flex; align-items: center; /* justify-content: space-between; */ padding: 4px; gap: 20px; } .sidebarSection { height: 100%; width: 20%; background-color: var(--mainSecondary); border-radius: 6px; display: flex; flex-direction: column; align-items: center; } .accountInfoDiv { height: 30%; min-height: 320px; width: 90%; background-color: var(--mainCardBg); margin: 10px; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; } .name { padding: 6px; margin: 6px 0px; font-size: 1.8em; display: flex; align-items: center; justify-content: center; background-color: var(--mainCardName); border-radius: 6px; width: 100%; } .selfAgeHeightPronouns { background: var(--mainCardPrimary); padding: 6px; border-radius: 6px; width: 100%; display: flex; align-items: center; justify-content: center; } .twitter { padding: 6px; background: var(--mainCardPrimary); border-radius: 6px; font-size: 0.9em; width: 100%; display: flex; flex-direction: column; align-items: center; } .twitterHeader { font-size: 1.2em; } .notableHoldings { font-size: 0.9em; background-color: var(--mainCardPrimary); border-radius: 6px; padding: 4px; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; overflow-y: hidden; } .notableHeader { font-size: 1.2em; } .holdings { display: flex; align-items: center; flex-direction: column; width: 100%; gap: 2px; background-color: #7f8c9a; border: 6px; padding-top: 6px; padding-bottom: 6px; overflow-y: scroll; } .holdings span { text-align: center; } .holding { background-color: var(--mainCardSecondary); padding: 6px; border-radius: 6px; } .sidebarHeader { font-size: 1.6em; width: 100%; height: 6%; display: flex; align-items: end; justify-content: center; font-weight: 500; margin-top: 6px; } .matchesDiv { background-color: var(--matchCardBg); width: 90%; height: 60%; margin: 10px; border-radius: 6px; padding: 6px; overflow-y: scroll; gap: 4px; display: flex; flex-direction: column; align-items: center; } .match { width: 90%; height: 30%; min-height: 100px; background-color: var(--matchCardPrimary); border-radius: 6px; flex-shrink: 0; padding: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; gap: 10px; } .match:hover { background-color: var(--matchCardHover); } .matchName { font-size: 1.6em; color: var(--matchCardSecondary); font-weight: 600; align-self: center; } .matchAgeHeightPronouns { color: var(--matchCardSecondary); font-weight: 600; } .factAboutYou { font-size: 0.8em; color: var(--matchCardSecondary); font-weight: 600; } .mainContentSection { height: 100%; width: 78%; background-color: var(--mainSecondary); border-radius: 6px; display: flex; justify-content: space-between; align-items: center; } .lilInfoHeader { font-weight: bold; align-self: center; font-size: 1.2em; text-align: center; } .lilMessageHeader { font-size: 0.8em; align-self: center; } .lilMessagesEndingSpan { font-size: 0.8em; align-self: center; font-weight: bold; } .timestamp { font-size: 0.7em; } .messageToDiv { width: 100%; display: flex; align-items: flex-end; justify-content: flex-end; gap: 4px; } .messageTo { background: var(--messagesTo); max-width: 45%; border-radius: 6px; padding: 6px; display: flex; align-items: center; justify-content: center; } .messageFromDiv { width: 100%; display: flex; align-items: flex-end; justify-content: flex-start; gap: 4px; } .messageFrom { background: var(--messagesFrom); max-width: 45%; border-radius: 6px; padding: 6px; display: flex; align-items: center; justify-content: center; align-self: flex-start; } .metadata { width: 90%; background-color: var(--metadataPrimary); border-radius: 6px; padding: 10px; } .metadata2 { width: 90%; background-color: var(--metadataGreen); border-radius: 6px; padding: 10px; font-size: 1.2em; display: flex; align-items: center; justify-content: space-between; } .metadataRed { background-color: var(--metadataRed); } .metadataOrange { background-color: var(--metadataOrange); } .vibeScore { background-color: var(--metadataBoxGreen); border-radius: 6px; padding: 6px; font-weight: bold; color: var(--metadataGreen); } .vibeScoreRed { background-color: var(--metadataBoxRed); border-radius: 6px; padding: 6px; font-weight: bold; color: var(--metadataRed); } .vibeScoreOrange { background-color: var(--metadataBoxOrange); border-radius: 6px; padding: 6px; font-weight: bold; color: var(--metadataOrange); } .metadataGold { background-color: var(--metadataGold); } .youGotGold { font-size: 1em; color: #181717; font-weight: bold; } .youGotGold2 { font-size: 0.8em; color: #181717; font-weight: bold; } .matchInfo { width: 48%; height: 90%; margin: 10px; border-radius: 6px; background-color: var(--contentSecondary); padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; overflow-y: scroll; } .matchMessages { width: 48%; height: 90%; margin: 10px; border-radius: 6px; background-color: var(--contentSecondary); overflow-y: scroll; display: flex; flex-direction: column; padding: 10px; gap: 10px; } .matchInfo2 { display: none; } .matchMessages2 { display: none; } .matchInfo3 { display: none; } .matchMessages3 { display: none; } .footerContainer { width: 100%; height: 8%; display: flex; justify-content: center; align-items: center; } .footer { background-color: var(--mainSecondary); width: 82%; height: 90%; display: flex; justify-content: center; align-items: center; font-size: 1.3em; border-radius: 6px; padding-left: 20px; padding-right: 20px; gap: 10px; } .seriesNumberSpan { color: var(--websiteVersion); font-weight: 700; } .footerLink { cursor: pointer; } .footerLink:hover { color: var(--linkHover); } .aboutModal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: #00000080; } .modal-content { background-color: var(--contentSecondary); margin: auto; padding: 20px; border: 1px solid #d8cfcf; color: var(--maroonMuted); width: 80%; max-width: 90%; max-height: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow-x: auto; font-size: 1.4em; border-radius: 6px; } .close { position: absolute; top: 0; right: 0; font-size: 1.4em; font-weight: bold; padding: 10px; cursor: pointer; } .close:hover { color: var(--linkHover); } a { color: inherit; text-decoration: none; } ::-webkit-scrollbar { width: 6px; height: 12px; } ::-webkit-scrollbar-thumb { background-color: var(--scrollbarThumbColor); border-radius: 6px; } ::-webkit-scrollbar-track { background-color: var(--scrollbarColor); } @media (max-height: 980px) { .accountInfoDiv { min-height: 260px; } .holdings { max-height: 60px; } } @media (min-height: 1000px) { body { font-size: 20px; } } #14,338,075textInscription #14337004#14,337,004htmlInscription #14277199#14,277,199html#14,258,552js.root { margin: 0; padding: 0; } :root { --mainBackground: #3a2d48; --mainSecondary: #ffb0b8; --contentSecondary: #6a707a; --mainCardBg: #6a707a; --mainCardName: #609dce; --mainCardPrimary: #aebfd1; --mainCardSecondary: #8f578e; --matchCardBg: #6a707a; --matchCardPrimary: #ff74a3; --matchCardSecondary: black; --matchCardHover: #f795b6; --metadataPrimary: #8f578e; --metadataGold: #c99f34; --metadataRed: #e04242; --metadataOrange: #e07f42; --metadataGreen: #42e052; --metadataBoxRed: #463135; --metadataBoxOrange: #463631; --metadataBoxGreen: #103714; --messagesFrom: #c1e2b4; --messagesTo: #609dce; --scrollbarColor: #714870; --scrollbarThumbColor: #91a3bd; --websiteVersion: #45b634; --linkHover: #dc71db; } body { background-color: var(--mainBackground); color: black; margin: 0px; font-size: 16px; font-family: Arial, Helvetica, sans-serif !important; } .fullPageContainer { height: 100vh; width: 100vw; overflow-y: auto; } .headerSection { width: 100%; height: 10%; display: flex; justify-content: center; align-items: center; } .headerDiv { width: 80%; height: 90%; background-color: var(--mainSecondary); display: flex; justify-content: center; align-items: center; font-size: 1.5em; border-radius: 6px; } .header { font-size: 2em; } .mainSection { width: 99%; height: 80%; display: flex; align-items: center; /* justify-content: space-between; */ padding: 4px; gap: 30px; } .sidebarSection { height: 100%; width: 20%; background-color: var(--mainSecondary); border-radius: 6px; display: flex; flex-direction: column; align-items: center; } .accountInfoDiv { height: 30%; min-height: 320px; width: 90%; background-color: var(--mainCardBg); margin: 10px; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; } .name { padding: 6px; margin: 6px 0px; font-size: 1.8em; display: flex; align-items: center; justify-content: center; background-color: var(--mainCardName); border-radius: 6px; width: 100%; } .selfAgeHeightPronouns { background: var(--mainCardPrimary); padding: 6px; border-radius: 6px; width: 100%; display: flex; align-items: center; justify-content: center; } .twitter { padding: 6px; background: var(--mainCardPrimary); border-radius: 6px; font-size: 0.9em; width: 100%; display: flex; flex-direction: column; align-items: center; } .twitterHeader { font-size: 1.2em; } .notableHoldings { font-size: 0.9em; background-color: var(--mainCardPrimary); border-radius: 6px; padding: 4px; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; } .notableHeader { font-size: 1.2em; } .holdings { display: flex; align-items: center; flex-direction: column; width: 100%; gap: 2px; height: 100%; } .holdings span { text-align: center; } .holding { background-color: var(--mainCardSecondary); padding: 6px; border-radius: 6px; } .sidebarHeader { font-size: 1.6em; width: 100%; height: 6%; display: flex; align-items: end; justify-content: center; font-weight: 500; margin-top: 6px; } .matchesDiv { background-color: var(--matchCardBg); width: 90%; height: 60%; margin: 10px; border-radius: 6px; padding: 6px; overflow-y: scroll; gap: 4px; display: flex; flex-direction: column; align-items: center; } .match { width: 90%; height: 30%; min-height: 100px; background-color: var(--matchCardPrimary); border-radius: 6px; flex-shrink: 0; padding: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; gap: 10px; } .match:hover { background-color: var(--matchCardHover); } .matchName { font-size: 1.6em; color: var(--matchCardSecondary); font-weight: 600; align-self: center; } .matchAgeHeightPronouns { color: var(--matchCardSecondary); font-weight: 600; } .factAboutYou { font-size: 0.8em; color: var(--matchCardSecondary); font-weight: 600; } .mainContentSection { height: 100%; width: 78%; background-color: var(--mainSecondary); border-radius: 6px; display: flex; justify-content: space-between; align-items: center; } .lilInfoHeader { font-weight: bold; align-self: center; font-size: 1.2em; text-align: center; } .lilMessageHeader { font-size: 0.8em; align-self: center; } .lilMessagesEndingSpan { font-size: 0.8em; align-self: center; font-weight: bold; } .timestamp { font-size: 0.7em; } .messageToDiv { width: 100%; display: flex; align-items: flex-end; justify-content: flex-end; gap: 4px; } .messageTo { background: var(--messagesTo); max-width: 45%; border-radius: 6px; padding: 6px; display: flex; align-items: center; justify-content: center; } .messageFromDiv { width: 100%; display: flex; align-items: flex-end; justify-content: flex-start; gap: 4px; } .messageFrom { background: var(--messagesFrom); max-width: 45%; border-radius: 6px; padding: 6px; display: flex; align-items: center; justify-content: center; align-self: flex-start; } .metadata { width: 90%; background-color: var(--metadataPrimary); border-radius: 6px; padding: 10px; } .metadata2 { width: 90%; background-color: var(--metadataGreen); border-radius: 6px; padding: 10px; font-size: 1.2em; display: flex; align-items: center; justify-content: space-between; } .metadataRed { background-color: var(--metadataRed); } .metadataOrange { background-color: var(--metadataOrange); } .vibeScore { background-color: var(--metadataBoxGreen); border-radius: 6px; padding: 6px; font-weight: bold; color: var(--metadataGreen); } .vibeScoreRed { background-color: var(--metadataBoxRed); border-radius: 6px; padding: 6px; font-weight: bold; color: var(--metadataRed); } .vibeScoreOrange { background-color: var(--metadataBoxOrange); border-radius: 6px; padding: 6px; font-weight: bold; color: var(--metadataOrange); } .metadataGold { background-color: var(--metadataGold); } .youGotGold { font-size: 1em; color: #181717; font-weight: bold; } .youGotGold2 { font-size: 0.8em; color: #181717; font-weight: bold; } .matchInfo { width: 48%; height: 90%; margin: 10px; border-radius: 6px; background-color: var(--contentSecondary); padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; overflow-y: scroll; } .matchMessages { width: 48%; height: 90%; margin: 10px; border-radius: 6px; background-color: var(--contentSecondary); overflow-y: scroll; display: flex; flex-direction: column; padding: 10px; gap: 10px; } .matchInfo2 { display: none; } .matchMessages2 { display: none; } .matchInfo3 { display: none; } .matchMessages3 { display: none; } .footerContainer { width: 100%; height: 8%; display: flex; justify-content: center; align-items: center; } .footer { background-color: var(--mainSecondary); width: 82%; height: 90%; display: flex; justify-content: center; align-items: center; font-size: 1.3em; border-radius: 6px; padding-left: 20px; padding-right: 20px; gap: 10px; } .seriesNumberSpan { color: var(--websiteVersion); font-weight: 700; } .footerLink { cursor: pointer; } .footerLink:hover { color: var(--linkHover); } .aboutModal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: #00000080; } .modal-content { background-color: var(--contentSecondary); margin: auto; padding: 20px; border: 1px solid #d8cfcf; color: var(--maroonMuted); width: 80%; max-width: 90%; max-height: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow-x: auto; font-size: 1.4em; border-radius: 6px; } .close { position: absolute; top: 0; right: 0; font-size: 1.4em; font-weight: bold; padding: 10px; cursor: pointer; } .close:hover { color: var(--linkHover); } a { color: inherit; text-decoration: none; } ::-webkit-scrollbar { width: 6px; height: 12px; } ::-webkit-scrollbar-thumb { background-color: var(--scrollbarThumbColor); border-radius: 6px; } ::-webkit-scrollbar-track { background-color: var(--scrollbarColor); } @media (max-height: 980px) { .accountInfoDiv { min-height: 260px; } .holdings { max-height: 60px; overflow-y: scroll; background-color: #7f8c9a; border: 6px; padding-top: 6px; padding-bottom: 6px; } } @media (min-height: 1000px) { body { font-size: 20px; } } #14,255,921text