.spot-light{
    background-color: #222834 !important;
}

.player-image{
    background-color: #e6dddd;
    padding:10px;
    border-radius: 50%;
    margin: 0px 15px;
    border: 5px solid #fbc02d;
  
}
.player-image:hover{
    background-color: white;
    position: relative;
    transform: scale(1.5);
}
.player-image img{
    width:50px;
    height:50px;
  
    border-radius: 5px;
}

.Update-Favourites{
    background-color: transparent;
    border: 2px solid white;
    color:white;
    border-radius: 30px;
    padding:10px;
}
.Update-Favourites:hover{
color:black;
background-color: white;
}
.player-details{
    background-color: hsla(0,0%,100%,.1) !important;
}
.player-details:hover{
    position: relative;
    transform: scale(0.9);
}
.player-details h3{
    font-size: 13px;
}
.player-details h2{
    font-size: 40px;
}





.progress-container {
    position: relative;
    width: 120px;
    height: 120px;
}

.progress-container:hover{
transform: scale(0.9);
}
.progress-ring {
    transform: rotate(-90deg);
}

circle {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
}

.progress-background {
    stroke: #ddd;
}

.progress-circle {
    stroke: #39d33e;
    stroke-dasharray: 314;
    stroke-dashoffset: 314;
    transition: stroke-dashoffset 0.5s ease-in-out;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: bold;
}