.rpgContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}
.rpgBox{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: relative;
    background-color: #00abf0;
    width: 50%;
    padding: 2.5rem;
    border-radius: 15%;
    font-size: 1.5rem;
}
h1{
    text-align: center;
}
.rpgBox h2{
    position: relative;
    color: rgb(166, 255, 0);
    font-weight: bolder;
    text-align: center;
}
.rpgBox input[type="checkbox"]{
    position: relative;
    cursor: pointer;
    margin: 10px;
}
.rpgBox input[type="number"] {
    position: relative;
    border-radius: 10px;
    padding: 5px;
}
.rpgBox button{
    position: relative;
    width: 15rem;
    outline: 1px solid black;
    cursor: pointer;
    font-weight: bold;
}
@media only screen and (max-width: 800px){
    .rpgContainer{
        position: relative;
        top: 10%;
    }
    .rpgBox{
        width: 100%;
        font-size: 0.8rem;
        border-radius: 0;
        padding: 10px;
    }
    .rpgBox button{
        margin: 5px;
    }
    
}