@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Mono&family=Syne+Mono&display=swap");

.podium-holder{
    padding: 20px;
    background-color: #000;
}
 .podium-container {
	 --_podium-size: 4px;
	 perspective: calc(var(--_podium-size) * 50);
	 margin-top: calc(var(--_podium-size) * 20);
	 display: grid;
	 place-items: center;
     background-color: #000;
}
 @media only screen and (min-width: 600px) {
	 .podium-container {
		 --_podium-size: 7.5px;
	}
}
 @media only screen and (min-width: 960px) {
	 .podium-container {
		 --_podium-size: 10px;
	}
}
 .podium {
	 display: grid;
	 align-items: end;
	 grid-template-columns: repeat(3, 1fr);
	 transform-style: preserve-3d;
	 font-size: calc(var(--_podium-size) * 12);
	 font-weight: 900;
	 gap: 12px;
	 transform: rotateX(-40deg);
	 text-align: center;
}
 .podium__front {
	 background: red;
	 padding-inline: calc(var(--_podium-size) * 5);
	 padding-bottom: calc(var(--_podium-size) * 3);
	 position: relative;
	 transform-style: preserve-3d;
	 transform-origin: top;
	 transition: transform 0.25s;
}
 .podium__front:hover {
	 transform: translate3d(0, 0, 15px);
}
 .podium__center {
	 transform: translate3d(0, 0, 5px);
}
 .podium__center:hover {
	 transform: translate3d(0, 0, 20px);
}
 .podium__front::after {
	 transform-style: preserve-3d;
	 content: "";
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 transform-origin: top;
	 transform: rotatex(-90deg);
}
 .podium__left::before, .podium__right::before {
	 background: #c75600;
	 background: linear-gradient(to left, #c75600, transparent);
	 transform-style: preserve-3d;
	 content: "";
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 transform-origin: right;
	 transform: rotatey(-90deg);
}
 .podium__right::before {
	 background: linear-gradient(to right, #c75600, transparent);
	 transform-origin: left;
	 transform: rotatey(90deg);
}
 .podium__left {
	 padding-top: calc(var(--_podium-size) * 3);
	 background: #FF7B16;
}
 .podium__left::after {
	 background: #FF7B16;
	 background: linear-gradient(#FF7B16, transparent);
}
 .podium__center {
	 padding-top: calc(var(--_podium-size) * 5);
	 background: #FFB106;
}
 .podium__center::after {
	 background: #FFB106;
	 background: linear-gradient(#FFB106, transparent);
}
 .podium__right {
	 padding-top: calc(var(--_podium-size) * 1);
	 background: #FF7B16;
}
 .podium__right::after {
	 background: #FF7B16;
	 background: linear-gradient(#FF7B16, transparent);
}
 .podium__image {
	 position: absolute;
	 top: 0%;
	 left: 50%;
	 transform: translate(-50%, -80%) translatez(-55px) rotatey(0);
	 transform-style: preserve-3d;
	 transform-origin: center;
}
 .podium__image > img {
	 width: calc(var(--_podium-size) * 10);
}
 .podium__image::after {
	 content: "";
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 100%;
	 height: calc(var(--_podium-size) * 6);
	 border-radius: 100%;
	 filter: blur(20px);
	 background: #0e1303;
	 background: linear-gradient(#0e1303, transparent);
	 transform: rotatex(90deg);
}
 .podium__front:hover > .podium__image {
	 animation: rotate 10s linear infinite;
}
 @keyframes rotate {
	 to {
		 transform: translate(-50%, -80%) translateZ(-55px) rotateY(360deg);
	}
}
.leaderboard-div{
    padding: 5px;
}
.leaderboard-table{
    width: 100%;

    max-width: 100%;
    border-collapse:separate; 
    border-spacing: 0 1em;
    background-color: #f2f2f2;
    padding: 5px;
    border-radius: 5px;
}
.leaderboard-table thead {
    background-color: #000;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}
.leaderboard-table td {
    padding: 5px;
    text-align: center;
    font-size: 14px;
    background-color: #fff;
    margin-bottom: 10px;
    color: #4d4d4d;
}
.leaderboard-table td:nth-child(1) {
    border-radius: 5px 0 0 5px;
    width: 50px;
}
.leaderboard-table td:last-child {
    border-radius: 0 5px 5px 0;
}

.leaderboard-table th {
    background-color: #000;
    font-weight: bold;
    padding: 10px;
}
.leaderboard-table th:nth-child(1) {
    border-radius: 30px 0 0 30px;
}
.leaderboard-table th:last-child {
    border-radius: 0 30px 30px 0;
}
.leaderboard-table tr:nth-child(even) {
    background-color: #f9f9f9;
}
.leaderboard-table tr:hover {
    background-color: #f1f1f1;
}
.leaderboard-table .rank {
    font-weight: bold;
    font-size: 18px;
}
.leaderboard-table .name {
    font-weight: bold;
    font-size: 16px;
}
.leaderboard-account{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.leaderboard-account span{
    display: flex;
    font-size: 10px;
    font-weight: 500;
    color: #000;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 50%;
    margin-right: 10px;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
}
.leaderboard-avatar img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}