Official ArtFight Seafoam CSS Theme

/*
* Official Seafoam CSS Theme
* Code by @cyxxie and @leafjelly
* Assets by @leafjelly
* Pagedoll by @Spiderccino
* Feel free to report any bugs!
* This code is free-to-use! You may modify as you see fit
*/

.container-fluid{
 max-width:1300px!important;
 margin:auto;
}

#wrapper {
    background: url(https://images.artfight.net/resources/seabg2.jpg);
    background-size: contain!important;
    background-repeat: repeat-x;
    background-position: bottom;
    background-attachment: fixed;
}


/* PageDoll
* Adjust the margin-top to move your pagedoll up and down
* Adjust the Height and Width to best fit your image
* Looks best with a Transparent png
*/
.card-body.panel-body.profile-avatar-panel {
    background-image: url(https://images.artfight.net/resources/spunch-200.gif) !important;
    background-size:contain !important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background:none;
    height: 200px;
    width: 200px;
    border: none;
    margin-top:-40px;
}
.card-body span.icon-user{display:none}

/*User Info*/
.card.panel.float-left.d-none.d-md-block.profile-avatar-wrapper {
  border: none;
}

.profile-header-background.panel-heading.bg-light.p-2.border.rounded.position-relative {
  background-image: url(https://images.artfight.net/resources/seaheader.png);
  background-size:250px;
  border: none !important;
  padding:15px !important;
}

.profile-header-wrapper.clearfix {
  background:rgba(0,72,84,.8);
  border: #6fddc0 solid 2px;
  width:84.5% !important;
  margin-left:0;
  display: inline-block  !important;
}

.profile-header-name a {
  color: #1a5164!important;
}
.element-disabled.text-muted.h5{
  color: #0d3e50!important;
  opacity: .8;
}
.d-none.d-md-block.mt-3.profile-header-normal-status {
  font-size:smaller;
}

.card-header.panel-heading{font-weight: bold;}
.card.panel.float-left.d-none.d-md-block.profile-avatar-wrapper {
  background: none;
  border:none;
}
.panel-heading{
  background-image: url(https://images.artfight.net/resources/seaheader.png);
  background-size:250px;
  border: #23A196 solid 2px;
  color: #003b4b !important;
}
.username-navbar span {
  color: #b5ffbb!important;
}

.profile-header-mobile-status .card-body{
  background:none;
  padding:.5em;
}
.d-block .d-md-none .mt-3 .profile-header-mobile-status{margin:0}
.card.profile-avatar-wrapper, .profile-header-mobile-status .card {
    background: none; border:none;
}
/*Navigation Tabs*/
.nav-tabs {
    width: 16%;
    margin: -0.3rem 0 -1rem -1rem !important;
    display: inline-block !important;
    padding: 4px !important;
    border: none;
    font-variant: small-caps;
    float: right;
}

.nav-tabs .nav-item {
  text-align: center;
  border: none;
}

.nav-link.active, a.btn.btn-primary.active, .page-item.active .page-link{
    background: #6fddc0 !important;
    font-style: italic;
    text-transform: uppercase;
    color: #05276b !important;
}

.nav-tabs .nav-item:hover, .nav-tabs .nav-link:hover {
  background: #5bc8ab!important;
  color: #164980!important;
}
.nav-tabs .nav-link{
  background: rgba(0,72,84,.8);
  color:#c4ffda;
  padding:5px;
  border:#7bdddd solid !important;
  border-width: 2px 2px 2px 0 !important;
}

/* Profile Description Box*/
.profile-description.mb-4.clearfix {
  margin:1rem 4px 1rem 1rem !important;
  background: rgba(0,72,84,.8);
  min-height: 350px !important;
  max-height: 600px !important;
  overflow: auto!important;
  border: #a8ffd2 solid 2px;
  padding: 20px 25px;
  float: right;
  width: 72%;#3d0020
}

/* Followers and Links */
.profile-links.col-md-6 {
  min-width: 100%;
  padding:0;
}

.profile-links .table-card{
  font-size:small;
}

td a{
  color: #d4e3ed;
}
td a:hover{
  color: #aad1eb1;
}
.card-footer.panel-footer.text-right a{
  color:#18415c;
}

.card-footer.panel-footer.text-right a:hover{
  color:#0e5d91;
}

.w-25.text-right.bg-light.active {
  background: url() top;
    border: #17716d solid;
    border-width: 0 0 1px 0;
    background-color: #209b95 !important;
    color: #FFF;
}
.table.table-bordered.table-card {
  background: rgba(0,72,84,0.8);color#FFF;
  color:#FFF!important;
  border: #23A196  solid;
  border-width: 0 2px 2px 2px;
}
.table-bordered td {
  padding:4px 11px;
  border: #44a8a4 solid 1px;
}


td.w-25.text-right.bg-light.active {
    font-weight: lighter;
}

.profile-followers.col-md-6 {
    min-width: 100%;
    padding:0;
}

.profile-followers .card-body.panel-body{
  background:rgba(0,72,84, .9);
  text-align: center;
  padding: 2px 36px;
  Height:200px;
  overflow:auto;
  border: #23A196 solid;
  border-width: 0 2px;
}

.progress {
    background-color: #05475a!important;
}

.profile-followers .card-header.panel-heading, .profile-overall-stats .card-header.panel-heading, .profile-current-stats .card-header.panel-heading, .achievement-panel  .card-header.panel-heading {
    border-bottom: #267871 solid 2px !important;
}

.achievement-panel .card-body.panel-body {
    border: #23A196  solid;
    border-width: 0 2px 2px 2px;
}

.card-body.panel-body,{
  background: rgba(0,72,84,0.8);
  overflow:auto;
}

.col-6.col-md-4.profile-follower {
  min-width: 100% !important;
  font-weight:lighter;
  padding:2px
}

.card-footer.panel-footer.text-right {
    padding: 3px;
    background-color: #41ab9d;
    border:#23A196 1px solid !important;
}

.btn-warning, .btn-danger, .btn-success, .btn.btn-primary, #profile-dropdown, .dropdown-menu.dropdown-menu-right.show {
    background: #6fddc0;
    border: #2f8fa5 solid 1px;
    color: #1c5795!important;
}

.btn.btn-primary:hover{
    background: #5bc8ab;
    color: #0f3b69!important;
}

.btn-warning:hover, .alert-warning{
    background: #e5af3f;
    border: #9d5810 solid 1px;
    color: #8d4200 !important;
}

.btn-success:hover, .alert-success{
    background: #1ba879;
    border: #0d7453 solid 1px;
    color: #00441b !important;
}

.btn-danger:hover, .alert-danger{
    background: #ca5858;
    border: #830202 solid 1px;
    color: #4b0000 !important;
}

.card.panel.panel-default.mt-3 {
  background: none;
}

/*Profile Galleries*/
.card.panel.panel-default.profile-gallery-header.profile-attacks-header.mt-3{
  width:100%;
}

.profile-attacks-header .panel-heading, .profile-defenses-header .panel-heading, .profile-characters-header .panel-heading {
    font-variant:small-caps;
}

h2.d-flex.align-items-center.mb-0 {
    font-size: 23px;
}

.panel-heading a{
  color: #0059ab;
  font-variant: normal;
}
.panel-heading a:hover {
  color: #0078e7;
}

.card.p-1.m-1.thumb-attack.attack-thumb.thumbnail, .card.p-1.m-1.thumb-attack.character-thumb.thumbnail {
    border: #f38585 solid 3px !important;
    background: rgba(255, 164, 164, 0.8);
}
.nametag.thumbnail-width.h5.p-1.my-auto.bg-light.border.rounded.text-center.text-truncate, .nametag.bookmark-character.flex-shrink-0.h5.p-1.ml-1.my-auto.bg-light.border.rounded,.btn.btn-primary.form-control.btn-submit-once  {
  background: #23A196 !important;
  border: #178ca0 1px solid !important;
  color:#c4ffda !important;
  font-variant:small-caps;
}

.nametag.thumbnail-width.h5.p-1.my-auto.bg-light.border.rounded.text-center.text-truncate:hover, .nametag.bookmark-character.flex-shrink-0.h5.p-1.ml-1.my-auto.bg-light.border.rounded:hover, .btn.btn-primary.form-control.btn-submit-once:hover{
    background: #24b0a4 !important;
    border: #09a7b3 1px solid
    color:#e2fbeb!important;
}

.text-break i {
  color: #c4ffda !important;
}
.text-break i:hover{
  color:#aff1c8!important;
  text-decoration: none !important;
}

/*Comments*/
.comment .panel-body {
  background: rgba(0,72,84, .9)!important;
}

.comments h2, h2.profile-stats-title, h2.profile-characters-title, h2.profile-attacks-title,{
    background: rgba(0,72,84, .5);
    padding: 2px 10px;
    margin: 30px auto 5px auto;
    text-align: center;
    width: 22%;
}

h2.profile-defenses-title {
    background: rgba(0,72,84, .5);
    padding: 2px 10px;
}

/*Site User Interface*/
.artfight-nav.navbar.navbar-dark.navbar-static-top.navbar-expand-md.mb-0 {
  border-bottom: 3px #168b95 solid;
  background: #27a89e !important;
}

.navbar-brand div, .navbar-dark .navbar-nav .nav-link{
    color: #002338 !important;
}

.navbar-brand div:hover, .navbar-dark .navbar-nav .nav-link:hover{
    color: #00588c !important;
}

.dropdown-menu {
  background: #30aea0; color:#005758;
}
.dropdown-divider {
  border-color: #a5fff2;
}
.dropdown-menu a, .dropdown-menu .d-flex.align-items-center {
  color: #005758 !important;
}
.dropdown-header {
  Color: #a5fff2;
}
.badge.badge-info, .badge.badge-primary, .badge.badge-danger, {
  background: #79ffc7;color: #000!important;
}
.dropdown-item:hover {
  Background: #209189;
  Color: #003435!important;
}

.alert.alert-info {
    background: #e49faa !important;
    border: #d15673 solid 1px;
}
.alert.alert-info a {
  color: #b93554 !important;
}

.comment a, {
  color:#ffc5d3;
}

a .nav-link {
  color: #79ffc7;
}

.comments .card.panel {
  background: none;border:#9effc5 solid 1px;
}

.footer .contain {
    background-color: #003750 !important;
    color: #a3daff !important;
    border: none;
}
.page-item.disabled .page-link,  .page-link:hover {
  background: #27a89e !important;
  border: none;
}
.page-link {
  background: #27a89e;
  border: none;
}

.achievement-panel .card {
  background: rgba(0, 55, 80, .6); border:none;
}

p, div{
    color: #f7ffea;
}

a {
    color:#71daa6;
}

a:hover{
    color:#bbffdd;
}

/*Mobile Fixes*/
@media screen and (max-width: 766px){
 .container-fluid, .comments h2, h2.profile-stats-title, h2.profile-characters-title, h2.profile-attacks-title, h2.d-flex.align-items-center.mb-0 {
    width: 100%!important;
 }

 .profile-header-wrapper.clearfix{
    width: 100%!important;
    Margin:.5rem 0!important;
 }

 .nav-tabs {
     width: 100% !important;
     float: none !important;
     margin: .5rem 0 !important;
     padding: 0!important;
     display: flex!important;
 }
 .nav-tabs .nav-link {
    border-width:1px !important;
 }
 .profile-links.col-md-6, .profile-followers.col-md-6{padding:0 1rem!important}

  .profile-description.mb-4.clearfix {
    float: none !important;
    width: 100% !important;
    Margin:.5rem 0!important;
  }
  .profile-body {
    max-height: none!important;
    min-height: auto !important;
  }
  .col-6.col-md-4.profile-follower {
    height: inherit!important;
    min-width: inherit !important;
  }

  .profile-followers .card-body.panel-body{
    height: inherit !important;
  }

  h3.profile-header-name.text-center, .element-disabled{
  color: #0d3e50!important;
  opacity: .9 ;
  font-weight:bold !important;
  }

  .card-body span.icon-user {display:block;background:rgba(0,72,84,0.2);}
}