.pageHero{
    width: 100%;
    margin-top: 2rem;
    border-radius: 1rem;
    margin: 2rem auto;
    justify-content: center;
    padding: 0;
}
.cardBackground{
    background-color: rgb(38, 42, 46);
}
.rarityLegendary{
    color: orange !important;
}
.rarityLegendaryBack{
    background-color: orange;
}
.gearTitle{
    font-size: 2rem;
    width: 100%;
    text-align: center;
    color: white;
    justify-self: start;
    margin: 0 auto;
    padding: .25rem 0;
    border-top-right-radius: 1.5rem;
    border-top-left-radius:  1.5rem;
}
.gearSubtext{
    font-size: 1.25rem;
    text-align: center;
    background-color: #323232;
    margin: 0 auto 2rem auto;
    padding: 1rem;
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}
.gearImage{
    width: 100%;
    height: auto;
}
.gearRedTextContainer{
background-color: rgb(50, 50, 50);
height: 2rem;
width: 100%;
margin: 0 auto;
text-align: center;
justify-content: center;
align-items: center;
border-top-right-radius: 1.5rem;
border-top-left-radius: 1.5rem;
display: flex;
}
.gearRedText{
    color: red;
    font-weight: bold;  
}

.gearRedTextSpacer{
    padding-bottom: 1rem;
}
.gearDisplay{
    width: 90%;
    height: auto;
    padding:  0 1rem;
    margin: 1rem auto;
    border-radius: 1rem;
    background-image: url('/BL4/imagesCommon/freakShit.webp');
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.effectContainer{
    width: 90%;
   background-color: #212121;
    height: auto;
    margin: 1rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 1.5rem;
}
.effectTitle{
background-color: goldenrod;
width: 100%;
height: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
text-align: center;
align-content: center;
border-top-right-radius: 1.5rem;
border-top-left-radius: 1.5rem;
}
.effectTitleText{

font-size: 1.25rem;
text-align: center;
justify-self: center;
margin: 0 auto;
color: white;
font-weight: bold;
}
.effectSubtext{
   display: flex;
    padding: .25rem 1rem;  
    background-color: rgb(50, 50, 50);
    margin: 0 auto;
    border-bottom-right-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
}
.effectSubtextText{
    font-size: 1rem;
    color: gold;
    font-weight: bold;
}
.effectText{
    margin: 1rem auto;
    display: flex;
    color: white;
    font-size: 1rem;
    width: 95%;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.effectBottom{
background-color: goldenrod;
width: 100%;
height: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
align-content: center;
border-bottom-right-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;  
}
.cardListContainer{
width: 95%;
}
.cardList{
    display: flex;
    flex-direction: column;
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.cardListItem{
    display: flex;
    flex-direction: row;
    justify-content: center;
    list-style: none;
    width: 100%;
    margin: .5rem auto;
    border-bottom: whitesmoke .1rem solid;
}
.itemCat{
padding: .5rem 1rem;
width: auto;
background-color: rgb(50, 50, 50);
color: white;
border-top-left-radius: 1.5rem;
text-align: center;
margin-right: .5rem;
font-weight: bold;
}
.twoSideCat{
padding: .5rem 1rem;
width: auto;
background-color: rgb(50, 50, 50);
color: white;
border-top-left-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
text-align: center;
margin-right: .5rem;
font-weight: bold;
}
.itemClass{
padding: .5rem 1rem;
width: auto;
font-size: 1rem;
text-align: center;
border-bottom-right-radius: 1.5rem;
font-weight: bold;
}
.itemClassLegendary{
    background-color: orange;
    color: white;
    
}

.manufacturerClassVladof{
    background-color: red;
    color: white;
    
}
.guntypeClass{
    background-color: rgb(50, 50, 50);
    color: darkgoldenrod;
}

.sourceBaseGame{
    background-color: rgb(50, 50, 50);
    color: white;
}
.endList{
    border-bottom: none !important;
}
.cardBottom{
    font-size: 1rem;
     border-bottom-right-radius: 1.5rem;
    border-bottom-left-radius:  1.5rem;
    width: 100%;
    color: white;
    font-weight: bold;
    text-align: center;
}
.gearListBase{
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
    padding-inline-start: 0;
    padding: 1rem 0;

}
.gearListItem{
    display: flex;
    flex-direction: row;
    margin: 1rem auto;
    width: 100%
}
.gearListContainer{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: .5rem;
    margin: 0 auto;
    justify-content: center;
}

.gearListImage{

    height: auto;
    object-fit: contain;
    display: flex;
    margin: 0 auto;
    width: 80%;
}

.gearListText{
    font-size: 1rem;
    color: white;
    font-weight: bold;
    margin-left: 1rem;
    display: flex;
    align-items: center;
    display: flex;
    flex-direction: column;
}