@font-face { font-display: swap; font-family: nr;   font-style: normal; font-weight: 400; src: url(/assets/fonts/National_Park/static/NationalPark-Regular.ttf)}
@font-face { font-display: swap; font-family: nb;   font-style: normal; font-weight: 700; src: url(/assets/fonts/National_Park/static/NationalPark-Bold.ttf)}
@font-face { font-display: swap; font-family: neb;  font-style: normal; font-weight: 800; src: url(/assets/fonts/National_Park/static/NationalPark-ExtraBold.ttf)}
@font-face { font-display: swap; font-family: rr;   font-style: normal; font-weight: 400; src: url(/assets/fonts/Rubik/static/Rubik-Regular.ttf)}
@font-face { font-display: swap; font-family: rb;   font-style: normal; font-weight: 600; src: url(/assets/fonts/Rubik/static/Rubik-Bold.ttf)}
@font-face { font-display: swap; font-family: iel;  font-style: normal; font-weight: 200; src: url(/assets/fonts/Inter/static/Inter_18pt-ExtraLight.ttf)}
@font-face { font-display: swap; font-family: il;   font-style: normal; font-weight: 300; src: url(/assets/fonts/Inter/static/Inter_18pt-Light.ttf)}
@font-face { font-display: swap; font-family: ir;   font-style: normal; font-weight: 400; src: url(/assets/fonts/Inter/static/Inter_18pt-Regular.ttf)}
@font-face { font-display: swap; font-family: im;   font-style: normal; font-weight: 500; src: url(/assets/fonts/Inter/static/Inter_18pt-Medium.ttf)}
@font-face { font-display: swap; font-family: imi;  font-style: italic; font-weight: 500; src: url(/assets/fonts/Inter/static/Inter_18pt-MediumItalic.ttf)}
@font-face { font-display: swap; font-family: isb;  font-style: normal; font-weight: 600; src: url(/assets/fonts/Inter/static/Inter_18pt-SemiBold.ttf)}
@font-face { font-display: swap; font-family: ib;   font-style: normal; font-weight: 700; src: url(/assets/fonts/Inter/static/Inter_18pt-Bold.ttf)}
@font-face { font-display: swap; font-family: ieb;  font-style: normal; font-weight: 800; src: url(/assets/fonts/Inter/static/Inter_18pt-ExtraBold.ttf)}
@font-face { font-display: swap; font-family: ibl;  font-style: normal; font-weight: 900; src: url(/assets/fonts/Inter/static/Inter_18pt-Black.ttf)}

html{
    margin: 0;
    padding: 0;
    width: 100vw;
    font-family: ir;
    font-size: 16px;
    color: var(--theme-textColor-1);
    overflow-x: hidden;
    overflow-y: auto;
    cursor: var(--cursord);
}

.preload * {
    transition: none !important;
}

:root {
    --KeyDarkest:           #000000;

    --Key-Warmer-Lightest:  #FBF3EA;
    --Key-Warmer-Lighter:   #DED5CA;
    --Key-Warmer-Neutral:   #A89073;
    --Key-Warmer-Darker:    #4A443E;

    --Key-Colder-Lightest:  #FFFFFF;
    --Key-Colder-Lighter:   #C7D6E1;
    --Key-Colder-Neutral:   #7398B3;
    --Key-Colder-Darker:    #2E4345;
    
    --Red-Lightest:         #FFEDEB;
    --Red-Lighter:          #FFC4BB;
    --Red-VibrantNeutral:   #FF464E;
    --Red-VibrantDarker:    #A0002F;
    --Red-CozyNeutral:      #DD676C;
    --Red-CozyDarker:       #6A1D2C;
    --Red-Darkest:          #4A001D;
    
    --Orange-Lightest:      #FFF2E0;
    --Orange-Lighter:       #FFCA82;
    --Orange-VibrantNeutral:#E37000;
    --Orange-VibrantDarker: #882500;
    --Orange-CozyNeutral:   #B7783A;
    --Orange-CozyDarker:    #663624;
    --Orange-Darkest:       #4D1800;

    --Yellow-Lightest:      #FFF6CC;
    --Yellow-Lighter:       #FFD300;
    --Yellow-VibrantNeutral:#BD9C00;
    --Yellow-VibrantDarker: #6D4200;
    --Yellow-CozyNeutral:   #A28E34;
    --Yellow-CozyDarker:    #5E431A;
    --Yellow-Darkest:       #322904;

    --Green-Lightest:       #E1FCCF;
    --Green-Lighter:        #9DF561;
    --Green-VibrantNeutral: #58AD00;
    --Green-VibrantDarker:  #3B5700;
    --Green-CozyNeutral:    #6DA039;
    --Green-CozyDarker:     #3F4C25;
    --Green-Darkest:        #243B00;

    --Teal-Lightest:        #CCFFE8;
    --Teal-Lighter:         #4AFFAD;
    --Teal-VibrantNeutral:  #00B091;
    --Teal-VibrantDarker:   #005C52;
    --Teal-CozyNeutral:     #43988A;
    --Teal-CozyDarker:      #254743;
    --Teal-Darkest:         #00322E;

    --Blue-Lightest:        #CCF9FF;
    --Blue-Lighter:         #69EDFF;
    --Blue-VibrantNeutral:  #3990FF;
    --Blue-VibrantDarker:   #0047A7;
    --Blue-CozyNeutral:     #5994DF;
    --Blue-CozyDarker:      #274267;
    --Blue-Darkest:         #002854;

    --Purple-Lightest:      #EBF0FF;
    --Purple-Lighter:       #C9D6FF;
    --Purple-VibrantNeutral:#8D78FF;
    --Purple-VibrantDarker: #7100DF;
    --Purple-CozyNeutral:   #9A90D0;
    --Purple-CozyDarker:    #4C2E69;
    --Purple-Darkest:       #271C53;

    --Pink-Lightest:        #FFEBFF;
    --Pink-Lighter:         #FFBCFF;
    --Pink-VibrantNeutral:  #E94CB8;
    --Pink-VibrantDarker:   #86007D;
    --Pink-CozyNeutral:     #BD61A1;
    --Pink-CozyDarker:      #552452;
    --Pink-Darkest:         #420F3A;

    --theme-inventoryNavbuttons:    #000000;
    --theme-background-negative:    #101010;
    --theme-background:             #171717;
    --theme-backgroundLight-1:      #1c1c1c;
    --theme-backgroundLight-2:      #202020;
    --theme-backgroundLight-3:      #2b2b2b;
    --theme-backgroundLight-4:      #2d2d2d;
    --theme-backgroundLight-4_5:    #373737;
    --theme-backgroundLight-5:      #414141;
    --theme-backgroundLight-6:      #444444;
    --theme-backgroundLight-7:      #555555;
    --theme-backgroundLight-8:      #666666;
    --theme-backgroundWhite-1:      #ffffff;
    --theme-backgroundWhite-2:      #e5e5e5;
    --theme-boxShadow:              #000000;
    --theme-textColor-1:            #ffffff;
    --theme-textColor-2:            #e5e5e5;
    --theme-textColor-3:            #cdd0d5;
    --theme-textColor-4:            #cccccc;
    --theme-textColor-5:            #A4A2A2;
    --theme-textColor-6:            #000000;
    --theme-gray-1:                 #868c98;
    --theme-gray-2:                 #525866;
    --theme-currencyCard:           #0b0b0b;
    --boxsh1:                       #000a;
    --boxsh2:                       #0006;
    --boxsh3:                       #0003;
    --theme-blue:                   #202031;


    --cursord:  url(/assets/cursors/default_unicontour.png), auto;
    --cursorp:  url(/assets/cursors/pointer_unicontour.png), pointer;
    --cursort:  url(/assets/cursors/text_unicontour.png), text;
    --cursorg:  url(/assets/cursors/grab_unicontour.png), grab;
    --cursorgb: url(/assets/cursors/grabbing_unicontour.png), grabbing;

    --f-pink-1:     brightness(0) saturate(100%) invert(14%) sepia(99%) saturate(7317%) hue-rotate(300deg) brightness(63%) contrast(104%);
    --f-yellow-1:   brightness(0) saturate(100%) invert(65%) sepia(81%) saturate(2948%) hue-rotate(18deg) brightness(94%) contrast(101%);
    --f-blue-1:     brightness(0) saturate(100%) invert(50%) sepia(22%) saturate(2044%) hue-rotate(180deg) brightness(99%) contrast(105%);
    --f-gray-1:     brightness(0) saturate(100%) invert(58%) sepia(16%) saturate(241%) hue-rotate(182deg) brightness(93%) contrast(85%);
    --f-gray-2:     brightness(0) saturate(100%) invert(29%) sepia(13%) saturate(1088%) hue-rotate(207deg) brightness(98%) contrast(91%);
    --f-white-1:    brightness(0) saturate(100%) invert(98%) sepia(100%) saturate(0%) hue-rotate(331deg) brightness(101%) contrast(101%);
    --f-text-3:     brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(159%) hue-rotate(179deg) brightness(89%) contrast(90%);
  }

:root.light-theme {
    --theme-inventoryNavbuttons:    #ffffff;
    --theme-background:             #eeeeee;
    --theme-backgroundLight-1:      #dddddd;
    --theme-backgroundLight-2:      #d3d3d3;
    --theme-backgroundLight-3:      #cccccc;
    --theme-backgroundLight-4:      #bbbbbb;
    --theme-backgroundLight-4_5:    #b6b6b6;
    --theme-backgroundLight-5:      #aaaaaa;
    --theme-backgroundLight-6:      #a0a0a0;
    --theme-backgroundLight-7:      #999999;
    --theme-backgroundLight-8:      #888888;
    --theme-backgroundWhite-1:      #000000;
    --theme-backgroundWhite-2:      #111111;
    --theme-boxShadow:              #a0a0a0;
    --theme-textColor-1:            #000000;
    --theme-textColor-2:            #222222;
    --theme-textColor-3:            #444444;
    --theme-textColor-4:            #555555;
    --theme-textColor-5:            #666666;
    --theme-textColor-6:            #ffffff;
    --theme-gray-1:                 #868c98;
    --theme-gray-2:                 #9fa7b8;
    --theme-currencyCard:           #ffffff;
    --boxsh1:                       #888a;
    --boxsh2:                       #8886;
    --boxsh3:                       #8883;
    --theme-blue:                   #b1b1d0;

    --f-gray-1:     brightness(0) saturate(100%) invert(58%) sepia(16%) saturate(241%) hue-rotate(182deg) brightness(93%) contrast(85%);
    --f-gray-2:     brightness(0) saturate(100%) invert(75%) sepia(14%) saturate(293%) hue-rotate(183deg) brightness(87%) contrast(88%);
    --f-white-1:    brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(7476%) hue-rotate(216deg) brightness(107%) contrast(95%);
    --f-text-3:     brightness(0) saturate(100%) invert(23%) sepia(0%) saturate(1%) hue-rotate(357deg) brightness(101%) contrast(87%);
}

::selection {
    background: #614766;
    color: #fef;
    text-shadow: 0 3px 5px #f0f8;
}

body{
    background: var(--theme-background);
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    color: var(--theme-textColor-1);
    cursor: var(--cursorp) !important;
}

p{margin: 0;}

b{font-family: ieb;}

.main{
    width: calc(100vw - 273px);
    padding-left: 273px;
    padding-top: 90px;
    margin-bottom: 10vh;
    transition: .4s;
}

.icon{ width: 1.5em; height: 1.5em; transition: .1s; filter: var(--f-white-1);} .icon img{ width: 1.5em; }

body::-webkit-scrollbar { width: 8px; height: 8px; }
body::-webkit-scrollbar-track { border-radius: 8px; }
body::-webkit-scrollbar-thumb { background-color: var(--theme-gray-1);border-radius: 8px; }



@media screen and (max-width: 1047px){
    .main{
        width: calc(-81px + 100vw);
        padding-left: 81px;
    }
}


@media screen and (max-width: 599px){   
    body::-webkit-scrollbar{
        width: 6px;
        height: 6px;
    }
    html{
        overflow: hidden;
    }
    body{
        overflow: hidden;
    }
    .main{
        width: 100vw;
        height: calc(90vh - 80px - 90px);
        padding-left: 0;
        overflow-y: auto;
        padding-bottom: 10vh;
    }

    .main::-webkit-scrollbar { width: 6px; height: 6px; }
    .main::-webkit-scrollbar-track { border-radius: 8px; }
    .main::-webkit-scrollbar-thumb { background-color: var(--theme-gray-1);border-radius: 8px; }
}