body {
    width:  100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    user-select: none;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    gap: 2vh;
    background: #3C3C3C url('img/map.png') no-repeat center center;
    background-size: cover;
}
body::-webkit-scrollbar {
    display:none;
    margin: 0;
}

:root {
    --information-bg: linear-gradient(215.95deg, #0A0A0A -3.1%, #1A1919 61.91%);
    --dash-background: linear-gradient(193.19deg, rgba(10, 10, 10, 0.25), rgba(38, 38, 38, 0.5) 68.84%);
    --circle-background: #171616;
}

@font-face {
    font-family: 'Inter-Black';
    src: url(fonts/Inter-Black.ttf);
}

@font-face {
    font-family: 'Inter-Bold';
    src: url(fonts/Inter-Bold.ttf);
}

@font-face {
    font-family: 'Inter-ExtraBold';
    src: url(fonts/Inter-ExtraBold.ttf);
}

@font-face {
    font-family: 'Inter-ExtraLight';
    src: url(fonts/Inter-ExtraLight.ttf);
}

@font-face {
    font-family: 'Inter-Light';
    src: url(fonts/Inter-Light.ttf);
}

@font-face {
    font-family: 'Inter-Medium';
    src: url(fonts/Inter-Medium.ttf);
}

@font-face {
    font-family: 'Inter-Regular';
    src: url(fonts/Inter-Regular.ttf);
}

@font-face {
    font-family: 'Inter-SemiBold';
    src: url(fonts/Inter-SemiBold.ttf);
}

@font-face {
    font-family: 'Inter-Thin';
    src: url(fonts/Inter-Thin.ttf);
}

* {
    box-sizing: border-box;
    font-family: 'Inter-SemiBold';
}
.backgorund{width:100%;height:100%;position:absolute;z-index:3}
.header {
    top: 0;
    width: 100%;
    height: 11vh;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("img/header.png");
    background-position: center;
    z-index: 3;
    background-color: #1a1a1a; /* fallback if image missing */
}
.header > .header-text {
    width: 30vh;
    height: auto;
}
.map {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    position: absolute;
    background-color: #3C3C3C; /* fallback if image fails to load */
}
.category-container{z-index:3;width:10vh;height:20vh;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;position:absolute;right:1vh;top:6vh;gap:1vh}.circle,.category-circle{width:4vh;height:4vh;display:flex;align-items:center;justify-content:center;border-radius:3.5vh;background:var(--circle-background);transition:.2s ease-out}.circle:hover,.category-circle:hover{cursor:pointer;transform:scale(1.1)}.circle>i,.category-circle>i{color:#fff;font-size:1.75vh}.category-circle[data-state="true"]{background:rgba(255,0,76,0.25)}.dash{width:fit-content;height:fit-content;padding:.75vh;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;background:var(--dash-background);border-radius:3.5vh}.categorys{width:fit-content;height:fit-content;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;gap:.5vh}.location{width:fit-content;height:33vh;position:absolute;display:flex;align-items:flex-start;justify-content:flex-start;padding:.5vh;z-index:3}.marker{width:3.5vh;height:3.5vh;background-image:url("img/location.png");background-size:cover;background-repeat:no-repeat;background-position:center;transition:.2s ease-out;display:flex;align-items:flex-start;justify-content:flex-start;padding:.5vh}.marker:hover{transform:scale(1.1);cursor:pointer}.marker>i{color:#ff004d;font-size:1.75vh}
.location-info {
    width: 26vh;
    height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    margin-top: 1vh;
    margin-left: -3.25vh;
    background: url(img/information-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: .75vh;
    background-color: rgba(10, 10, 10, 0.95); /* fallback */
    border-radius: 0.5vh;
}
.li-image{width:100%;height:4vh;display:flex;align-items:center;justify-content:center;overflow:hidden;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);border-top-right-radius:.5vh}.li-image>img{width:100%}.li-title{width:100%;height:fit-content;display:flex;align-items:center;justify-content:flex-start}.li-title>span{color:#fff;font-family:'Inter-Black';font-size:1.5vh;margin-block-end:0;margin-block-start:0;text-overflow:ellipsis;overflow:hidden !important;text-transform:uppercase}.divider{width:100%;height:.1vw;margin-block-start:.5vh;margin-block-end:.5vh;border-radius:1vh;background:#262626}.li-desc{width:100%;height:8vh;display:flex;align-items:flex-start;justify-content:flex-start;overflow:hidden}.li-desc>span{color:#464646;font-size:.9vh;font-family:'Inter-Black';text-overflow:ellipsis;overflow:hidden !important}.li-neartitle{width:100%;height:2vh;display:flex;align-items:center;justify-content:flex-start}.li-neartitle>span{color:#fff;font-family:'Inter-Black';font-size:1vh;margin-block-end:0;margin-block-start:0;text-overflow:ellipsis;text-transform:uppercase;overflow:hidden !important}.li-nearby{width:100%;height:3.5vh;overflow:auto;display:-webkit-box;gap:.5vh}.li-nearby::-webkit-scrollbar{display:none;margin:0}.lin-icon{width:3.25vh;height:90%;display:flex;align-items:center;justify-content:center;border-radius:.75vh;background:linear-gradient(225deg,#00ff94 2.25%,#005a8d 100%);transition:.2s ease-out;cursor:pointer}.lin-icon[data-state="true"]{border:.25vh solid #ff004d}.lin-icon>i{font-size:1.5vh;color:#fff}.lin-icon:hover>i{transform:scale(1.1)}.li-active{width:35%;height:3.5vh;display:flex;align-items:center;justify-content:flex-start;border-radius:.5vh;background-color:#262626;padding:.5vh;position:relative;gap:.5vh}.li-active>i{color:#fff;font-size:2vh}.li-active>span{color:#fff;font-size:1vh;font-family:'Inter-Black'}.li-spawn{width:100%;height:2.5vh;display:flex;align-items:center;justify-content:center;margin-block-start:.5vh;background-color:#fff;border-radius:.5vh;transition:.2s ease-out}.li-spawn:active{position:relative;top:1px}.li-spawn:hover{cursor:pointer}.li-spawn:hover>span{transform:scale(1.1)}.li-spawn>span{color:#000;font-size:2vh;transition:.2s ease-out;text-transform:uppercase;font-family:'Inter-Black'}