@media screen and (max-width: 480px) {
    html{
        height: fit-content;
        width: 100%;
        overflow-x: hidden;
        display: flex;
    }
    body{
        background-image: url('img/chosen_undead_vertical.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        display: flex;
        align-content: center;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0px;
        height: fit-content;
        width: 100%;
    }
    #totalbox{
        border: 2px solid rgb(191, 191, 191);
        border-radius: 5px;
        background-color: rgba(38, 38, 38, 0.7);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        padding: 10px;
        margin: 10px;
        row-gap: 20px;
    }
    #equipBox1{
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        row-gap: 5px;
        column-gap: 5px;
        border: 0px solid rgb(191, 191, 191);
        border-radius: 5px;
    }
    #equipBox2{
        width: 100%;
        height: fit-content;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        row-gap: 5px;
        column-gap: 5px;
        border: 0px solid rgb(191, 191, 191);
        border-radius: 5px;
    }
    #statBox{
        width: 100%;
        height: fit-content;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        row-gap: 5px;
        column-gap: 5px;
        justify-content: center;
        border: 0px solid rgb(191, 191, 191);
        border-radius: 5px;
        margin-top: 20px;
    }
    #statequipbox{
        width: 100%;
        height: fit-content;
    }
    #spellbox{
        order: 3;
        border: 0px solid rgb(191, 191, 191);
        border-radius: 5px;
        width: 100%;
        height: fit-content;
        display: flex;
        flex-wrap: wrap;
        column-gap: 5px;
        row-gap: 5px;
        justify-content: center;
        align-content: center;
    }
    .box{
        width: calc((96% - 5px) / 2);
        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;
        flex-grow: 1;
        aspect-ratio: 1.5/1;
    }
    .img{
        flex-grow: 1;
        aspect-ratio: 1/1;
        height: 50%;
    }
    .imgammo{
        width: 48px;
        height: 60px;
    }
    .txt{
        margin: 0px;
        height: fit-content;
        color: rgb(191, 191, 191);
        text-align: center;
        font-size: .65em;
    }
    .equipinput{
        width: calc(100% - 10px);
        height: 20%;
        appearance: none;
        background-color: rgb(38, 38, 38);
        color: rgb(191, 191, 191);
        border: 0px;
        border-radius: 5px;
        text-align: center;
        font-size: .6em;
    }
    .statdiv{
        width: 100%;
        height: 40px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        border: 2px solid black;
        column-gap: 5px;
        padding-left: 3px;
        background-color: black;
        color: rgb(191, 191, 191);
        border: 2px solid rgb(191, 191, 191);
        border-radius: 5px;
    }
    .stat{
        width: fit-content;
        height: fit-content;
        display: flex;
        align-items: center;
        column-gap: 5px;
    }
    .add{
        width: fit-content;
        height: fit-content;
        display: flex;
        align-items: center;
        column-gap: 5px;
    }
    .plus{
    width: 30px;
    height: 30px;
    padding: 0px;
    border: 0px;
    margin-left: 5px;
    margin-right: 5px;
}
.minus{
    width: 30px;
    height: 30px;
    padding: 0px;
    border: 0px;
    margin-left: 5px;
}
.plusimg{
    width: 30px;
    height: 30px;
    border: 1px solid rgb(38, 38, 38);
}
.minusimg{
    width: 30px;
    height: 30px;
    border: 1px solid rgb(38, 38, 38);
}
.plu{
    width: 30px;
    height: 30px;
    padding: 0px;
    border: 0px;
    margin-left: 5px;
    margin-right: 5px;
    opacity: 0;
}
.minu{
    width: 30px;
    height: 30px;
    padding: 0px;
    border: 0px;
    margin-left: 5px;
    opacity: 0;
}
.statimg{
    width: 30px;
    height: 30px;
    margin-left: 10px;
}
.statinput{   
    width: 35px;
    background-color: rgb(38, 38, 38);
    border-radius: 5px;
    border: 0px;
}
}
@media screen and (min-width: 570px) and (max-width: 856px) and (orientation: landscape) {
        body{
            
            background-image: url('img/12750cd8ba04c3d472384e1339886da8.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            justify-content: center;
        }
        #totalbox{
            border: 2px solid rgb(191, 191, 191);
            border-radius: 5px;
            background-color: rgba(38, 38, 38, 0.7);
            width: 1841px;
            height: 850px;
            display: flex;
            justify-content: center;
            flex-wrap: nowrap;
            column-gap: 20px;
            padding-top: 20px;
        }
        #equipBox1{
            width: 476px;
            height: 662px;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            row-gap: 10px;
            column-gap: 10px;
            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);
        }
        #equipBox2{
            width: 476px;
            height: 499px;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            row-gap: 10px;
            column-gap: 10px;
            border: 2px solid rgb(191, 191, 191);
            background-color: rgb(38, 38, 38);
            border-radius: 5px;
            background-color: rgba(38, 38, 38, 0.7);
        
        }
        #statBox{
            width: 567px;
            height: 245px;
            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);
        }
        #spellbox{
            order: 3;
            border: 2px solid rgb(191, 191, 191);
            border-radius: 5px;
            background-color: rgb(38, 38, 38);
            width: 709px;
            height: 662px;
            display: flex;
            flex-wrap: wrap;
            column-gap: 10px;
            row-gap: 10px;
            justify-content: center;
            align-content: center;
            background-color: rgba(38, 38, 38, 0.7);
        }
        #statequipbox{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: flex-start;
            order: 2;
            width: 570px;
            opacity: 1;
        }
        .box{
            width: 220px;
            height: 150px;
            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;
        }
        .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: 270px;
            height: 40px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
            border: 2px solid black;
            column-gap: 5px;
            padding-left: 3px;
            background-color: black;
            color: rgb(191, 191, 191);
            border: 2px solid rgb(191, 191, 191);
            border-radius: 5px;
        }
        .stat{
            width: fit-content;
            height: fit-content;
            display: flex;
            align-items: center;
            column-gap: 5px;
        }
        .add{
            width: fit-content;
            height: fit-content;
            display: flex;
            align-items: center;
            column-gap: 5px;
        }
        .plu{
            width: 30px;
            height: 30px;
            padding: 0px;
            border: 0px;
            margin-left: 5px;
            margin-right: 5px;
            opacity: 0;
        }
        .minu{
            width: 30px;
            height: 30px;
            padding: 0px;
            border: 0px;
            margin-left: 5px;
            opacity: 0;
        }
        .plus{
            width: 30px;
            height: 30px;
            padding: 0px;
            border: 0px;
            margin-left: 5px;
        }
        .minus{
            width: 30px;
            height: 30px;
            padding: 0px;
            border: 0px;
            margin-left: 5px;
        }
        .plusimg{
            width: 30px;
            height: 30px;
            border: 1px solid rgb(38, 38, 38);
        }
        .minusimg{
            width: 30px;
            height: 30px;
            border: 1px solid rgb(38, 38, 38);
        }
        .statimg{
            width: 30px;
            height: 30px;
        }
        .statinput{   
            width: 35px;
            background-color: rgb(38, 38, 38);
            border-radius: 5px;
            border: 0px;
        }
        label{
            width: 100px;
        }
        input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }
}