body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto Condensed';
    /* background-color: #01498A; */
    color: white;
}

.brawler-special-starPower {
    background: linear-gradient(90deg, rgb(248, 161, 26), rgb(108, 0, 44));
}

.brawler-special-gadget {
    background: linear-gradient(90deg, rgb(0, 209, 0), rgb(0, 66, 0));
}

.brawler-special-gear {
    background: linear-gradient(90deg, rgb(26, 177, 255), rgb(3, 22, 73));
}

@media only screen and (max-width : 1200px) {

    .head {
        margin: 100px auto 50px auto;
        display: block;
        text-align: center;
        width: 100%;
    }

    .filter-rarity {
        width: 100%;
        /* height: 100px; */
        display: block;
    }

    .filter-rarity-content {
        display: flex;
        flex-flow: row wrap;
        box-sizing: border-box;
        /* justify-content: center; */
        align-items: center;
        width: 95%;
        height: 100%;
        margin: 0px auto 50px;
    }

    .filter-rarity-option {
        width: auto;
        height: 30px;
        display: flex;
        padding: 0 10px;
        margin: 5px;
        background-color: rgb(28, 35, 50);
        box-shadow: 0 0 0 1px black;
        border-radius: 5px;
        transform: skew(-15deg);
        user-select: none;
        cursor: pointer;
        transition: .3s;
    }

    /* .filter-rarity-option:hover {
        background-color: #2a2a2a;
    } */

    .filter-rarity-option-active {
        display: flex;
        background-color: #2a2a2a !important;
        box-shadow: 0 0 0 1px black;
    }

    .filter-rarity-option-text {
        color: black;
        font-size: 15px;
        text-transform: uppercase;
        text-align: center;
        display: flex;
        margin: auto;
        padding: 0 10px;
        transform: skew(15deg);
    }

    .bg-rarity-all {
        background-color: #0d45ac;
    }

    .bg-rarity-rare {
        background-color: #68FD58;
    }

    .bg-rarity-superrare {
        background-color: #5AB3FF;
    }

    .bg-rarity-epic {
        background-color: #D850FF;
    }

    .bg-rarity-mythic {
        background-color: #FE5E72;
    }

    .bg-rarity-legendary {
        background-color: #FFF11E;
    }

    .bg-rarity-ultralegendary {
        background-color: #DFFE36;
    }

    .bg-rarity-hypercharge {
        background-color: #541195;
    }

    .rarity-rare {
        color: #68FD58;
    }

    .rarity-superrare {
        color: #5AB3FF;
    }

    .rarity-epic {
        color: #D850FF;
    }

    .rarity-mythic {
        color: #FE5E72;
    }

    .rarity-legendary {
        color: #FFF11E;
    }

    .rarity-ultralegendary {
        color: #DFFE36;
    }

    .brawler-card {
        width: 150px;
        height: 100px;
        border-radius: 15px;
        box-shadow: 0 0 0 2px black;
        position: relative;
        overflow: hidden;
        margin: 6px;
        user-select: none;
        cursor: pointer;
        transition: .3s;
    }

    .brawler-card-icon {
        width: 100%;
        height: 100%;
        display: flex;
        margin: auto;
        filter: brightness(80%);
        transition: .3s;
    }

    .brawler-card-img {
        height: 100%;
    }

    .brawler-card-title {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto 5px 5px auto;
        color: white;
        font-size: 15px;
        font-family: 'Lilita One';
        text-shadow: 0 2.5px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
        font-weight: 400;
        text-align: right;
        text-transform: uppercase;
    }

    .hidden {
        display: none;
    }

    .container {
        width: 100%;
        margin: auto;
        justify-content: center;
        display: flex;
    }

    #output-brawler {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: row wrap;
        box-sizing: border-box;
    }

    #output {
        width: 90%;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        box-sizing: border-box;
        margin: 50px auto;
    }

    .bar {
        width: 80%;
        height: 3px;
        background: linear-gradient(90deg, #014a8a00, #075dab, #014a8a00);
        display: flex;
        margin: 50px auto;
    }

    .button-back-review {
        width: 150px;
        height: 30px;
        display: flex;
        margin: 15px 0;
    }

    .button-back-review-text {
        display: flex;
        text-align: center;
        margin: auto;
        font-size: 15px;
        text-transform: none;
    }

    .brawler-header {
        width: 100%;
        height: 150px;
        border-radius: 20px;
        display: flex;
        margin: 20px auto 0 auto;
        justify-content: space-around;
        box-shadow: 0 0 0 2px black;
        background: linear-gradient(-90deg, rgb(1, 118, 255) 0%, rgb(1, 72, 137) 100%);
        overflow: hidden;
    }

    .brawler-header-main {
        width: 100%;
        height: 100%;
        display: block;
        /* flex-flow: row wrap;
        justify-content: right; */
        margin: 0 10px 0 auto;
        padding: 0 5px;
        border-radius: 15px;
        overflow: hidden;
    }

    .brawler-header-name {
        /* display: flex; */
        margin: 15px 0 15px auto;
        /* width: 100%; */
        font-size: 20px;
        font-family: 'Oswald';
        text-align: right;
        text-transform: uppercase;
    }

    .brawler-header-rarity {
        /* display: flex; */
        margin: 15px 0 15px auto;
        /* width: 100%; */
        text-align: right;
        font-size: 15px;
    }

    .brawler-header-title {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin: 15px 0 15px auto;
        width: fit-content;
        height: 40px;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 0 0 1px black;
        background-color: #00000050;
    }

    .brawler-header-title-icon {
        width: 30px;
        height: 30px;
        display: flex;
        margin: auto 10px;
        padding: 0 5px;
    }

    .brawler-header-title-img {
        width: 100%;
        height: 100%;
    }

    .brawler-header-title-name {
        padding: 0 10px;
        font-size: 13px;
        text-align: center;
        font-family: 'Lilita One';
        font-weight: 200;
    }

    .brawler-header-icon {
        width: 100%;
        height: 100%;
        display: flex;
        margin: 0;
        overflow: hidden;
    }

    .brawler-header-img {
        height: 100%;
        display: flex;
        margin: auto auto auto 0;
    }

    .brawler-description {
        display: flex;
        margin: 20px auto;
        width: 100%;
        min-height: 40px;
        font-family: 'Lilita One';
        font-weight: 200;
    }

    .brawler-description-text {
        display: flex;
        margin: auto;
        width: 100%;
        height: 100%;
        color: rgb(231, 231, 231);
        font-size: 13px;
        font-family: 'Lilita One';
        font-style: normal;
        font-weight: 200;
    }

    .brawler-stats-level-dropdown-container {
        width: 100%;
    }

    .brawler-stats-level-dropdown {
        position: relative;
        display: flex;
        flex-flow: row wrap;
        margin: auto 0 auto auto;
        width: 100%;
    }

    .brawler-stats-level-dropdown-selected {
        width: 100%;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        background-color: #1354D1;
        box-shadow: 0 0 0 5px #062542;
        border-radius: 10px;
    }

    .brawler-stats-level-dropdown-content {
        position: absolute;
        z-index: 1;
        top: 40px;
        width: 100%;
        display: none;
        /* display: flex; */
        flex-flow: row wrap;
        justify-content: center;
        border-radius: 15px;
        box-shadow: 0 0 0 5px #062542;
        background-color: #062542;
    }

    .brawler-stats-level-dropdown-content.show {
        display: block;
    }

    .brawler-stats-level-dropdown-item {
        display: flex;
        margin: 5px;
        justify-content: center;
        align-items: center;
        min-width: 80px;
        width: auto;
        min-height: 35px;
        height: auto;
        background-color: white;
        color: black;
        border-radius: 10px;
        cursor: pointer;
    }

    .brawler-stats-level-dropdown-item-active {
        background-color: #1354D1;
        color: white;
    }

    .brawler-stats-level-dropdown-item:hover {
        background-color: #1354D1;
        color: white;
    }

    .brawler-stats-level-dropdown-item p {
        margin: auto;
        padding: 5px;
        font-family: 'Oswald';
        font-size: 16px;
        text-transform: uppercase;
        text-align: center;
        /* color: black; */
    }

    .brawler-stats {
        width: 100%;
        display: block;
    }

    .brawler-stats-title {
        text-align: left;
        width: 100%;
        text-transform: uppercase;
        font-size: 15px;
        font-family: 'Lilita One';
    }

    .brawler-stats-main {
        display: flex;
        flex-flow: row wrap;
        box-sizing: border-box;
        justify-content: left;
        width: 100%;
        height: 100%;
        margin: 0 auto;
    }

    .brawler-stats-general {
        width: 170px;
        height: 50px;
        background-color: #002e58;
        margin: 5px 5px 5px 0;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 0 0 1px black;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .brawler-stats-general-icon {
        display: flex;
        margin: auto 10px;
        width: 50px;
    }

    .brawler-stats-general-img {
        width: 100%;
        height: 100%;
    }

    .brawler-stats-general-values {
        display: flex;
        justify-content: right;
        align-items: center;
        width: 100%;
        height: 100%;
        margin-right: 10px;
    }

    .brawler-stats-general-text {
        font-size: 10px;
        text-align: right;
    }

    .brawler-hypercharge {
        width: 100%;
        display: block;
    }

    .brawler-hypercharge-enabled {
        display: block;
    }

    .brawler-hypercharge-header {
        width: 95%;
        height: 80px;
        background: linear-gradient(90deg, #f800ff, #551196);
        box-shadow: 0 0 0 2px black;
        border-radius: 15px;
        display: flex;
        margin: auto;
    }

    .brawler-hypercharge-icon {
        display: flex;
        margin: auto 0;
        width: 80px;
    }

    .brawler-hypercharge-img {
        width: 100%;
        height: 100%;
    }

    .brawler-hypercharge-details {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .brawler-hypercharge-name {
        text-align: center;
        text-transform: uppercase;
        font-family: 'Lilita One';
        font-weight: 200;
        font-size: 20px;
        margin: auto 0;
        width: 100%;
    }

    .brawler-hypercharge-description {
        text-align: center;
        font-family: 'Lilita One';
        font-weight: 200;
        font-size: 13px;
        color: rgb(231, 231, 231);
        width: 100%;
    }

    .brawler-hypercharge-values {
        display: flex;
        flex-flow: row wrap;
        box-sizing: border-box;
        justify-content: center;
        width: 100%;
        height: 100%;
        margin: 0 auto;
    }

    .brawler-hypercharge-value {
        width: 170px;
        height: 50px;
        background-color: #002e58;
        margin: 5px;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 0 0 1px black;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .brawler-hypercharge-value-icon {
        display: flex;
        margin: auto 10px;
        width: 50px;
    }

    .brawler-hypercharge-value-img {
        width: 100%;
        height: 100%;
    }

    .brawler-hypercharge-value-text {
        font-size: 13px;
        text-align: right;
        margin: auto 10px auto auto;
        width: 100%;
    }

    .brawler-hypercharge-disabled {
        display: block;
    }

    /* BUFFIE */
    @keyframes rotate-border {
        0% {
            --angle: 0deg;
        }

        100% {
            --angle: 360deg;
        }
    }

    .toggle-container {
        position: relative;
        padding: 12px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 2px solid transparent;
        background:
                linear-gradient(#0a1628, #0a1628) padding-box,
                conic-gradient(from var(--angle, 0deg), #00f0ff, #a855f7, #c084fc, #06b6d4, #00f0ff) border-box;
        animation: rotate-border 3s linear infinite;
    }

    .buffie-border {
        position: relative;
        isolation: isolate;
    }

    .buffie-border::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: calc(var(8px, 8px) + 2px);
        padding: 2px;
        background: conic-gradient(from var(--angle, 0deg), #00f0ff, #a855f7, #c084fc, #06b6d4, #00f0ff);
        -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
        mask-composite: exclude;
        animation: rotate-border 3s linear infinite;
        z-index: -1;
        pointer-events: none;
    }

    @property --angle {
        syntax: '<angle>';
        initial-value: 0deg;
        inherits: false;
    }

    .brawler-specials {
        display: block;
        width: 100%;
    }

    .brawler-special {
        width: 95%;
        min-height: 80px;
        height: fit-content;
        display: flex;
        margin: 15px auto;
        box-shadow: 0 0 0 2px black;
        border-radius: 15px;
    }

    .brawler-special-icon {
        width: 70px;
        display: flex;
        margin: auto 15px;
    }

    .brawler-special-img {
        width: 100%;
        height: 100%;
    }

    .brawler-special-texts {
        display: flex;
        align-items: center;
        flex-flow: row wrap;
        width: 100%;
    }

    .brawler-special-name {
        text-align: center;
        text-transform: uppercase;
        font-size: 15px;
        font-family: 'Lilita One';
        margin: 0;
        width: 100%;
    }

    .brawler-special-description {
        text-align: left;
        font-family: 'Lilita One';
        font-size: 10px;
        color: rgb(231, 231, 231);
        margin: 0 10px 0 0;
        width: 100%;
    }

    .brawler-skins {
        width: 100%;
        height: 300px;
        overflow-x: auto;
        display: inline-flex;
        padding: 5px 0;
    }

    .brawler-skin {
        display: flex;
        flex-flow: row wrap;
        margin: auto 10px;
        min-width: 200px;
        width: 200px;
        min-height: 300px;
        height: 300px;
    }

    .brawler-skin-icon {
        position: relative;
        width: 100%;
        display: flex;
        margin: 0 auto;
        border-radius: 15px;
        box-shadow: 0 0 0 2px black;
        cursor: pointer;
    }

    .brawler-skin-img {
        width: 100%;
        height: 100%;
        -webkit-user-drag: none;
    }

    .brawler-skin-name {
        position: absolute;
        left: 5px;
        bottom: 5px;
        display: flex;
        margin: auto;
        text-align: left;
        text-shadow: 1px 0 0 black, 0 1px 0 black, -1px 0 0 black, 0 -1px 0 black;
        font-family: 'Lilita One';
        font-weight: 200;
        font-size: 15px;
        text-transform: uppercase;
    }

    .brawler-skin-prices {
        width: 100%;
        height: 40px;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        margin: 10px auto;
        background-color: rgb(1, 118, 255);
        box-shadow: 0 0 0 2px black;
        border-radius: 15px;
    }

    .brawler-skin-price {
        width: auto;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
    }

    .brawler-skin-price-img {
        width: 20px;
        height: 20px;
        margin: 5px;
        display: flex;
        -webkit-user-drag: none;
        padding: 0 5px;
    }

    .brawler-skin-price-value {
        text-align: left;
        font-size: 13px;
        width: 50%;
        padding: 0 5px;
    }
}

@media only screen and (min-width : 1200px) {
    .head {
        padding: 70px 0 0;
        display: block;
        text-align: center;
        width: 100%;
    }

    .filter-rarity {
        width: 100%;
        height: 100px;
        display: block;
    }

    .filter-rarity-content {
        display: inline-flex;
        flex-flow: row wrap;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .filter-rarity-option {
        min-width: 100px;
        height: 30px;
        display: flex;
        padding: 0 10px;
        margin: auto 5px;
        background-color: rgb(28, 35, 50);
        /* background-color: transparent; */
        box-shadow: 0 0 0 1px black;
        border-radius: 5px;
        transform: skew(-15deg);
        user-select: none;
        cursor: pointer;
        transition: .2s;
    }

    .filter-rarity-option:hover {
        background-color: #2a2a2a;
        /* background-color: #00adef; */
    }

    .filter-rarity-option-active {
        background-color: #2a2a2a !important;
        /* background-color: #00adef; */
    }

    .filter-rarity-option-active p {
        color: white;
    }

    .filter-rarity-option:hover p {
        color: white;
    }

    .filter-rarity-option-text {
        font-size: 15px;
        text-transform: uppercase;
        text-align: center;
        display: flex;
        margin: auto;
        color: black;
        transform: skew(15deg);
    }

    .bg-rarity-all {
        background-color: #0d45ac;
    }

    .bg-rarity-rare {
        background-color: #68FD58;
    }

    .bg-rarity-superrare {
        background-color: #5AB3FF;
    }

    .bg-rarity-epic {
        background-color: #D850FF;
    }

    .bg-rarity-mythic {
        background-color: #FE5E72;
    }

    .bg-rarity-legendary {
        background-color: #FFF11E;
    }

    .bg-rarity-ultralegendary {
        background-color: #DFFE36;
    }

    .bg-rarity-hypercharge {
        background-color: #541195;
    }

    .rarity-rare {
        color: #68FD58;
    }

    .rarity-superrare {
        color: #5AB3FF;
    }

    .rarity-epic {
        color: #D850FF;
    }

    .rarity-mythic {
        color: #FE5E72;
    }

    .rarity-legendary {
        color: #FFF11E;
    }

    .rarity-ultralegendary {
        color: #DFFE36;
    }

    /* */

    #output-brawler {
        width: 100%;
        display: inline-flex;
        justify-content: center;
        flex-flow: row wrap;
        box-sizing: border-box;
    }

    .brawler-card {
        /* width: 150px; */
        width: 200px;
        height: 150px;
        border-radius: 15px;
        /* box-shadow: 0 0 0 2px black; */
        position: relative;
        overflow: hidden;
        margin: 10px;
        display: flex;
        user-select: none;
        cursor: pointer;
    }

    /* .brawler-card:hover {
        box-shadow: 0 0 0 3px white;
    } */

    .brawler-card-icon {
        width: 100%;
        height: 100%;
        display: flex;
        margin: auto;
        filter: brightness(70%);
        transition: .3s;
    }

    .brawler-card:hover .brawler-card-icon {
        filter: brightness(90%);
    }

    .brawler-card-img {
        display: flex;
        height: 100%;
        margin: auto 0;
    }

    .brawler-card-rarity-tag {
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 15px;
        background-color: #0e131d;
        box-shadow: 0 0 0 1px white;
        width: auto;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px auto auto 5px;
        padding: 0px 10px;
    }

    .brawler-card-rarity-tag-p {
        font-size: 15px;
    }

    .brawler-card-title {
        position: absolute;
        right: 5px;
        bottom: 5px;
        margin: 0;
        font-size: 20px;
        color: white;
        text-shadow: 0 2.5px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
        font-family: 'Lilita One';
        font-weight: 200;
        text-align: right;
        text-transform: uppercase;
    }

    .hidden {
        display: none;
    }

    /* REVIEW BRAWLER */

    .bar {
        width: 500px;
        height: 3px;
        background: linear-gradient(90deg, #014a8a00, #075dab, #014a8a00);
        display: flex;
        margin: 50px auto;
    }

    .container {
        padding: 30px 0 0;
        width: 70%;
        margin: auto;
        justify-content: center;
        display: flex;
    }

    #output {
        width: 80%;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .button-back-review {
        width: 150px;
        height: 30px;
        display: flex;
        margin: 15px 0;
    }

    .button-back-review-text {
        display: flex;
        text-align: center;
        margin: auto;
        font-size: 15px;
        text-transform: none;
    }

    .brawler-header {
        width: 100%;
        border-radius: 20px;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .brawler-header-icon {
        height: 400px;
        display: flex;
        margin: auto auto auto 0;
    }

    .brawler-header-img {
        height: 100%;
    }

    .brawler-header-main {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        padding: 20px;
        border-radius: 15px;
        gap: 5px;
    }

    .brawler-header-name {
        width: 100%;
        font-size: 30px;
        font-family: 'Oswald';
        text-transform: uppercase;
        text-align: center;
        line-height: 1;
        margin: 0;
    }

    .brawler-header-rarity {
        margin: auto;
        text-align: center;
        font-size: 15px;
        line-height: 1;
        text-transform: uppercase;
        background-color: rgb(26, 26, 26);
        /* background-color: #787800; */
        padding: 5px 10px;
        outline: 2px solid rgb(14, 14, 14);
        /* outline: 1px solid #FFF11E; */
        border-radius: 15px;
    }

    .brawler-description {
        display: flex;
        margin: 25px auto;
        width: 100%;
        min-height: 40px;
    }

    .brawler-description-text {
        display: flex;
        margin: auto;
        width: 100%;
        height: 100%;
        color: rgb(231, 231, 231);
        font-size: 15px;
        font-family: 'Lilita One';
        font-style: normal;
        font-weight: 200;
    }

    .brawler-header-title {
        display: flex;
        align-items: center;
        margin: auto auto 0 auto;
        width: auto;
        height: 40px;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 0 0 1px black;
        background-color: #00000050;
    }

    .brawler-header-title-icon {
        width: 30px;
        height: 30px;
        display: flex;
        margin: auto 10px;
        padding: 0 10px;
    }

    .brawler-header-title-img {
        width: 100%;
        height: 100%;
    }

    .brawler-header-title-name {
        padding: 0 10px;
        font-size: 16px;
        text-align: left;
        font-family: 'Lilita One';
        font-weight: 200;
    }

    .brawler-stats-level-dropdown-container {
        background-color: #141414;
        /* width: 100%; */
        padding: 0 10px;
        margin: 0;
        border-radius: 15px 15px 0 0;
    }

    .brawler-stats-level-dropdown {
        position: relative;
        display: flex;
        flex-flow: row wrap;
        margin: auto;
        width: 100%;
    }

    .brawler-stats-level-dropdown .levels-title {}

    .brawler-stats-level-dropdown .levels-title p {
        font-family: 'Oswald';
        font-size: 20px;
    }

    .brawler-stats-level-dropdown-selected {
        width: 100%;
        height: 40px;
        display: none;
        justify-content: center;
        align-items: center;
        margin: auto;
    }

    .brawler-stats-level-dropdown-content {
        /* position: absolute; */
        /* z-index: 1; */
        /* top: 41px; */
        /* width: 100%; */
        /* display: none; */
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        margin: auto 0 auto auto;
        border-radius: 15px;
        /* box-shadow: 0 0 0 1px black; */
        /* background-color: rgb(14, 19, 29); */
    }

    .brawler-stats-level-dropdown-content.show {
        display: flex;
    }

    .brawler-stats-level-dropdown-item {
        display: flex;
        margin: 5px;
        justify-content: center;
        align-items: center;
        /* min-width: 80px; */
        min-width: 40px;
        width: auto;
        min-height: 35px;
        height: auto;
        background-color: rgb(28, 35, 50);
        border-radius: 15px;
        cursor: pointer;
    }

    .brawler-stats-level-dropdown-item:hover {
        background-color: rgb(0, 191, 255);
    }

    .brawler-stats-level-dropdown-item:hover p {
        color: black;
    }

    .brawler-stats-level-dropdown-item p {
        padding: 5px;
        font-size: 16px;
        margin: auto;
        text-align: center;
    }

    .brawler-stats {
        width: 100%;
        display: block;
    }

    .brawler-stats-category {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        /* width: 100%; */
        margin: 0 auto 20px;
        padding: 10px;
        background-color: #141414;
        border-radius: 0 0 15px 15px;
    }

    .brawler-stats-container {
        background-color: #001858;
        outline: 1px solid black;
        border-radius: 15px;
        /* margin: 10px auto; */
        padding: 10px;
        max-height: 150px;
    }

    .brawler-stats-title {
        text-align: left;
        text-transform: uppercase;
        font-size: 15px;
        font-family: 'Lilita One';
        padding: 0 0 0 5px;
    }

    .brawler-stats-main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .brawler-stats-general {
        width: 130px;
        height: 40px;
        background-color: rgb(19 19 19 / 50%);
        margin: 5px;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 0 0 1px rgb(255 255 255 / 50%);
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .brawler-stats-general-icon {
        display: flex;
        margin: auto 10px;
        width: 50px;
    }

    .brawler-stats-general-img {
        width: 100%;
        height: 100%;
    }

    .brawler-stats-general-values {
        display: flex;
        flex-flow: row wrap;
        justify-content: right;
        align-items: center;
        width: 100%;
        height: 100%;
        margin-right: 10px;
    }

    .brawler-stats-general-text {
        font-size: 14px;
        text-align: right;
    }

    .brawler-hypercharge {
        width: 100%;
        display: block;
        margin: 20px auto;
    }

    .brawler-hypercharge-enabled {
        background: linear-gradient(90deg, #f800ff, #551196);
        outline: 1px solid black;
        border-radius: 15px;
        display: flex;
        margin: auto;
        padding: 0 10px;
        flex-flow: row wrap;
    }

    .brawler-hypercharge-header {
        display: flex;
        width: 100%;
        align-items: center;
    }

    .brawler-hypercharge-icon {
        display: flex;
        margin: 10px;
        width: 100px;
    }

    .brawler-hypercharge-img {
        width: 100%;
        height: 100%;
    }

    .brawler-hypercharge-details {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        width: 95%;
        height: 100%;
    }

    .brawler-hypercharge-name {
        width: 100%;
        font-family: 'Lilita One';
        font-size: 20px;
    }

    .brawler-hypercharge-description {
        width: 100%;
        font-size: 15px;
        font-weight: bold;
        font-family: 'Roboto Condensed';
    }

    .brawler-hypercharge-values {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
        height: 100%;
        margin: 5px auto;
    }

    .brawler-hypercharge-value {
        width: auto;
        min-height: 35px;
        background-color: rgb(0, 0, 0, .5);
        margin: 5px;
        border-radius: 15px;
        overflow: hidden;
        outline: 1px solid rgb(255, 255, 255, .5);
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .brawler-hypercharge-value-icon {
        display: flex;
        margin: 10px;
        width: 50px;
    }

    .brawler-hypercharge-value-img {
        width: 100%;
        height: 100%;
    }

    .brawler-hypercharge-value-text {
        font-size: 15px;
        font-family: 'Lilita One';
        text-align: right;
        margin: auto 5px auto auto;
        padding: 0 10px;
        width: 100%;
    }

    .brawler-hypercharge-disabled {
        display: block;
    }

    /* BUFFIE */
    @keyframes rotate-border {
        0% {
            --angle: 0deg;
        }

        100% {
            --angle: 360deg;
        }
    }

    .toggle-container {
        position: relative;
        margin: 20px auto;
        padding: 12px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 2px solid transparent;
        background:
                linear-gradient(#0a1628, #0a1628) padding-box,
                conic-gradient(from var(--angle, 0deg), #00f0ff, #a855f7, #c084fc, #06b6d4, #00f0ff) border-box;
        animation: rotate-border 3s linear infinite;
    }

    .toggle-container img {
        width: 50px;
    }

    .buffie-border {
        position: relative;
        isolation: isolate;
    }

    .buffie-border::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: 18px;
        padding: 2px;
        background: conic-gradient(from var(--angle, 0deg), #00f0ff, #a855f7, #c084fc, #06b6d4, #00f0ff);
        -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
        mask-composite: exclude;
        animation: rotate-border 3s linear infinite;
        z-index: -1;
        pointer-events: none;
    }

    @property --angle {
        syntax: '<angle>';
        initial-value: 0deg;
        inherits: false;
    }

    .brawler-specials {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        width: 100%;
    }

    .brawler-special {
        width: 45%;
        min-height: 80px;
        display: flex;
        margin: 10px;
        box-shadow: 0 0 0 2px black;
        border-radius: 15px;
    }

    .brawler-special-icon {
        width: 70px;
        display: flex;
        margin: auto 15px;
    }

    .brawler-special-img {
        width: 100%;
        height: 100%;
    }

    .brawler-special-texts {
        display: flex;
        align-items: center;
        flex-flow: row wrap;
        width: 100%;
        height: auto;
    }

    .brawler-special-name {
        text-align: left;
        text-transform: uppercase;
        font-size: 19px;
        font-family: 'Lilita One';
        margin: 0;
        width: 100%;
        height: auto;
    }

    .brawler-special-description {
        text-align: left;
        font-family: 'Lilita One';
        font-size: 13px;
        color: rgb(231, 231, 231);
        margin: 0 10px 0 0;
        width: 100%;
        height: auto;
    }

    .brawler-skins {
        width: 100%;
        height: 400px;
        overflow-x: auto;
        display: flex;
        align-items: center;
        gap: 15px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding: 0 10px;
    }

    .brawler-skins::-webkit-scrollbar {
        height: 12px;
    }

    .brawler-skins::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 10px;
    }

    .brawler-skins::-webkit-scrollbar-thumb {
        background: rgb(1, 118, 255);
        border-radius: 10px;
        border: 2px solid rgba(0, 0, 0, 0.1);
    }

    .brawler-skins::-webkit-scrollbar-thumb:hover {
        background: rgb(0, 98, 215);
    }

    /* Pour Firefox */
    .brawler-skins {
        scrollbar-width: thin;
        scrollbar-color: rgb(1, 118, 255) rgba(0, 0, 0, 0.1);
    }

    .brawler-skin {
        width: 250px;
        scroll-snap-align: start;
        user-select: none;
    }

    .brawler-skin a {
        user-select: none;
    }

    .brawler-skin-icon {
        position: relative;
        width: 250px;
        display: flex;
        margin: 0 auto;
        border-radius: 15px 15px 0px 0px;
        box-shadow: 0 0 0 2px black;
        overflow: hidden;
        cursor: pointer;
    }

    .brawler-skin-img {
        width: 100%;
        height: 100%;
        -webkit-user-drag: none;
    }

    .brawler-skin-name {
        position: absolute;
        left: 10px;
        bottom: 10px;
        text-align: left;
        text-shadow: 1px 0 0 black, 0 1px 0 black, -1px 0 0 black, 0 -1px 0 black;
        font-family: 'Lilita One';
        font-weight: 200;
        font-size: 19px;
        text-transform: uppercase;
        display: flex;
        margin: auto;
    }

    .brawler-skin-prices {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        background-color: rgb(1, 118, 255);
        box-shadow: 0 0 0 2px black;
        border-radius: 0 0 15px 15px;
    }

    .brawler-skin-price {
        width: 100px;
        min-width: 100px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px;
    }

    .brawler-skin-price-img {
        width: 30px;
        height: 30px;
        margin: 10px;
        display: flex;
    }

    .brawler-skin-price-value {
        width: auto;
        text-align: center;
        font-size: 13px;
    }
}