#profile .title-background { background-image: url(/static/images/profile.webp); }
#profile .title-background{ background-position: center top; background-size: 100% auto; height: 200px; }
#profile .title-background .card-body { padding-top: 128px; }
#profile .title-background .card-body h1 { background-color: rgb(93 72 110 / 80%); width: 50%; margin-left: 49%; margin-right: 1%; padding: 20px; max-width: 700px; border-radius: 10px; color: #fff; text-align: right; } 
#profile .profile-form { width: 50%; margin: 0 auto; padding-top: 5%; padding-bottom: 5%; }
#profile .profile-form .message { border: 1px solid #c3e6cb; margin: 0 auto; padding: 25px; border-radius: 10px; margin-bottom: 3.75%; color: #155724; background-color: #d4edda; }
#profile .profile-form .form-control { padding: 10px; margin-bottom: 10px; }
#profile .profile-form .content-button { text-align: end; }
#profile .profile-form .content-button .btn-outline-light { background-color: rgb(65 18 104 / 80%); border: 1px solid #251632; color: #fff; height: 70px; font-size: 26px; /*width: 20%*/; min-width: 100px; }   
#profile .profile-form .content-button .btn-outline-light:hover { background-color: #fff; color: rgb(65 18 104 / 80%); }
.mt-5 { position: relative; height: 400px; }

#profile .profile-form  .form-check-inline { text-align: center; padding: 20px; }
@media screen and (max-width: 1280px) {
    #profile .title-background { height: 100px; }
    #profile .title-background .card-body { padding-top: 49px; }
    #profile .title-background .card-body h1 { width: 48%; margin-left: 32%; margin-right: 20%; padding: 16px; font-size: 1.7rem !important; }
}
@media screen and (max-width: 1024px) {
    #profile .profile-form { padding-top: 8% !important; }   
    #profile .profile-form { width: 70%; margin: 0 auto; }
}
@media screen and (max-width: 912px) {
    #profile .title-background .card-body h1 { width: 60%; margin-left: 35%; margin-right: 20%; }
}
@media screen and (max-width: 540px) {
    #profile .title-background .card-body h1 { width: 90%; margin-left: 7%; }
    #profile .profile-form { padding-top: 15% !important; width: 90%; }
    .-two, .-three { grid-template-columns: repeat(1, 1fr); }
    #profile .profile-form .content-button .btn-outline-light { width: 100%; margin-bottom: 25px; }
}
@media screen and (max-width: 280px) {
    #profile .profile-form { padding-top: 25% !important; width: 90%; }
}