@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bayon&display=swap');
@font-face {
    font-family: sport;
    src: url(./img/sport.ttf);
}
@font-face {
    font-family: bigover;
    src: url(./img/bigover.ttf);
}
  
body{
    margin: 0;
    padding: 0;
    font-family: 'Kanit';
    user-select: none;
    overflow: hidden;
}
/* ######################################################### */
    .container{
        display: none;
        position: absolute;
        left: 50%;
        transform: translateX(-50%) scale(0.8);
        width: 61vh;
        height: 17.41vh;
        bottom: -2vh;
    
    }


    .bg-overflow-left{
        position: absolute;
        width: 20.28vh;
        height: 15.37vh;
    }
    .bg-left-box{
        position: absolute;
        width: 21.28vh;
        height: 15.37vh;
        overflow: hidden;
    }
    .bg-left{
        position: absolute;
        left: 20vh;
        bottom: -10vh;
        width: 22.28vh;
        height: 30.4vh;
        /* background: url(./img/bg-left_2.png) center/contain no-repeat; */
        transition: 1s;
    }
    .rpm-left-bg{
        position: absolute;
        width: 20.19vh;
        height: 10.83vh;
        /* background: url(./img/rpm-left-bg.png) center/contain no-repeat; */
        /* bottom: -1.1vh;
        left: -1.5vh; */
        z-index: -1;
        bottom: 1.1vh;
        left: 10.5vh;
        scale: 0.9;
        display: none;
        transition: .5s;
    }
    .rpm-left{
        position: absolute;
        width: 100%;
        height: 50%;
        bottom: 0;
        /* background: url(./img/rpm-left-prog.png) bottom/cover no-repeat; */
        transition: .4s;
    }







    
    .bg-overflow-right{
        position: absolute;
        width: 20.28vh;
        height: 15.37vh;
        right: 0;
    }
    .bg-right-box{
        position: absolute;
        width: 21.28vh;
        height: 15.37vh;
        right: 0;
        overflow: hidden;
    }
    .bg-right{
        position: absolute;
        right: 20vh;
        width: 20.28vh;
        height: 15.37vh;
        /* background: url(./img/bg-right_2.png) center/contain no-repeat; */
        transition: 1s;
    }
    .rpm-right-bg{
        position: absolute;
        width: 20.19vh;
        height: 10.83vh;
        /* background: url(./img/rpm-right-bg.png) center/contain no-repeat; */
        /* bottom: -1.1vh;
        right: -1.6vh; */
        z-index: -1;
        bottom: 1.1vh;
        right: 1.4vh;
        scale: 0.9;
        display: none;
        transition: .5s;
    }
    .rpm-right{
        position: absolute;
        width: 100%;
        height: 50%;
        bottom: 0;
        /* background: url(./img/rpm-right-prog.png) bottom/cover no-repeat; */
        transition: .4s;
    }


    .bg-main{
        position: absolute;
        left: 50%;
        bottom: -5%;
        transform: translateX(-50%);
        width: 58.85vh;
        height: 150%;
        background: url(./img/bg-main_3.png) center/contain no-repeat;
        z-index: -1;
    }

    .mid-bg{
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .panel-box-asset{
        position: absolute;
        left: 50%;
     
        transform: translateX(-50%);
        bottom:2.5vh;
        width: 7vh;
        height: 2vh;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .brake-box,
    .belt-box,
    .carlock-box{
        position: relative;
        width: 2.5vh;
        height: 2.5vh;
        fill: white;
        display: flex;
        align-items: center;
    }

    .fuel-engine-box{
        position: absolute;
        left: 50%;
        top: 66.2%;
        transform: translate(-50%,-50%);
        width: 49.8vh;
        height: 6vh;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .engine-bg{
        position: relative;
        width: 2.04vh;
        height: 7vh;
        background: url(./img/engine-bg.png) center/contain no-repeat;
    }
    .fuel-bg{
        position: relative;
        width: 2.04vh;
        height: 7vh;
        background: url(./img/fuel-bg.png) center/contain no-repeat;
    }

    .fuel{
        position: absolute;
        width: 100%;
        height: 50%;
        transition: .4s;
        bottom: 0;
        background: url(./img/fuel-prog.png) bottom/cover no-repeat;
    }
    .engine{
        position: absolute;
        width: 100%;
        height: 50%;
        transition: .4s;
        bottom: 0;
        background: url(./img/engine-prog.png) bottom/cover no-repeat;
    }
    .engine-bg .text-top{
        position: absolute;
        font-family: 'Kanit';
        font-size: 1.6vh;
        color: white;
        top: -2.0vh;
        left: 0.9vh;
    }
    .fuel-bg .text-top{
        position: absolute;
        font-family: 'Kanit';
        font-size: 1.6vh;
        color: white;
        top: -2.0vh;
        right: 0.9vh;
    }

    .engine-bg .text-bottom{
        position: absolute;
        font-family: 'Kanit';
        font-size: 1.6vh;
        color: rgb(255, 0, 0);
        bottom: -0.6vh;
        right: -1.5vh;
    }
    .fuel-bg .text-bottom{
        position: absolute;
        font-family: 'Kanit';
        font-size: 1.6vh;
        color: rgb(255, 0, 0);
        bottom: -0.6vh;
        left: -1.5vh;
    }

    .engine-icon{
        position: absolute;
         top: 85%;
        transform: translateY(-50%);
        right: -2vh;
        width: 2vh;
        height: 2vh;
        background: url(./img/engine.svg) center/contain no-repeat;
    }
    .fuel-icon{
        position: absolute;
        top: 85%;
        transform: translateY(-50%);
        left: -2vh;
        width: 1.8vh;
        height: 1.8vh;
        background: url(./img/fuel.svg) center/contain no-repeat;
    }
    .rpm-text{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 4.3vh;
        white-space: nowrap;
        color: white;
        font-family: 'Kanit';
        font-size: 0.7vh;
        letter-spacing: 0.2vh;
    }
    .rpm-text span{
        color: #FF008C;
    }

    .logo{
        display: none;
        position: absolute;
        width: 8.52vh;
        height: 8.33vh;
        background: url(./img/logo.png) center/contain no-repeat;
        left: 50%;
        top: 60%;
        transform: translate(-50%,-50%) scale(1);
        transition: 1s;
        /* top: 8%;
        transform: translate(-50%,-50%) scale(0.7); */
    }
    .server-text{
        display: none;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 13.06vh;
        height: 4.17vh;
        background: url(./img/ready.png) center/contain no-repeat;
    }
    .speed{
        /* 000 */
        position: absolute;
        white-space: nowrap;
        font-family: 'Bayon';
        font-style: normal;
        font-weight: 400;
        font-size: 5.5vh;
        line-height: 8.06vh;
        /* identical to box height */
        display: flex;
        align-items: center;

        left: 37%;
        top: 50%;
        transform: translate(-50%,-50%);
        color: #FFFFFF;


    }
    .speed-text{
    position: absolute;
    width: 4.81vh;
    height: 2.04vh;
    white-space: nowrap;
    font-family: 'Kanit';
    font-weight: 600;
    font-size: 1.39vh;
    line-height: 2.04vh;
    display: flex;
    align-items: center;
    letter-spacing: 0.09em;
    left: 38%;
    top: 71%;
    transform: translate(-50%,-50%);
    color: #FFFFFF;


    }

    .icon-active{
        fill: #00AAFF;
    }
/* ######################################################### */
/* ######################################################### */
/* ######################################################### */
/* ######################################################### */
/* ######################################################### */
.vehicle-box{
    position: absolute;
    left: 50%;
    top: 57%;
    transform: translate(-50%,-50%);
    width: 60%;
    height: 9vh;
    bottom: 0vh;
}
.veh-box{
    position: absolute;
    display: none;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background-image: url(./img/bike.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.car-box,
.moto-box{
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
}


/* ######################################################### */
/* ######################################################### */
/* ######################################################### */
/* ######################################################### */
.gear-text{
    position: absolute;
    left: 70%;
    top: 4.3vh;
    transform: translateX(-50%);
    color: #FFFFFF;
    font-size: 1.5vh;
    letter-spacing: 0.1vh;
    font-family: sport;
    opacity: 0.7;
}
.gear-box-overflow{
    position: absolute;
    top: 35%;
    transform: translateX(-50%) rotate(40deg) scale(1.3);
    left: 58%;
    width: 10vh;
    height: 5vh;
    overflow: hidden;
    scale: 1;
}
.gear-box{
    position: absolute;
    width: fit-content;
    height: 5vh;
    left: 0vh;
    display: flex;
    align-items:center;
    justify-content: left;
    transition: .4s;
    overflow: hidden;
}
.gear-num-p,
.gear-num-r,
.gear-num-n,
.gear-num-1,
.gear-num-2,
.gear-num-3,
.gear-num-4,
.gear-num-5,
.gear-num-6{
    position: relative;
    width: 3.35vh;
    height: 70%;
    transform: skewX(0deg) rotate(-40deg);
    display: flex;
    align-items:center;
    justify-content: center;
    font-family: sport;
    color: rgba(255, 255, 255, 0.288);
    font-size: 2vh;
    text-shadow: 0 0 0.8vh black;
    transition: .4s;
}
.gearactive{
    font-size: 4.5vh;
    align-items: center;
    width: 3.35vh;
    color: #ffffff;
    filter: drop-shadow(0 0 0.5vh #FF0084);
}
.gear-border{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 3vh;
    height: 70%;
    border: 0.1vh solid white;
    border-radius: 0.5vh;
}
/* ######################################################### */
/* ######################################################### */
/* ######################################################### */
/* ######################################################### */
/* ######################################################### */
/* ######################################################### */
.leftop-panel{
    position: absolute;
    left: 0;
    top: 0;
    width: 20vh;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.righttop-panel{
    position: absolute;
    right: 0;
    top: 0;
    width: 20vh;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.leftbottom-panel{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20vh;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.rightbottom-panel{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20vh;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.top-panel{
    display: none;
    position: absolute;
    bottom: 22.5vh;
    left: 50%;
    transform: translateX(-50%);
    width: 50vh;
    height: 10vh;
}

.item-box-engine{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 8vh;
    height: 8vh;
    border-radius: 0.5vh;
    background-color: #1E1E1E;
    border-bottom: 0.2vh solid rgb(133, 133, 133);
    transition: .2s;
}
.item-box-engine:hover,
.item-box:hover{
    filter: brightness(1.3);
}

.item-active{
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translate(-50%,-50%);
    width: 70%;
    height: 0.4vh;
    border-radius: 0.5vh;
}

.item-icon{
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%,-50%);
    width: 80%;
    height: 65%;
    background-image: url(./img/ignition.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.item-box{
    position: relative;
    width: 4vh;
    height: 4vh;
    border-radius: 0.5vh;
    background-color: #1E1E1E;
    border-bottom: 0.2vh solid rgb(133, 133, 133);
    transition: .2s;
}
.item-icon-engine{
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%,-50%);
    width: 80%;
    height: 65%;
    background-image: url(./img/ignition.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.frontHood,
.windowFrontLeft,
.doorFrontLeft,
.seatFrontLeft,
.seatFrontRight,
.doorFrontRight,
.windowFrontRight,
.interiorLight,
.rearHood,
.windowRearLeft,
.doorRearLeft,
.seatRearLeft,
.seatRearRight,
.doorRearRight,
.windowRearRight,
.rearHood2,
.ignition{
    transition: .4s;
    background-color: rgb(75, 75, 75);
}
/* ######################################################### */
/* ######################################################### */
/* ######################################################### */
/* ######################################################### */
/* ######################################################### */

.shadow{
    filter: drop-shadow(0 1.3vh 0.5vh rgba(0, 0, 0, 0.500));
}
.turnleft{
    transform: perspective(37.04vh) rotateY(1deg) skewY(0deg);
}
.turnright{
    transform: perspective(37.04vh) rotateY(-1deg) skewY(0deg);
}
.mid{
    transform: perspective(37.04vh) rotateY(0deg) skewY(0deg);
}
.turn{
    position: absolute;
    width: 100%;
    height: 100%;
    transition: 0.7s;
}
.backlight{
    transition: .2s;
}
.blink-anim {
    animation: blink 1s infinite ease-in-out;
}
.glow{
    filter: drop-shadow(0vh 0vh 0.2vh red);
}

.gear-change{
    animation: blink 0.15s infinite ;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}