.App {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start
}

.container {
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    transform: scale(.6);
    transform-origin: top left;
    padding-left: 2vh;
    padding-top: 2vh;
    opacity: .6
}

.container .characterIndicator {
    display: flex;
    width: calc(.092592592vh * 31);
    height: calc(.092592592vh * 31);
    padding: calc(.092592592vh * 6);
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: calc(.092592592vh * 4);
    border: calc(.092592592vh * 1) solid #f86969;
    background: radial-gradient(62.19% 62.19% at 50% 50%, rgba(248, 105, 105, .25) 0%, rgba(248, 105, 105, .25) 100%)
}

.character {
    width: calc(.092592592vh * 198.162);
    height: calc(.092592592vh * 376);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: calc(.092592592vh * 11)
}

.character .wound {
    transition: all .2s ease-in-out
}

.death {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #090a10 0%, rgba(9, 10, 16, .82) 13.56%, rgba(34, 37, 48, 0) 100%);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat
}

.death .poly {
    background-image: url(../data/poly.svg);
    background-position: center 7vh;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transform: scale(.8);
    padding-top: 6.3vh
}

.death .poly .rotate {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2vh;
    padding-top: 9vh
}

.death .poly .rotate .title {
    width: auto;
    height: auto;
    flex-shrink: 0;
    text-align: center;
    text-shadow: 0px .37vh 2.59vh rgba(248, 105, 105, .55);
    font-family: Gilroy;
    font-size: 4.44vh;
    font-style: normal;
    font-weight: 800;
    line-height: 108.5%;
    background: radial-gradient(84.62% 84.62% at 50% 50%, #f86969 0%, #3d1b1b 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.death .poly .rotate .text {
    height: auto;
    flex-shrink: 0;
    color: #ffffff8c;
    text-align: center;
    font-family: Gilroy;
    font-size: 1.59vh;
    font-style: normal;
    font-weight: 400;
    line-height: 108.5%;
    z-index: 1
}

.death .poly .rotate .text .red {
    color: #f86969
}

.death .poly .rotate .time {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.11vh;
    margin-left: -1vh;
    flex-shrink: 0;
    color: #ffffff40;
    text-align: center;
    font-family: Gilroy;
    font-size: 2.22vh;
    font-style: normal;
    font-weight: 400;
    line-height: 108.5%
}

.death .poly .rotate .time .rectangle {
    width: 3.88vh;
    height: 6.03vh;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: .27vh;
    background: rgba(255, 255, 255, .15);
    border: .1vh solid rgba(255, 255, 255, .15)
}

.death .poly .rotate .time .rectangle .rotateOpposite {
    transform: rotate(3deg)
}

@keyframes move {
    to {
        background-position: -115vh 0
    }
}

.generalStatus {
    width: 33.33vh;
    height: auto;
    flex-shrink: 0;
    border-radius: .37vh;
    border: .09259vh solid rgba(255, 255, 255, .25);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.8vh;
    padding: 1.6vh
}

.generalStatus .text {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start
}

.generalStatus .text .title {
    color: #fff;
    font-family: Gilroy;
    font-size: 1.29vh;
    font-style: normal;
    font-weight: 500;
    line-height: 108.5%
}

.generalStatus .text .description {
    color: #ffffff8c;
    font-family: Gilroy;
    font-size: 1.11vh;
    font-style: normal;
    font-weight: 400;
    line-height: 108.5%
}

.generalStatus .itemsList {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1vh
}

.generalStatus .itemsList .item {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .7vh
}

.generalStatus .itemsList .item .box {
    display: inline-flex;
    height: 2.87vh;
    padding: .55vh;
    align-items: center;
    flex-shrink: 0;
    border-radius: .37vh;
    border: .09259vh solid #f86969;
    background: radial-gradient(62.19% 62.19% at 50% 50%, rgba(248, 105, 105, .25) 0%, rgba(248, 105, 105, .25) 100%)
}

.generalStatus .itemsList .item .box .image {
    width: 1.759vh;
    height: 1.759vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}