@media screen and (min-width: 860px) {
    html{
        width:100%;
        height: 100%;
    }
body{
    background-image: url('img/chosen_undead_horizontal.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0px;
}
#totalbox{
    border: 2px solid rgb(191, 191, 191);
    border-radius: 5px;
    background-color: rgba(38, 38, 38, 0.7);
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    column-gap: 1%;
    margin: 10px;
}
#equipBox1{
    width: 23.5%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
    row-gap: 1.4%;
    column-gap: 2%;
    border: 2px solid rgb(191, 191, 191);
    background-color: rgb(38, 38, 38);
    border-radius: 5px;
    order: 1;
    background-color: rgba(38, 38, 38, 0.7);
    margin-top: 20px;
    aspect-ratio: 1/1.4;
    padding: 0.657% 0.459%;
}
#equipBox2{
    width: 84.5%;
    height: 485px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    row-gap: 1.4%;
    column-gap: 2%;
    border: 2px solid rgb(191, 191, 191);
    background-color: rgb(38, 38, 38);
    border-radius: 5px;
    background-color: rgba(38, 38, 38, 0.7);
    padding: 2% 1.4%;
}
#statBox{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    row-gap: 5px;
    column-gap: 10px;
    justify-content: center;
    margin-top: 30px;
    border: 2px solid rgb(191, 191, 191);
    background-color: rgb(38, 38, 38);
    border-radius: 5px;
    background-color: rgba(38, 38, 38, 0.7);
    padding: 0.45% 0.314%;
}
#spellbox{
    order: 3;
    border: 2px solid rgb(191, 191, 191);
    border-radius: 5px;
    background-color: rgb(38, 38, 38);
    width: 35.5%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    column-gap: 2%;
    row-gap: 2%;
    justify-content: center;
    align-content: center;
    background-color: rgba(38, 38, 38, 0.7);
    margin-top: 20px;
    padding: 0.497% 0.71%;
    aspect-ratio: 1/0.93;
}
#statequipbox{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    order: 2;
    width: 28.5%;
    height: fit-content;
    margin-top: 20px;
    aspect-ratio: 1/1.5;
}
.box1{
    width: 46.7%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 2px solid rgb(191, 191, 191);
    background-color: black;
    border-radius: 5px;
    aspect-ratio: 1.47/1;
}
.box2{
    width: 46.7%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 2px solid rgb(191, 191, 191);
    background-color: black;
    border-radius: 5px;
    aspect-ratio: 1.47/1;
}
.box3{
    width: 30.8%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 2px solid rgb(191, 191, 191);
    background-color: black;
    border-radius: 5px;
    aspect-ratio: 1.47/1;
}
.img{
    width: 100px;
    height: 98.8px;
}
.imgammo{
    width: 80px;
    height: 98.8px;
}
.txt{
    margin: 0px;
    height: 20px;
    color: rgb(191, 191, 191);
    text-align: center;
}
.equipinput{
    height: 18.19px;
    appearance: none;
    background-color: rgb(38, 38, 38);
    color: rgb(191, 191, 191);
    border: 0px;
    border-radius: 5px;
    text-align: center;
}
.statdiv{
    width: 45%;
    height: fit-content;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    border: 2px solid black;
    padding-left: 3px;
    background-color: black;
    color: rgb(191, 191, 191);
    border: 2px solid rgb(191, 191, 191);
    border-radius: 5px;
}
.stat{
    width: 50%;
    aspect-ratio: 4.28/1;
    display: flex;
    align-items: center;
    column-gap: 3%;
}
.add{
    width: 50%;
    aspect-ratio: 4.28/1;
    display: flex;
    align-items: center;
    column-gap: 5%;
}
.plu{
    aspect-ratio: 1/1;
    height: 87.5%;
    padding: 0px;
    border: 0px;
    margin-left: 5px;
    visibility: hidden;
}
.minu{
    aspect-ratio: 1/1;
    height: 87.5%;
    padding: 0px;
    border: 0px;
    margin-left: 5px;
    visibility: hidden;
}
.plus{
    aspect-ratio: 1/1;
    height: 87.5%;
    padding: 0px;
    border: 0px;
    margin-left: 5px;
    background-image: url('img/plus_icon.png');
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 5%;
}
.minus{
    aspect-ratio: 1/1;
    height: 87.5%;
    padding: 0px;
    border: 0px;
    margin-left: 5px;
    background-image: url('img/minus_icon.png');
    background-repeat: no-repeat;
    background-size: cover;
}
.plusimg{
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    border: 1px solid rgb(38, 38, 38);
}
.minusimg{
    width: 100%;
    height: 100%;
    object-fit: fill;
    border: 1px solid rgb(38, 38, 38);
}
.statimg{
    aspect-ratio: 1/1;
    height: 100%;
}
.statinput{   
    aspect-ratio: 2.856/1;
    width: 40%;
    background-color: rgb(38, 38, 38);
    border-radius: 5px;
    border: 0px;
    color: azure;
    padding: 0px;
}
label{
    width: 73%;
    font-stretch: narrower;
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
}