@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anuphan&family=Athiti&family=Bai+Jamjuree&family=Bayon&family=Bebas+Neue&family=IBM+Plex+Sans+Thai&family=Kanit:wght@300;400;500&family=Noto+Sans+Thai:wght@300;400&family=Orbitron&family=Prompt&family=Roboto+Condensed&family=Tektur&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anuphan&family=Athiti&family=Bai+Jamjuree&family=Bebas+Neue&family=IBM+Plex+Sans+Thai&family=Kanit:wght@300;400;500&family=Noto+Sans+Thai:wght@300;400;500&family=Orbitron&family=Prompt&family=Roboto+Condensed&family=Tektur&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Prompt:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    user-select: none;
    font-family: "Prompt", sans-serif;
}

body {
    overflow: hidden;
    color: white;
    font-family: 'Kanit', sans-serif;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box {
    position: absolute; 
    width: 45vh;
    height: 20vh;
    left: -6vh;
    bottom: -11.5vh;
    transform: scale(.9);
}

.logo {
    position: fixed;
    height: auto;
    object-fit: cover;
    top: -30%;
    left: -6%;
    transform: scale(.2); 
}

img {
    max-width: 100%;
    max-height: 100%;
}

.cog {
    position: absolute;
    width: 7.5vh;
    height: 7.5vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.25;
}

.spoke {
    position: absolute;
    background-color: rgb(12, 12, 12);
    height: 10vh;
    width: .5vh;
}

.spoke + .spoke {
  transform: rotateZ(45deg);
}

.spoke + .spoke + .spoke {
  transform: rotateZ(-45deg);
}

.spoke + .spoke + .spoke + .spoke {
  transform: rotateZ(90deg);
} 

#thealth {
    position: absolute;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    color: white;
    font-size: 1.4vh;
    font-weight: bold; 
    left: 18px;
    top: 0%;
}

.fa-heart-pulse {
    position: absolute;
    color: white;
    transform: scale(.6);
    left: 2px;
    top: 0;
    bottom: 0;
}

#heal {
    position: absolute;
    display: flex;
    top: 12.3%;
    width: 68%;
    left: 13.5%;
    height: 2.8vh;
    border-radius: 6px 6px 6px 6px;
    overflow: hidden;
    align-items: center;
    background: rgb(80, 80, 80);
    box-shadow: 0 0 1vh inset black;
}

#armor {
    position: absolute;
    width: 68%;
    top: 29%;
    left: 6vh;
    height: .6vh;
    overflow: hidden;
    border-radius: .4vh;
    align-items: center;
    background: rgb(80, 80, 80);
    border-left: 3px solid #ff9000;
    border-right: 3px solid #ff9000;
    box-shadow: 0 0 1vh inset black;
}

#tarmour {
    position: absolute;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    color: white;
    font-size: 1.5vh;
    font-weight: bold; 
    left: 25px;
    top: -1%;
}

.ar-box {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 66%;
    height: 15%;
    width: 8vh;
    margin-right: -5.5vh;
    border-radius: 0.5vh;
    background-color: rgb(15, 15, 15);
    color: white;
    top: -1.5vh;
    padding: 0 .5vh;
    border-left: 3px solid #ff9000;
}

.arlogo {
    position: fixed;
    height: auto;
    object-fit: cover;
    bottom: 50%;
    left: 32.5%;
    transform: scale(.15); 
    color: #fff;
    max-width: 100%;
    max-height: 100%;
    opacity: 0.25;
}

#stamina {
    position: absolute;
    top: 36%;
    width: 30.4vh;
    left: 6vh;
    height: .6vh;
    overflow: hidden;
    border-radius: 5vh;
    background: rgb(80, 80, 80);
    box-shadow: 0 0 1vh inset black;
}

#healtlevel{
    text-align: center;
    position: absolute;
    right: .2vh;
    font-size: 1.3vh;
}

#background {
    position: absolute;
    color: white;
    top: 10%;
    width: 74%;
    height: 25%;
    left: 10%;
    padding: .3vh .25vh;
    
    border-radius: .8vh;
    background: rgba(15, 15, 15);
    border-right: 2px solid #ff9000;
    border-left: 2px solid #ff9000;
}

 

#box {
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0%;
    border-radius: 5px; 
    transition: width 0.3s;
}

#boxArmor {
    width: 50%;
    height: 100%;
    border-radius: 5px; 
    transition: width 0.3s;
}

#boxStamina {
    position: absolute;
    justify-content: center;
    align-items: center;
    margin: auto;

    width: 50%;
    height: 100%;

    border-radius: 5px; 
    border-radius: 10px;
    transition: width 0.3s;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
}

#box {

    opacity: 0.8;
    background: linear-gradient(90deg, rgba(255,64,0,1) 0%, rgba(255,174,0,1) 50%, rgba(255,64,0,1) 100%);
    transition: .5s;
}

#boxStamina {
    border-radius: 5vh;
    background: linear-gradient(90deg, rgba(62,62,62,1) 0%, rgba(182,182,182,1) 50%, rgba(62,62,62,1) 100%);
}

#boxArmor {
    border-radius: 0px 0px 0px 0px;
    background: linear-gradient(90deg, rgba(39,65,255,1) 0%, rgba(39,174,255,1) 25%, rgba(0,164,255,1) 50%, rgba(39,174,255,1) 75%, rgba(39,65,255,1) 100%);

}

.box-id {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 10%;
    height: 15%;
    margin-right: -5.5vh;
    border-radius: 0.5vh;
    background-color: rgb(15, 15, 15);
    color: white;
    font-size: 1.8vh;
    top: -1.5vh;
    padding: 0 .5vh;
    border-left: 3px solid #ff9000;
}

@keyframes animo {  
    50% { opacity: 0; }
}
  
@keyframes animo-stop {  
    50% { opacity: 1; }
}

.flex-container {
    display: flex;
    position: absolute;
    right: 12.7vh;
    bottom: 9.7vh;
}
  
.flex-container > div {
    background: rgba(255, 174, 0);
    margin-left: .3vh;
    width: .5vh;
    height: .5vh;
    border-radius: 10vh;
    text-align: center;
}


.text-time{
    position: absolute;
    background: rgb(53, 53, 53);
    color: rgba(255, 174, 0);
    padding: 0 6vh;
    border-radius: 0.6vh;
    right: 1.9vh;
    bottom: 4.2vh;
    font-size: 1.8vh;
    text-align: center;
}

.Time-Date {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: -5.5vh;
    border-radius: 0.5vh;
    background-color: rgb(15, 15, 15);
    color: white;
    font-size: 1.6vh;
    right: 8vh;
    bottom: 6.2vh;
    padding: 0 .5vh;
    border-left: 3px solid #ff9000;
    border-right: 3px solid #ff9000;
    text-align: center;
}

.all-ct {
    position: absolute;
    display: flex;
    justify-content: space-between;
    top: 15%;
    left: 41vh;
    width: 10vh;
    transform: scale(1.4);
}
  
.data {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 .8vh;
    width: 3vh;
    height: 3vh;
    border-radius: 10vh;
    background-color: rgb(36, 36, 36);
    transform: scale(1.25);
}


:root{
    --color:  rgba(255, 174, 0);
}
  
.poss {
    background: conic-gradient(var(--color) 0%, transparent 0%);
    width: 100%;
    border-radius: 10vh;
    height: 100%;
    transition: .3s;
}
  
  
.hud {
    overflow: hidden;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50.7%;
    left: 49.9%;
    transform: translate(-50%,-50%) ;
    width: 2.45vh;
    height: 2.45vh;
    border-radius: 10vh;
    background-color: rgb(14, 13, 13);
} 
  
.hud i {
    font-size: 1.3vh;
}

#diveX{
    position: absolute;
    left: 6.7vh;
}
  
.interface-status{
    position: relative;
    width: 3.4vh;
    height: 3.4vh;
    margin: .2vh .5vh;
    left: 0vh;
    margin-top: 0vh;
    background-color: #212121;
    border-radius: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1.1);
}

.bg-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 2vh;
    height: 2vh;
    border-radius: 20%;
    background-color: #212121;
}


.fa-solid.fa-brain,
.fa-solid.fa-burger-cheese,
.fa-mask-snorkel{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
    font-size: 1vh;
}
.status-shadow{
    filter: drop-shadow(0vh 0vh 0.05vh #14abfc)
}
.status-shadow2{
    filter: drop-shadow(0vh 0vh 0.05vh #FFFF90)
}
.status-shadow3{
    filter: drop-shadow(0vh 0vh 0.05vh #FF9290)
}

#food{
    stroke:url(#GradientColorfood);
}
#dive{
    stroke:url(#GradientColor2);
}
#stress{
    stroke:url(#GradientColor);
}

#food,
#dive,
#stress{
    fill: none;
    stroke-width: 18.777777777778%;
    stroke-dasharray: 8.29vh;
    stroke-dashoffset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.hungry {
    width: 3.5vh;
    height: 3.5vh;
    background: url(../html/src/status/hungry.png) no-repeat;
    background-position: center center;
    background-size: contain;
    position: absolute;
    right: -2.7vh;
    top: -3.6vh;
    transition: all .5s ease;
    animation: hungryAnim 1s ease infinite;
    display: none;
}


.stress {
    width: 3.5vh;
    height: 3.5vh;
    background: url(../html/src/status/stress.png) no-repeat;
    background-position: center center;
    background-size: contain;
    position: absolute;
    right: -2.7vh;
    top: -3.6vh;
    transition: all .5s ease;
    animation: hungryAnim 1s ease infinite;
    display: none;
}
@keyframes hungryAnim {
    0%, 100%{
        top: -3.6vh;
    }
    50% {
        top: -4.1vh;
    }
}

.target-id {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 10%;
    height: 15%;
    margin-right: -5.5vh;
    border-radius: 1vh;
    background-color: rgb(15, 15, 15);
    color: white;
    font-size: 1.4vh;
    top: -1.5vh;
    padding: 0 .5vh;
    border-left: 3px solid #ff9000;
}

.status-percentage {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: .9vh;
    font-weight: bold;
    top: -1.5vh;

    padding: 0 .5vh;
    background-color: rgb(15, 15, 15);
    margin-right: -5.5vh;
    border-radius: 0.5vh;
}

.voice {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 35px;
    right: 20px;
    height: 4vh;
    width: 12vh;
    border-radius: 10px;
    background-color: #050505;
}

.voice .icon-voice {
    position: absolute;
    left: 5px;
    width: 30px;
    height: 76%;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(266deg, #673b02 -16.83%, #ff9000 122.14%);
}
.voice .icon-voice span {
    font-size: 19px;
}
.voice p:nth-child(2) {
    position: absolute;
    right: 8px;
    top: 3px;
    font-size: 12px;
    color: #fff;
    font-weight: 500;
}


.voice p:nth-child(3) {
    position: absolute;
    right: 8px;
    bottom: 3px;
    font-size: 12px;
    color: #ffffff73;
    font-weight: 500;
}


.date-time {
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    justify-content: center;
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 0 .5px;  
    border-radius: 10px;
    background-color: #050505;
    width: auto; 
    height: auto;  
}

.date-time p:nth-child(1) {
    font-size: 12px;
    color: #fff;
    font-weight: 500;
    margin: 3px 8px 0;  
}

.date-time p:nth-child(2) {
    font-size: 12px;
    color: #fff;
    font-weight: 500;
    margin: 0 8px 3px;  
}