@import url(https://fonts.googleapis.com/css2?family=Poppins&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@1,600&display=swap);
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
}

#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
}

#statusHud {
    position: absolute;
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
}

#playerHealth, #playerArmour, #playerHunger, #playerThirst, #playerStamina {
    width: 3.6vh;
    margin: 0.2vh 0vh;
    align-self: flex-end;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    box-shadow: 0vh 0vh 0.5vh rgba(0, 0, 0, 0.5);
    color: rgb(255, 255, 255);
}

#hudIcon {
    position: absolute;
    font-size: 75%;
    z-index: 99;
}

#timeHud {
    position: absolute;
    top: 10%;
    left: 81%;
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    font-family: 'Poppins';
    line-height: 1.6vh;
    color: rgb(255, 255, 255);
    /*border: 0.3px solid rgba(255, 255, 255, 0.658); 
    border-radius: 6px; /* Adjusted border radius */
}

#timeHud .icon {
    font-size: 1.3rem; 
    margin-right: 0.5rem; 
    margin-left: 0.5rem; 
}

#timeHud .text {
    display: flex;
    flex-direction: column;
}


#topHud {
    position: absolute;
    top: 3%;
    right: 5%;
    transform: translateX(-50%); /* Center horizontally */
    display: flex;
    align-items: center;
    font-family: 'Poppins';
    line-height: 1.6vh;
    color: rgb(255, 255, 255);
}


#serverLogo {
    width: 7.2vh;
    margin-right: -18.6vw;
}

#idDisplay, #sessionDisplay, #playersDisplay {
    display: flex;
    border-radius: 0.6vh; /* Make the box slightly smaller */
    padding: 0.5vh 1vh; /* Adjust the padding */
    margin-right: 1.5vw; /* Adjust the value to increase space */
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.384); /* Add a subtle glow effect */
}

.upperText { 
    font-size: 1.4vh; 
    text-shadow: 0vh 0vh 0.5vh rgba(0, 0, 0, 0.5); 
    padding: 0.3vh 0.6vh; /* Add more padding to the sides */
}

.lowerText { 
    font-size: 1.25vh; 
    text-align: center; 
    text-shadow: 0vh 0vh 0.5vh rgba(0, 0, 0, 1.0);
    border-radius: 0.5vh; /* Make the corners rounded */
    padding: 0.3vh 0.3vh; /* Adjust the padding for the text */
}


.timeText {
    font-size: 1.3vh; 
    text-shadow: 0vh 0vh 0.5vh rgba(0, 0, 0, 0.5); 
    padding: 0.3vh 0.6vh; /* Add more padding to the sides */
}

.dateText {
    font-size: 1.5vh; 
    font-weight: 550;
    text-shadow: 0vh 0vh 0.5vh rgba(0, 0, 0, 0.5); 
    padding: 0.3vh 0.6vh; /* Add more padding to the sides */
}



#buttonHud {
    position: absolute;
    top: 50%;
    right: 1%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    font-family: 'Poppins';
    color: rgb(255, 255, 255);
}

.buttonWrapper {
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction: row;
    align-self: flex-end;
    align-items: center;
    margin-bottom: 0.7vh;
}


#speedHud {
    position: absolute;
    display: flex;
    bottom: 7%;
    right: 5%;
    width: 15vh;
    height: 15vh;
    color: rgb(255, 255, 255);
}

#speedDisplay {
    position: absolute;
    top: 50%;
    left: 44%;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    color: rgb(255, 255, 255);
    text-align: center;
    line-height: 2.4vh;
    padding: 5px;
    padding-top: 20px;
    border-radius: 10px;
}

#speedText { font-size: 3.7vh }

#speedUnit { 
    text-align: right;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    color: grey;
    font-size: 1.3vh;
}

.fuelDisplay {
    position: absolute;
    left: 100%;
    bottom: 10%;
    font-family: 'Poppins';
    font-size: 1.5vh; /* Adjust the font size as needed */
    text-shadow: 0vh 0vh 0.5vh rgba(0, 0, 0, 0.5);
    color: rgb(255, 255, 255); /* Text color */
    background-color: rgba(0, 0, 0, 0.5); /* Background color */
    padding-left: 2.3vh;
    padding-right: 1.2vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    border-radius: 0.5vh; /* Border radius */
}


#fuelIcon {
    position: absolute;
    left: 104%;
    bottom: 20%;
    font-size: 1.3vh;
    text-shadow: 0vh 0vh 0.5vh rgba(0, 0, 0, 0.5);
}

#speedBottom {
    position: absolute;
    bottom: -18%;
    left: 70%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    align-self: flex-end;
    align-items: center;
}

#beltDisplay {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1.1vh 1.1vh;
    font-size: 1.1vh;
    border-radius: 20%;
    position: relative;
}

#beltDisplay::after {
    content: '';
    position: absolute;
    top: 0.1vh; /* Adjust as needed */
    right: 0.1vh; /* Adjust as needed */
    width: 0.7vh; /* Adjust as needed */
    height: 0.7vh; /* Adjust as needed */
    background-color: var(--belt-color, rgba(191, 72, 67)); /* Use custom property for color */
    border-radius: 50%; /* Make it a circle */
    box-shadow: 5vh 5vh 5.3vh rgba(0, 0, 0, 0.76); /* Add shadow to the circle */
}

#engineDisplay {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1.1vh 1.1vh;
    font-size: 1.1vh;
    border-radius: 20%;
    position: relative;
}

#engineDisplay::after {
    content: '';
    position: absolute;
    top: 0.1vh; /* Adjust as needed */
    right: 0.1vh; /* Adjust as needed */
    width: 0.7vh; /* Adjust as needed */
    height: 0.7vh; /* Adjust as needed */
    background-color: var(--engine-color, rgba(191, 72, 67)); /* Use custom property for color */
    border-radius: 50%; /* Make it a circle */
    box-shadow: 0 0 0.3vh rgba(0, 0, 0, 0.5); /* Add shadow to the circle */
}

#lockDisplay {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1.1vh 1.1vh;
    font-size: 1.1vh;
    border-radius: 20%;
    position: relative;
}

#lockDisplay::after {
    content: '';
    position: absolute;
    top: 0.1vh; /* Adjust as needed */
    right: 0.1vh; /* Adjust as needed */
    width: 0.7vh; /* Adjust as needed */
    height: 0.7vh; /* Adjust as needed */
    background-color: var(--lock-color, rgba(191, 72, 67)); /* Use custom property for color */
    border-radius: 50%; /* Make it a circle */
    box-shadow: 0 0 0.3vh rgba(0, 0, 0, 0.5); /* Add shadow to the circle */
}