:root {
    --z-header: 10000;
    --z-chat: 6000;
    --z-map-filter-pane: 5000;
    --z-map-current-target: 5000;
    --z-tooltip: 1000;
    --z-sticky-info: 1001;
    --z-fullscreen: 1000;
    --z-snackbar: 999;
    --z-map-controls: 500;
    --z-hover-info-box: 100;
    --z-map-marker-hover: 50;
    --grayscale-100: #fdfdfd;
    --grayscale-200: #f6f6f6;
    --grayscale-300: #eaeaea;
    --grayscale-400: #d6d6d6;
    --grayscale-500: #bcbcbc;
    --grayscale-600: #9b9b9b;
    --grayscale-700: #767676;
    --grayscale-800: #505050;
    --grayscale-900: #272727;
    --primary-100: #fefdfd;
    --primary-200: #fcf5f5;
    --primary-300: #f8e8e8;
    --primary-400: #f2d0d0;
    --primary-500: #e8afaf;
    --primary-600: #dd8787;
    --primary-700: #cb4848;
    --primary-750: #df3d40;
    --primary-800: #952a2a;
    --primary-900: #4f1616;
    --background-50: #fcfdfd;
    --background-100: #d8e3e4;
    --background-200: #bacacf;
    --background-300: #9eb1ba;
    --background-400: #8598a7;
    --background-500: #6e7f95;
    --background-600: #5a657a;
    --background-700: #44495a;
    --background-750: #393e4c;
    --background-800: #252630;
    --background-900: #191920;
    --green-100: #fbfefb;
    --green-200: #edfaed;
    --green-300: #d1f2d1;
    --green-400: #a6e6a6;
    --green-500: #63d363;
    --green-600: #32b332;
    --green-700: #268726;
    --green-800: #1a5c1a;
    --green-900: #0d2d0d;
    --blue-100: #fdfdff;
    --blue-200: #f5f5ff;
    --blue-300: #e8e8fe;
    --blue-400: #d2d2fe;
    --blue-500: #b5b5fd;
    --blue-600: #9090fc;
    --blue-700: #6161fa;
    --blue-800: #1e1ef8;
    --blue-900: #04048c;
    --yellow-100: #ffffe1;
    --yellow-200: #fefe00;
    --yellow-300: #f2f200;
    --yellow-400: #dd0;
    --yellow-500: #c2c200;
    --yellow-600: #a0a000;
    --yellow-700: #7a7a00;
    --yellow-800: #535300;
    --yellow-900: #292900;
    --orange-50: #fefcf9;
    --orange-100: #fdf5eb;
    --orange-200: #fbe7cf;
    --orange-300: #f6cf9f;
    --orange-400: #f0af5f;
    --orange-500: #e28515;
    --orange-600: #ab6510;
    --orange-700: #74450b;
    --orange-800: #392205;
    --orange-900: #261603;
    --le-set: var(--green-600);
    --le-unique: var(--orange-400);
    --le-magic: #36a3e2;
    --le-crafting: var(--orange-500);
    --le-rare: #e3d157;
    --le-legendary: #e80b5a;
    --le-key: #ff1e56;
    --le-idol: #36c8c8;
    --le-exalted: #c184ff;
    --le-lens: #e5adff;
    --le-normal-rgb: 214, 214, 214;
    --le-set-rgb: 50, 179, 50;
    --le-unique-rgb: 240, 175, 95;
    --le-magic-rgb: 54, 163, 226;
    --le-crafting-rgb: 226, 133, 21;
    --le-lens-rgb: 229, 173, 255;
    --le-key-rgb: 255, 30, 86
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0
}

ul {
    padding-left: 1rem;
    list-style: square
}

strong {
    font-weight: 400;
    color: var(--grayscale-100)
}

body,
html {
    max-width: 100vw;
    height: 100%;
    background-color: var(--background-900);
    color: var(--grayscale-500);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    scroll-behavior: smooth
}

body {
    display: flex;
    flex-direction: column
}

body footer,
body header {
    flex-shrink: 0
}

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

body main {
    flex-grow: 1
}

p {
    color: var(--grayscale-500);
    line-height: 2rem;
    font-size: 1rem;
    max-width: 70ch
}

p mark {
    color: var(--grayscale-100)
}

p i,
p mark {
    background: none;
    font-weight: 400
}

p i {
    color: var(--blue-600);
    font-style: normal
}

h1,
h2,
h3,
h4 {
    color: var(--grayscale-100);
    font-weight: 400;
}

h5 {
    color: var(--grayscale-500);
}

a {
    color: inherit;
    text-decoration: none
}

.link {
    text-decoration: underline;
    color: var(--background-100)
}

.link:hover {
    opacity: 1
}

.articleLink {
    text-decoration: underline;
    -webkit-text-decoration-style: dotted;
    text-decoration-style: dotted;
    text-underline-offset: 4px;
    color: var(--grayscale-100)
}

.articleLink:hover {
    color: var(--primary-700);
    -webkit-text-decoration-style: solid;
    text-decoration-style: solid
}

@media(prefers-color-scheme:dark) {
    html {
        color-scheme: dark
    }
}

.fc-consent-root .fc-dialog-container .fc-dialog .fc-header h2 {
    color: var(--primary-700) !important
}

.fc-consent-root .fc-dialog-container .fc-stacks .fc-stack-icon {
    background-color: var(--background-100) !important
}

.fc-consent-root .fc-dialog-container .fc-stacks .fc-stack-icon .material-icons {
    color: var(--background-600) !important
}

.fc-consent-root .fc-dialog-container .fc-primary-button .fc-button-background {
    background-color: var(--background-600) !important
}

.react-transform-wrapper,
.react-transform-wrapper .react-transform-component {
    width: 100% !important
}

i {
    color: var(--primary-750);
    background: none;
    font-weight: 400;
    font-style: normal;
    white-space: nowrap
}

i.wrap {
    white-space: normal
}

mark {
    font-weight: 400
}

b,
mark {
    color: var(--grayscale-100);
    background: none
}

b {
    filter: brightness(1.5)
}

i b {
    color: var(--primary-750)
}

img {
    object-fit: contain;
    max-width: 100%
}

.leaflet-container {
    height: 100%;
    background-color: #2b2d32 !important;
    font-family: __Montserrat_b1da2a;
}

.leaflet-control-attribution {
    display: none
}

.leaflet-marker-icon:hover {
    filter: drop-shadow(16px 16px 20px yellow) invert(75%);
    z-index: var(--z-map-marker-hover)
}

.leaflet-popup-content-wrapper {
    /* background: var(--background-600) !important;
    padding: 0 !important;
    box-shadow: none !important;
    position: relative;
    display: flex; */
    background-color: transparent !important;
    border: none;
    box-shadow: none;
}

.leaflet-popup-content-wrapper span {
    font-weight: 400;
    font-size: 0.75rem;
    text-transform: capitalize;
}

.leaflet-popup-content-wrapper p {
    font-weight: 400;
    font-size: 0.75rem;
}

.leaflet-popup-content-wrapper h5 {
    font-weight: 400;
    font-size: 0.75rem;
    text-transform: capitalize;
}

.leaflet-popup-content-wrapper .img1 {
    float: right;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 15px;
    right: 20px;
}

.leaflet-popup-content-wrapper .img2 {
    float: none;
}

.popup-image-link:hover {
    opacity: 0.5;
}

.leaflet-popup-tip-container {
    display: none !important
}

.leaflet-tooltip {
    background-color: transparent !important;
    border: none;
    box-shadow: none;
}

.leaflet-popup {
    background-color: transparent !important;
    border: none;
    box-shadow: none;
}

.fish {
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.no-scroll {
    height: 100%;
    overflow: hidden
}

.take-over {
    background-image: url(/take-over.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 136%;
    background-attachment: fixed
}

.lootFilter {
    color: var(--grayscale-500)
}

.lootFilter .emphasized {
    text-decoration: underline;
    -webkit-text-decoration-style: dotted;
    text-decoration-style: dotted;
    text-underline-offset: 4px;
    text-transform: uppercase
}

.lootFilter mark {
    color: var(--grayscale-100)
}

.lootFilter .unique,
.lootFilter .unique.idol {
    color: var(--orange-400)
}

.lootFilter .set {
    color: var(--green-600)
}

.lootFilter .magic {
    color: #36a3e2
}

.lootFilter .rare {
    color: #e3d157
}

.lootFilter .idol {
    color: #36c8c8
}

.lootFilter .exalted {
    color: #c184ff
}

@font-face {
    font-family: __Montserrat_b1da2a;
    font-weight: 100 900;
    font-display: swap;
    src: url("https://use.typekit.net/af/b89a53/00000000000000007735ba1d/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2");
    unicode-range: U+0460-052f, U+1c80-1c88, U+20b4, U+2de0-2dff, U+a640-a69f, U+fe2e-fe2f
}

@font-face {
    font-family: __Montserrat_b1da2a;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("https://use.typekit.net/af/b89a53/00000000000000007735ba1d/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2");
    unicode-range: U+0301, U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116
}

@font-face {
    font-family: __Montserrat_b1da2a;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("https://use.typekit.net/af/b89a53/00000000000000007735ba1d/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01a0-01a1, U+01af-01b0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1ea0-1ef9, U+20ab
}

@font-face {
    font-family: __Montserrat_b1da2a;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("https://use.typekit.net/af/b89a53/00000000000000007735ba1d/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2");
    unicode-range: U+0100-02af, U+0304, U+0308, U+0329, U+1e00-1e9f, U+1ef2-1eff, U+2020, U+20a0-20ab, U+20ad-20c0, U+2113, U+2c60-2c7f, U+a720-a7ff
}

@font-face {
    font-family: __Montserrat_b1da2a;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("https://use.typekit.net/af/b89a53/00000000000000007735ba1d/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2");
    unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+0304, U+0308, U+0329, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd
}

@font-face {
    font-family: __Montserrat_Fallback_b1da2a;
    src: local("Sans-Serif");
    ascent-override: 84.95%;
    descent-override: 22.03%;
    line-gap-override: 0.00%;
    size-adjust: 113.95%
}

.__className_b1da2a {
    font-family: __Montserrat_b1da2a, __Montserrat_Fallback_b1da2a;
    font-style: normal;
}

/* Style the toggle-sign span to appear to the right of the h4 */
.toggle-sign {
    float: right;
    margin-left: 10px;
    /* Adjust as needed */
}

.image-container {
    /* background-image: url("Home _ The Angler _ Call of the Wild_files/1666965549-768-break-bkg.png"); */
    /* The image used - important! */
    background-size: cover;
    position: relative;
    /* Needed to position the cutout text in the middle of the image */
    height: 100%;
    /* Some height */
    width: 100%;
}

.welcome {
    background-color: white;
    color: black;
    font-size: 5vw;
    /* Responsive font size */
    font-weight: bold;
    margin: 0 auto;
    /* Center the text container */
    padding: 10px;
    width: 50%;
    text-align: center;
    /* Center text */
    position: absolute;
    /* Position text */
    top: 50%;
    /* Position text in the middle */
    left: 50%;
    /* Position text in the middle */
    transform: translate(-50%, -50%);
    /* Position text in the middle */
    mix-blend-mode: screen;
    /* This makes the cutout text possible */
}