* {
    box-sizing: border-box;
}

#playerDATA {
    background-color: var(--subbgcolor);
    padding: 1dvw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1vw;

    #hero {
        width: 25dvh;
        height: 25dvh;
        border: solid 3px var(--backredcolor);
        border-radius: 100dvh;
        object-fit: cover;
    }

    ul {
        padding-left: 1vw;
        width: 80%;

        li {
            display: flex;
            align-items: center;
            padding: 1dvh;
            font-size: 1.5em;
            border-bottom: dotted 2px var(--lines);
            flex-wrap: wrap;

            p {
                margin-left: 1dvh;
            }
        }
    }
}

#box_1 {
    display: flex;
    h1 {
        min-height: 4dvh;
        width: 100%;
        background: var(--btncolor);
        font-family: "Share Tech Mono", monospace;
        padding-left: 1dvh;
    }
    #status {
        width: 50%;
        border-right: solid 1px var(--lines);

        overflow: hidden;
        ul {
            height: 90%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            li {
                margin: 2dvh;
                background-color: var(--bgcolor);
                border-radius: 1dvw;

                label {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 1vw 0 1vw 1vw;
                    p {
                        padding: 0 1vw 0 0.5vw;
                    }
                }
            }
        }
        background-color: var(--subbgcolor);
    }

    #text_lore {
        width: 50%;
        ul {
            position: relative;
            width: 100%;
            p {
                font-family: arial;
                font-size: 1.5em;
                padding: 1vw;
                white-space: pre-wrap;
                width: 100%;
                min-height: 45dvw;
            }
        }
    }
}

#statusPlayer {
    text-align: center;
    width: 10%;
    position: fixed;
    z-index: 1000;
    top: 3dvh;
    right: 3dvh;
    padding: 0.5dvw;
    border-radius: 10vw;
    background-color: red;
}

@media only screen and (max-width: 1080px) {
    #playerDATA {
        flex-direction: column;
        align-items: center;

        #hero {
            width: 40vw;
            height: auto;
            aspect-ratio: 1 / 1;
        }

        ul li {
            font-size: clamp(1em, 2vw, 1.2em);
        }
    }

    #box_1 {
        flex-direction: column;

        #status {
            width: 100%;
            min-height: 60vh;
            ul {
                justify-content: center;
                align-items: center;
            }
        }
        #text_lore {
            width: 100%;
            min-height: 60vh;
        }
    }
    #statusPlayer {
        width: 35%;
        padding: 2dvw;
    }
}

@media screen and (max-width: 1080px) and (orientation: landscape) {
    #box_1 {
        flex-direction: row;
        flex-wrap: wrap;
    }

    #status {
        width: 48%;
        min-height: 50vh;
        max-height: none;
    }

    #playerDATA #hero {
        width: 40vh;
        height: 40vh;
    }

    #statusPlayer {
        width: 25%;
        padding: 1dvw;
    }
}