* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    pointer-events: none;
}

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    flex-shrink: 0;
    font-family: "Poppins", serif;
}

.ref {
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: -1;

    background-image: url(https://cdn.discordapp.com/attachments/1333127414431092806/1333189077750779964/image.png?ex=6797fc95&is=6796ab15&hm=b835a049e682086b33a1042738251cc7bf848df37d664c9cfc15d835bd9704dd&);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

.box {
    scale: 0.8;

    position: absolute;
    width: 25vh;
    height: 8vh;
    bottom: 20.5vh;
    right: -50vh;
    /* background: #131313; */
    background: #1d1d1d;
    border-radius: 1vh;

    transition: right .1s ease;
}

.box.active {
    right: -0.6vh;
    bottom: 15.2vh;
}

.box-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.box-image {
    position: absolute;
    width: 9vh;
    height: 9vh;
    top: -1.8vh;
    left: -1.9vh;
    display: flex;
}

.box-image img {
    width: 100%;
    margin: auto;
    scale: 1.2;
}

.box-text {
    position: absolute;
    width: 16vh;
    height: 8vh;
    right: 1.4vh;
}

.box-text .head,
.box-text .status{
    display: flex;
    width: 16vh;
    color: #fff;
    justify-content: center;
    align-content: center;
}

.box-text .head {
    margin-top: .7vh;
    font-weight: 700;
    font-size: 2.6vh;
}

.box-text .status {
    margin-top: -.5vh;
    font-weight: 600;
    font-size: 1.8vh;
}

.box-text .head p:nth-child(2) {
    color: #35CDFF;
}
.box-text .status p:nth-child(2) {
    color: #35CDFF;
}

.box-text .status p {
    display: none;

}
.box-text .status p:nth-child(3) {
    display: flex;
    color: #35CDFF;
}

.box-text .status.hide p {
    display: flex;
}
.box-text .status.hide p:nth-child(3) {
    display: none;
}

.bar {
    position: absolute;
    width: .58vh;
    height: 4.5vh;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: #35CDFF;
    box-shadow: 0 0 0.5vh .05vh #35CDFF;
    border-radius: .2vh 0 0 .2vh;
}