@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Roboto&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: aliceblue;
    font-family: "Kanit", sans-serif;
}
body {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.contrainer {
    position: absolute;
    width: 6.5vh;
    height: 25vh;
    bottom: 25vh;
    border: 0.1vh #00d4ff solid;
    background: linear-gradient(150deg, #1f3b4d 0%, #0c1e2b 100%);
    white-space: nowrap;
    border-radius: 1.5vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    left: 1vh;
    scale: 90%;
}

.icon {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 6vh;
    height: 6vh;
    border-radius: 50vh;
    align-items: center;
    justify-content: center;
}
.icon img {
    position: absolute;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 1.5vh #0a3c4d);
}

.progbar {
    margin-top: 1vh;
    position: relative;
    width: 80%;
    height: 65%;
    border-radius: 1.5vh;
    border: 0.1vh #00d4ff solid;
    padding: 0.1vh;
    overflow: hidden;
    background: linear-gradient(150deg, #1f3b4d 0%, #0c1e2b 100%);
}

.load {
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 1.5vh;
    background: linear-gradient(150deg, #00aaff 0%, #006688 100%);
}

.box-time {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 5vh;
    height: 3vh;
    bottom: -2.8vh;
    border-radius: 1vh;
    border: 0.1vh #00aaff solid;
    background: linear-gradient(150deg, #1c4c5f 0%, #0c1e2b 100%);
}

.box-time span {
    font-size: 1vh;
}