/* Overall Submit Button for Forms */
.submit-btn {
    text-align:center;
    margin:10px auto;
    display:block;
}

/* Registration Page Styles */
#registrationform {
    display:block;
}
#registrationform fieldset:first-child label {
    display:block;
    margin:10px;
}
#registrationform fieldset p {
    text-indent:0;
}
#registrationform input:focus:required {
    outline:1px solid var(--yellow);
    box-shadow: 0 0 5px var(--yellow);
}
#registrationform input:focus {
    outline:1px solid var(--blue);
    background-color: var(--transparentbg);
}

/* Character Creation Page Styles */
#charmaker fieldset label {
    display:flex;
    width:100%;
}
#charmaker fieldset {
    border:0;
}
#charmaker fieldset legend {
    text-align:center;
}
/* Labeling for desktop */
@media screen and (min-width:601px) {
    #charmaker fieldset label {
        flex-direction:row;
        justify-content:space-between;
        flex-wrap:nowrap;
        gap:5%;
    }
    #charmaker fieldset label p:nth-of-type(2) {
        text-align:right;
        float:right;
    }
}
/* Labeling for mobile */
@media screen and (max-width:600px) {
    #charmaker fieldset label {
        flex-direction:column;
        justify-content:flex-start;
        flex-wrap:wrap;
    }
}
#charmaker input {
    text-align:center;
    margin:5px auto;
    display:block;
}
#charmaker input:focus:required, #charmaker textarea:focus:required {
    outline:1px solid var(--yellow);
    box-shadow: 0 0 5px var(--yellow);
}
#charmaker input:focus, #charmaker textarea:focus {
    outline:1px solid var(--blue);
    background-color: var(--transparentbg);
}
#charmaker p {
    text-indent:0;
}

/* Character Modification Page Styles */
#chareditor fieldset label {
    display:flex;
    width:100%;
}
/* Labeling for desktop */
@media screen and (min-width:601px) {
    #chareditor fieldset label {
        flex-direction:row;
        justify-content:space-between;
        flex-wrap:nowrap;
    }
    #chareditor fieldset label p:nth-of-type(2) {
        text-align:right;
        float:right;
    }
}
/* Labeling for mobile */
@media screen and (max-width:600px) {
    #chareditor fieldset label {
        flex-direction:column;
        justify-content:flex-start;
        flex-wrap:wrap;
    }
}
#chareditor input {
    text-align:center;
    margin:1px auto;
    display:block;
}
#chareditor input:focus:required, #charmaker textarea:focus:required {
    outline:1px solid var(--yellow);
    box-shadow: 0 0 5px var(--yellow);
}
#chareditor input:focus, #charmaker textarea:focus {
    outline:1px solid var(--blue);
    background-color: var(--transparentbg);
}
#chareditor p {
    text-indent:0;
}