@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/nekst');
@import url('https://fonts.cdnfonts.com/css/agency-fb');
@import url('https://gistcdn.githack.com/mfd/09b70eb47474836f25a21660282ce0fd/raw/e06a670afcb2b861ed2ac4a1ef752d062ef6b46b/Gilroy.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    --clr-white: rgba(255, 255, 255, 1);

    --clr-progressbar-bg: linear-gradient(to right, rgba(0, 0, 0, .75) 0%, rgba(73, 0, 0, 0) 70.63%);
    --clr-progressbar-item: rgba(255, 255, 255, .05);
    --clr-progressbar-active: #ff9100;

    --main-color: #ff9100;
    --secondary-color: #ff9100;
    --second-color: #ff9100;
    --hud-2-main-color: #ff9100;
    --hud-2-secondary-color: #ff9100;

    --announce-2-color: #ff9100;
    --announce-2-bg-1: #ff9100;
    --announce-2-bg-2: #ff9100;
    --announce-2-bg-3: #ff9100;
    --announce-2-bg-4: #ff9100;
    --announce-2-bg-5: #ff9100;
    --announce-2-bg-6: #ff9100;

    --food-hud-1-hunger-bg: linear-gradient(90deg, #C86E1B 0%, #FF9635 100%);
    --food-hud-1-hunger-boxshadow: #F47704;
    --food-hud-1-thirst-bg: linear-gradient(180deg, #04A4FD 0%, #0357E1 100%);
    --food-hud-1-thirst-boxshadow: #048CF4;
    
    --food-hud-23-hunger-color: #FF4646;
    --food-hud-23-thirst-color: #0274ED;

    --food-hud-4-hunger-color: #FFA725;
    --food-hud-4-hunger-icon-1: #FFA725;
    --food-hud-4-hunger-icon-2: #BF7F21;
    --food-hud-4-thirst-color: #027EC3;
    --food-hud-4-thirst-icon-1: #03A4FD;
    --food-hud-4-thirst-icon-2: #0288D2;
    --food-hud-4-thirst-icon-3: #0072B0;

    --food-hud-5-hunger-color: #FFA725;
    --food-hud-5-hunger-icon-1: #3D2706;
    --food-hud-5-hunger-icon-2: #553301;
    --food-hud-5-hunger-icon-3: #FFC736;
    --food-hud-5-thirst-color: #03A4FD;
    --food-hud-5-thirst-icon-1: #032D44;
    --food-hud-5-thirst-icon-2: #011E2E;
    --food-hud-5-thirst-icon-3: #03A4FD;

    --clr-helpnotify-text: #d93939;
    --clr-helpnotify-circle-bg: #ff9100;

    --notify-1-success-color: #b0fa36;
    --notify-1-info-color: #faa536;
    --notify-1-error-color: #FF4545;

    --notify-2-success-color: #23FF6E;
    --notify-2-success-bg-1: #24FF00;
    --notify-2-success-bg-2: #00FF1A;
    --notify-2-success-bg-3: #00FF19;

    --notify-2-info-color: #FFBE5E;
    --notify-2-info-bg-1: #CB8B4F;
    --notify-2-info-bg-2: #FF9900;
    --notify-2-info-bg-3: #FF7A00;

    --notify-2-error-color: #F33537;
    --notify-2-error-bg-1: #CB4F4F;
    --notify-2-error-bg-2: #353535;
    --notify-2-error-bg-3: #FF0000;

    --notify-2-teamchat-color: #fd0303;
    --notify-2-teamchat-bg-1: #ff0000;
    --notify-2-teamchat-bg-2: #ff0000;
    --notify-2-teamchat-bg-3: #ff0000;

    --speedo-v1-speed: #ff0000;
    --speedo-v1-fuel: #3BD738;
    --speedo-v1-fuel-shadow: rgba(59, 215, 56, 0.75);

    --speedo-v2-fuel: #42FF6B;
    --speedo-v2-speed-lbg: linear-gradient(to bottom, #ed1502ad, #ed0202);
    --speedo-v2-speed-shadow: #ed0202;
    --speedo-v2-speed-unactive: rgba(237, 2, 2, 0.2);
    --speedo-v2-gas-unactive: rgba(252, 78, 81, .2);
    --speedo-v2-gas-active: #FC4E51;

    --speedo-v3-stripes-bg: rgba(207, 131, 31, 0.2);
    --speedo-v3-stripes-active: #ff9100;
    --speedo-v3-stripes-end-bg: rgba(252, 78, 81, .2);
    --speedo-v3-stripes-end-active: #FC4E51;
    --speedo-v3-fuel: #eddd02;
    --speedo-v3-icon: #e55757;
    --speedo-v3-icon-active: #A0E557;

    --speedo-v4-icon-bg: #F55E5E;
    --speedo-v4-icon-shadow: rgba(245, 94, 94, 0.25);
    --speedo-v4-icon-active-bg: #4FFF40;
    --speedo-v4-icon-active-shadow: rgba(79, 255, 64, 0.25);
    --speedo-v4-rpm: #402DB8;
    --speedo-v4-fuel: #F5F433;

    --speedo-v5-stripe: #fd0303;
    --speedo-v5-plate-lbg: linear-gradient(to right, rgba(0, 0, 0, 0), #fd0303af);
    --speedo-v5-shadow: #fd030333;
    --speedo-v5-speed: -webkit-linear-gradient(#e40000, #ae0000);
    --speedo-v5-speed-shadow: #bf000055;
    --speedo-v5-fuel: #b0fa36;
    --speedo-v5-fuel-shadow: #88fd0348;
    --speedo-v5-item-lbg: linear-gradient(to right, rgba(0, 0, 0, 0), #fd0303af);
    --speedo-v5-item-icon: radial-gradient(#d20202 20%, #230000 120%);
    
    --server-v1-top-id: #b0fa36;
    --server-v1-money-lbg: linear-gradient(270deg, rgba(175, 255, 72, 0.5) 0%, rgba(0, 117, 61, 0) 90.33%);
    --server-v1-money-lbg-red: linear-gradient(270deg, rgba(255, 70, 70, 0.5) 0%, rgba(0, 117, 61, 0) 90.33%);
    --server-v1-money-text: #b0fa36;
    --server-v1-money-text-red: #fa3636;
    --server-v1-ammo-color: #AFFF48;

    --server-v2-money: #ACE760;
    --server-v2-black-money: #e76060;
    --server-v2-stripe: #fd0b03;
    --server-v2-id-stripe-1: #fc3636;
    --server-v2-id-stripe-2: #d71b02;

    --server-mic-radio-active: #b0fa36;
    --server-mic-mute: #fa3636;

    --settings-main-color: #d93939;
    --settings-bg: #d9393938;
    --settings-color: #ff7676;
    --settings-checkbox: #d93939be;
    --settings-checkbox-right: #d946391c;
    --settings-close-btn: radial-gradient(#b6123b5b 20%,#FF275B 100%);
    --settings-close-btn-hover: #FF275B;
    --settings-bg-1: #140404;
    --settings-bg-2: #d94c39;
    
    --lifeinvader-header-lbg: linear-gradient(to right, rgb(185, 57, 57), rgba(255, 255, 255, 0));
    --lifeinvader-header-bottom-lbg: linear-gradient(to right, #BF2A2A, rgba(255, 255, 255, 0));
    --lifeinvader-message-lbg: linear-gradient(to right, rgba(0, 0, 0, .55), rgba(255, 255, 255, 0));
    --lifeinvader-message-border-top: rgba(254, 70, 70, 1);

    --chat-suggestion-help: #ff0000;

    --ff-rad: 'Rajdhani', sans-serif;
    --ff-agency: 'Agency FB', sans-serif;
    --ff-gilroy: 'Gilroy', sans-serif;
    --ff-inter: 'Inter', sans-serif;

    --piv: 0.09259259259259259vh;
}

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
}

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--ff-rad);
    font-weight: 600;
    font-size: 1.2vh;
    color: var(--clr-white);
}

.main__hex_hud-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}