Art Fight Comedy CSS

/* Official ArtFight Comedy CSS
* Code by @jayvik
* Assets by @doodul
* This code is free-to-use! You may modify as you see fit
*/


/*Changes background img*/
#wrapper {
    background: url(https://images.artfight.net/resources/css_2026/Comedy%20Background.JPG);
    background-size: contain!important;
    background-repeat: repeat;
    background-position: top;
    background-attachment: fixed;
}

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

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

/* Replace AF logo */
.artfight-nav .navbar-brand {
  background-image: url(https://images.artfight.net/resources/2026logo.png);
  background-repeat: no-repeat;
  padding-left: 38px !important;
  padding-bottom: 10px !important;
  margin-bottom: -10px !important;
  background-size: 32px;
}
.navbar-brand img {
  display: none;
}

/* Replace donation Wormston for theme Wormston*/
.donate-wormston{
    display: none !important;
}
.donate-section .ml-2 {
  background: url(https://images.artfight.net/resources/css_2026/Comedy%20Wormson%20Page%20Doll.PNG);
    max-height: 100px !important;
    padding: 50px;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Desktop-only changes*/
 @media only screen and (min-width: 768px) {
    /*Stretch navbar items, all in same line*/
    .nav-tabs .nav-item
    {

        width: 20%;
        text-align: center;
        font-weight: bold;
        border-radius: 0 !important;

    }
}

/* Moblie-only changes*/
@media only screen and (max-width: 768px) {
     /*Stretch navbar items full-width*/
     .nav-tabs .nav-item {
      width: 100% !important;
      font-weight: bold;
      text-align: center;
    }
}


/*Page elements padding*/
.comments h2, .profile-stats-title, .profile-characters-title, .profile-attacks-title, .profile-defenses-title
{
    padding: 0.5em !important;
}

/* Profile description padding*/
.profile-description
{
    padding: 2em;
}

/* Align text center */
.comments h2, .profile-stats-title, .profile-characters-title, .profile-attacks-title, .profile-defenses-title, .comments .btn
{
    text-align: center;
}

/* Make text uppercase */
.profile-header-name a, .card-header h2, .comments .btn, .comments h2, .profile-links .card-header, .profile-followers .card-header, .nav-item, .profile-stats-body .card-header, .profile-characters-permissions .card-header, .profile-stats-title, .profile-characters-title, .profile-attacks-title, .profile-defenses-title
{
    text-transform: uppercase !important;
}

/*Un-uppercase "view all" links.*/
.profile-gallery-header-link
{
    text-transform: capitalize !important;
}

/*Themed progress bars*/
.progress-bar , .donation_meter .mt-0 {

    background-image: url(https://images.artfight.net/resources/css_2026/Comedy%20Progress%20Bar%20Gradient.PNG);
    background-size: cover;
    border: 2px #1b434a solid !important;
}

/*Dark background w/ transparency */
.profile-header, .profile-header-background, .panel-heading,  .profile-followers .card-footer, .profile-links .table td, .profile-links .table tr, .profile-description, .comments .card, .profile-stats-title, .profile-characters-title, .profile-attacks-title, .profile-defenses-title, .profile-stats-body .card-body, .profile-characters-permissions {
    background-color: rgba(32,24,18,0.91) !important;
     ;
}

/*Dark background solid */
.profile-followers .card, .nav-tabs, .artfight-nav, .footer .contain, .comments h2, .nametag, .profile-header-mobile-status .card-body, .profile-avatar-wrapper .card-body, .profile-stats-body .table, .profile-stats-body td, .achievement-panel .border-light, .page-link, .profile-defenses .btn, .profile-characters .card-body
{
    background-color: rgba(32,24,18,1)  !important;
}

/*Light background, Dark text */
.nav-item .active, .alert .alert-info, .alert, .alert-info, .alert-info a, .comments .btn, .donate-button, .profile-header-buttons .btn, .active .page-link, .profile-defenses .btn .active, .profile-characters .btn-info, .profile-characters .badge-info
{
    background-color:  #ff8f04 !important;
    color: #201812 !important;
}

/*Bolds text*/
.comments .btn, .donate-button, .profile-links .card-header, .profile-followers .card-header, .alert, .alert-text, .profile-stats-title, .profile-characters-title, .profile-attacks-title, .profile-defenses-title, .profile-stats-body .card-header, .progress-bar, .active .page-link, .profile-defenses .active, .profile-characters .btn-info, .profile-characters-permissions .card-header
{
    font-weight: bold;
}

/* Light color border */
.profile-header, .profile-header-background, .panel-heading, .profile-links .table, .profile-followers .card, .nav-tabs, .profile-description, .comments h2, .profile-stats-title, .profile-characters-title, .profile-attacks-title, .profile-defenses-title, .achievement-panel .m-auto, .profile-characters-permissions
{
    border: 1px solid #ff8f04;
}

/* Dark color border */
.comments .btn, .donate-button
{
    border: 1px solid #201812;
}

/* No border */
 .profile-header-buttons .btn, .nav-item .active, .profile-defenses .btn
 {
     border: none !important;
 }

/* Bio / permissions text color -- without this the bio will look weird for people with light theme enabled by default!!*/
.profile-description, .profile-characters-permissions .card-body
{
    color: #ffe784 !important;
}

/* Text color */
.nav-item a, .profile-header-name a, .navbar-brand, .profile-header-normal-status, .profile-links, .profile-links table, .profile-links a, .profile-followers, .card-header h2, .profile-gallery-header-link a, .comments .card, .comments .card a, .footer .contain, .footer .contain a, .donation_meter, .comments h2, #followers, .nametag a, .profile-header-mobile-status, .profile-stats-title, .profile-characters-title, .profile-attacks-title, .profile-defenses-title, .profile-stats-body .card-header, .profile-stats-body .table, .profile-stats-body td, .fa, .page-link, .profile-defenses .btn, .profile-characters .card-body, .profile-characters-permissions .card-header
{
    color:#ff8f04 !important;
}

/*Commenter names*/
.comment strong
{
    background-color: rgba(32,24,18,1)  !important;
    padding: 5px !important;
    border: 1px solid #ff8f04;
     border-radius: 5px;
}