:root {
    font-size: calc((1vh + 1vw) / 2);
    --blueMain: #1F0446;
    --blueLight: #2F0769;
    --blueLighter: #3F098F;
    --blueDark: #180336;
    --blueDarker: #15052C;
    --greenMain: #0F5600;
    --greenLight: #168100;
    --greenLighter: #1FB000;
    --greenDark: #0B4200;
    --greenDarker: #062300;
    --bronzeMain: #675C00;
    --bronzeLight: #9B8B00;
    --bronzeLighter: #D3BE00;
    --bronzeDark: #4F4700;
    --bronzeDarker: #2A2600;
    --redMain: #630009;
    --redLight: #96000E;
    --redLighter: #CC0013;
    --redDark: #4C0007;
    --redDarker: #3F0107;
    --staminaColor: #1B4427;
    --staminaBackground: #12301B;
    --staminaBorder: #051209;
    --healthColor: #5D2D25;
    --healthBackground: #411E18;
    --healthBorder: #190907;
    --manaColor: #2A1D40;
    --manaBackground: #1D132C;
    --manaBorder: #0A0611;
    --xpColor: #5D5725;
    --xpBackground: #413C18;
    --xpBorder: #191707;
    --largeBorderSize: calc((0.5vh + 0.5vw) / 2);
    --mediumBorderSize: calc((0.35vh + 0.35vw) / 2);
    --smallBorderSize: calc((0.25vh + 0.25vw) / 2);
}

body {
    margin: 0;
    box-sizing: border-box;
    background-color: var(--blueDarker);
    height: 100vh;
    width: 100vw;
    padding: 0.5vh 0.5vw 0 0.5vw;

}


button {
    margin-top: 2.5vh;
    margin-bottom: 2.5vh;
    margin-left: 1vw;
    margin-right: 1vw;
    background-color: var(--blueMain);
    color: slategray;
    text-shadow: 2px 2px black;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    border-radius: 10px;
    border-color: var(--blueDarker);
    border-width: var(--largeBorderSize);
    border-style: groove;
}

button:hover {
    transition-duration: 0.1s;
    background-color: var(--blueLight);
    border-color: var(--blueMain);
    padding: 1vh 1vw;
    text-shadow: 0px 0px black 5px;
    margin: 2.25vh 0.5vw;
    cursor: pointer;
}

div {
    font-size: 1.2rem;
    color: gray;
    text-shadow: 1px 1px black;



}

.flexC {
    display: flex;
    flex-direction: column;
}

.flexR {
    display: flex;
    flex-direction: row;
}

.smallPad {
    padding: var(--smallBorderSize);
    margin: var(--smallBorderSize);
}

.mediumPad {
    padding: var(--mediumBorderSize);
    margin: var(--mediumBorderSize);
}

.largePad {
    padding: var(--largeBorderSize);
    margin: var(--largeBorderSize);
}

.playerInfoContainer {
    border: var(--largeBorderSize) groove var(--blueDarker);
    background-color: var(--blueDark);
    width: 20vw;
    height: 97.45vh;


}

#playerInfo {

}

.nameContainer {
    border: var(--mediumBorderSize) groove var(--bronzeDark);
    background-color: var(--blueMain);
    border-radius: var(--largeBorderSize) var(--smallBorderSize);
    padding: 0.5vh 0.5vw;
}

.vitalsContainer {
    border: var(--mediumBorderSize) groove var(--bronzeDark);
    background-color: var(--blueMain);
    border-radius: var(--largeBorderSize) var(--smallBorderSize);
    padding: 0.5vh 0.5vw;
}

.vitalsSeperator {

    border-radius: 6px;
    margin: 0;

}

.vitalsSeperator * {
    text-align: center;
    align-content: center;

    
}
.slash {
    margin-left: -0.25vw;
    margin-right: -0.25vw;
    padding-left: 0.15vw;
    padding-right: 0.15vw;

}

div:hover, .slash:hover {
    cursor: default;
    user-select: none;
}

.vitalsValues {

}

.sloppySeperator {
    margin: auto;

}

.playerEquipmentContainer {
    width: 25%;
    margin: 0.25vh 0.7vw;
}

#playerEquipment {
    margin: 0.25vh -0.15vw;
    height: 100%;
    border-top: var(--largeBorderSize) groove var(--blueDarker);
}

.equipSlot {
    margin: 0.4vh 0.1vw;
    height: 100%;
    width: 100%;
    border: var(--smallBorderSize) groove var(--greenDark);
    border-radius: var(--smallBorderSize);
    background-color: var(--greenDarker);
}

.equipment {
    height: 100%;
    width: 100%;
    padding: var(--smallBorderSize);
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100% 100%;

}

.equipLabel {
    margin: 0;
    padding: var(--smallBorderSize);
    text-align: center;
    border-bottom: var(--smallBorderSize) groove var(--greenDark);
    font-size: 0.9rem;
}

.outerBar {
    border-radius: 25px;
    width: 100%;
    display: flex;
    margin: 0.1vh -0.15vw;
    padding: 0;
}

#xpBorder {
    background-color: var(--xpBackground);
    border: var(--smallBorderSize) solid var(--xpBorder);
    width: 100%;
}

#xpBar {
    width: 25%;
    background-color: var(--xpColor);
    border-radius: var(--smallBorderSize);
    padding: 0.15vh 0;
    
}

#healthBorder {
    background-color: var(--healthBackground);
    border: var(--smallBorderSize) solid var(--xpBorder);
    width: 100%;
}

#healthBar {
    width: 80%;
    background-color: var(--healthColor);
    border-radius: var(--smallBorderSize);
    padding: 0.15vh 0;
}

#manaBorder {
    background-color: var(--manaBackground);
    border: var(--smallBorderSize) solid var(--xpBorder);
    width: 100%;
}

#manaBar {
    width: 80%;
    background-color: var(--manaColor);
    border-radius: var(--smallBorderSize);
    padding: 0.15vh 0;
}

#staminaBorder {
    background-color: var(--staminaBackground);
    border: var(--smallBorderSize) solid var(--xpBorder);
    width: 100%;
}

#staminaBar {
    width: 80%;
    background-color: var(--staminaColor);
    border-radius: var(--smallBorderSize);
    padding: 0.15vh 0;
}

.centerContainer {
    height: 100vh;
    width: 65vw;
    margin-left: -0.3vw;

}


#actionBar {
    height: 10vh;
    width: 100%;
    border: var(--largeBorderSize) groove var(--blueDarker);
    margin: 0;
    background-color: var(--blueDark);
    justify-content: center;
}

#screen {
    border: var(--largeBorderSize) groove var(--blueDarker);
    height: 75.9vh;
    width: 100%;
    margin: 0;
    border-bottom-width: 0;
    border-top-width: 0;
    background-color: #0a0a0a;
}

#screenText {

}

#toolBar {
    border: var(--largeBorderSize) groove var(--blueDarker);
    height: 10vh;
    width: 100%;
    margin: 0;
    background-color: var(--blueDark);
    justify-content: center;
}

.infoContainer {
    border: var(--largeBorderSize) groove var(--blueDarker);
    height: 97.5vh;
    margin-left: 0.5vw;
    width: 12vw;
    background-color: var(--blueDark);
    
    
}

.infoHeader {
    border-bottom: var(--largeBorderSize) groove var(--blueDarker);
    padding: var(--largeBorderSize) var(--mediumBorderSize) calc(var(--largeBorderSize)*2) var(--mediumBorderSize);
    
}

#infoImage {
    border: var(--mediumBorderSize) groove var(--bronzeMain);
    height: 6vh;
    width: 3vw;
    background-color: #222222;
    border-radius: 15px;
    padding: var(--smallBorderSize);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#infoTitle {
    text-align: end;
    margin-left: var(--mediumBorderSize);
    width: 70%;
    height: 100%;
    text-align: center;
    align-content: last baseline;
}

#infoDescription {
    padding: var(--mediumBorderSize);
    margin-top: var(--mediumBorderSize);
}