.banner{
    background-color: transparent;
    width: 100%;
    height: 400px;
    display: flex;
    position: relative;  
    padding-top: 0px;
    font-family: inter;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left:auto ;
    margin-right:auto ;
    text-align: center;
    border-radius: 10px;
    top: 10px;
    
}

.splash-art{
    width: auto;
    height: 100%;
    position: relative;
    top: 20px;

}

.splash-art img{
    width: auto;
    height: 100%;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    background-color: transparent;

}


.banner-detail-container{
    width: 50%;
    height: 100%;
    text-align: center;
    margin-top:auto ;   
    margin-bottom:auto ;
    display: flex;
    text-align: center;
    justify-content: center; 
    align-items: center; 
    background-color: transparent;

}

@media all and (max-width: 1600px) {
    .splash-art{
        width: 100%;
        height: 110%;
        background-color: transparent;
        text-align: center;
        margin-top:auto ;   
        margin-bottom:auto ;
        display: flex;
        text-align: center;
        justify-content: center; 
        align-items: center; 
        position: relative;
        top: 25px;
        right: -100px;

    }
    .splash-art img{
        height: 120%;
        width: auto;
        
    }

    .banner-detail-container{
        width: 70%;
    }

    .banner{
        flex-direction: row-reverse;
        height: 300px;

    }

}

@media all and (max-width: 1200px) {
    .splash-art{
        position: absolute;
        right: -20px;
        width: 50%;
        top: -5px;

    }
    .splash-art img{
        width: auto;
        height: 100%;        
    }

    .banner-detail-container{
        width: 90%;
        left: 0px;
        position: absolute;
        background-image: linear-gradient(to left, transparent, var(--background-color) 50%);

    }
    
.banner-description{
    width: 60%;
    overflow-y: auto;
    height: 100px;
    
}



}


.banner-details{
    top: 20px;
    position: relative;
    text-align: left;
    width: 100%;
}

.banner-title{
    font-size: 40px;
    font-family: interbold;
    padding: 0px;
    margin: 0px;
    
}

.banner-icons{
    display: flex;
    padding: 0px;
    margin: 0px;
    background-color: transparent;

}

.banner-icons img{
    width: 25px;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

}

.banner-icons .rarity{
    height: 25px;
    width: auto;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

}

.banner-description{
    margin: 0px;

}

.information{
    position: relative;
    top: -10px;
    margin-top:50px;

}

#catalystscaling{
    width: auto;
    height: 48%;
    position: relative;
    text-align: center;
    margin-top:auto ;   
    margin-bottom:auto ;
    display: flex;
    text-align: center;
    justify-content: center; 
    align-items: center; 
    margin-right: 10px;
}

#catalystscaling img{
    width: auto;
    height: 100%;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    background-color: transparent;

}


@media all and (max-width: 1600px) {
    #catalystscaling{
        width: 100%;
        height: 60%;
        background-color: transparent;
        text-align: center;
        margin-top:auto ;   
        margin-bottom:auto ;
        display: flex;
        text-align: center;
        justify-content: center; 
        align-items: center; 
        position: relative;
        top: 25px;
        right: -100px;

    }
    #catalystscaling img{
        height: 120%;
        width: auto;
        
    }
}

@media all and (max-width: 1200px) {
    #catalystscaling{
        position: absolute;
        right: -20px;
        width: 50%;
        top: 100px;

    }
    #catalystscaling img{
        width: auto;
        height: 100%;        
    }
}


.sources{
    position: relative;
    top: 15px;
    display: flex;
    flex-wrap: wrap;
}

.sources p{
    font-size: 14px;
    position: relative;
    top: -8px;
    padding-right:5px ;
}

.sources a{
    display: flex;
    position: relative;
    height: 25px;
    padding-top: 7px;
    padding-left:10px ;
    padding-right:10px ;
    margin-right: 3px;
    border-radius:20px ;
    text-decoration: none;
    font-size: 14px;
    font-family: inter;
    color: var(--topnav-color);
    background-color: var(--highlighted-color);
    filter: brightness(95%);
    -webkit-filter: brightness(95%);
    -moz-filter: brightness(95%);  
    -o-filter: brightness(95%);  
    -ms-filter: brightness(95%);
    transition: all 0.2s ease-in-out;
    font-family: inter;

}

.sources a:focus{
    text-decoration: none;
    color: var(--topnav-color);
}


.sources a{
    color: var(--primary-text-color);
}

.sources a:focus{
    text-decoration: none;
    color: var(--primary-text-color);
}
.sources a img{
    position: relative;
    top: -3px;
    width: auto;
    height:90% ;
    padding-right: 5px;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.sources a i{
    position: relative;
    top: 4px;
    left: 4px;
    font-size: 10px;

}

.forefront{
    display: flex;
}

@media all and (max-width: 1240px) {  
    .forefront{
        display: block;
    }
}


.base-stat-table{
    width: 600px;
    height: 145px;
    background-color: #f0f0f0;
    border-radius: 5px;
    padding-top: 2px;
    padding: 0px;
    margin: 0px;
    margin-bottom: 10px;


}

@media all and (max-width: 1240px) {  
    .base-stat-table{
        height: auto;
    }
}

@media all and (max-width: 650px) {  
    .base-stat-table{
        width: 100%;
        overflow-x: auto;

    }

    .base-stat-table .scalingtable{
        width: 600px;

    }
  }

  .talent-card-heading{
    width: 100%;
    display: flex;
    padding: 10px;
}

.talent-card-text{
    background-color: transparent;
    padding-top:5px ;
    padding-right: 20px;
    width: 80%;
    margin-top:auto ;
    margin-bottom: auto;
}

.talent-card-title{
    font-size: 20px;
    margin:0px;
    text-align: left;
    margin-bottom: 5px;
    top: 2px;
    position: relative;
    font-family: interbold;


}

.scalingtable{
    width: 100%;
    position: relative;
    top: 6px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #e7e5e5;
    background-color:var(--hover-colour) ;
    filter: brightness(125%);
    overflow-x: auto;



}

.stt{
    position: absolute;
}

span{
    padding: 0px;
    margin: 0px;
}

wbr{
    padding: 0px;
    margin: 0px;
}

tr{
    background-color:var(--hover-colour) ;
    filter: brightness(110%);
    padding: 0px;
    width: 10px;

}

td{
    padding-left: 5px;
    padding-right: 5px;
    padding-top:2px;
    padding-bottom:2px;
    width: 10px;
    border-radius: 2px;

}

td{
    padding-left: 5px;
    padding-right: 5px;
    padding-top:2px;
    padding-bottom:2px;
    width: 10px;

}

.base-stat-table{
    width: 600px;
    background-color:var(--hover-colour) ;
    padding-top: 2px;
    padding: 0px;
    margin: 0px;
    margin-bottom: 10px;
    border-radius: 0px;
    border-top-left-radius: 5px;
    border-top-right-radius:5px ;

}

@media all and (max-width: 650px) {  
    .base-stat-table{
        width: 100%;
        overflow-x: auto;

    }

    .base-stat-table .scalingtable{
        width: 600px;

    }
}

.passive-container{
    position: relative;
    top: -5px;
    width: 100%;
    height: 100%;
    margin-left:auto ;
    margin-right: auto;

}

@media all and (max-width: 1240px) {  
    .passive-container{
        margin-top:20px ;


    }
}



.passive-content{
    width: 90%;
    background-color:var(--hover-colour) ;
    margin-left:10px ;
    text-align: left;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    overflow: hidden;

}

@media all and (max-width: 1240px) {  
    .passive-content{
        margin-left:0px ;
        width: 100%;
        box-sizing: border-box;

    }
}

.passive-content p{
    background-color: #e7e5e5;
    background-color:var(--hover-colour) ;
    filter: brightness(125%);
    padding: 10px;
    margin: 0px;
    margin-top: 5px;
    border-radius: 2px;
    overflow: hidden;

}



.logo sup{
    color: var(--highlighted-color);
}