:root {
  --body-bg: #161925;

  --lboard-header: #000;
  --lboard-header-bg: #B3A492;

  --lboard-profiles-bg: #EEE1B3;
  --lboard-rankA-bg: #714C60;
  --lboard-rankB-bg: #661F2A;
  --lboard-rankC-bg: #A64049;
  --lboard-rankD-bg: #553E4E;

  --lboard-name: #fff;
  --lboard-value: #ffffff;
}



.leaderboard {

	 max-width: 1800px;
	 width: 100%;
	 border-radius: 12px;
	     display: flex;
  align-items: flex-end;
}
 .leaderboard .mheader {
	 --start: 15%;
	 height: 5vh;
	 color: var(--lboard-header);
	 background-color: var(--lboard-header-bg);
	 position: relative;
	 border-radius: 12px 12px 0 0;
	 overflow: hidden;
}
 .leaderboard .mheader .leaderboard__title {
	 position: absolute;
	 z-index: 2;
	 top: 50%;
	 right: calc(var(--start) * .75);
	 transform: translateY(-50%);
	 text-transform: uppercase;
	 margin: 0;
}
 .leaderboard .mheader .leaderboard__title span {
	 display: block;
}
 .leaderboard .mheader .leaderboard__title--top {
	 font-size: calc(6px + 1vmin);
	 font-weight: 700;

}
 .leaderboard .mheader .leaderboard__title--bottom {
	 font-size: calc(4px + 1vmin);
	 font-weight: 500;

	 opacity: 0.65;
	 transform: translateY(-2px);
}

 .leaderboard__profiles {
	 background-color: var(--lboard-profiles-bg);
	 border-radius: 0 0 12px 12px;
	 padding: 15px 15px 20px;
	 display: grid;
	 row-gap: 8px;
}
 .leaderboard__profile {
	 display: grid;
	 grid-template-columns: 1fr 1fr 3fr 2fr;
	 align-items: center;

	 overflow: hidden;
	 border-radius: 10px;
	 box-shadow: 0 5px 7px -1px rgba(51, 51, 51, 0.23);
	 transition: transform 0.25s cubic-bezier(0.7, 0.98, 0.86, 0.98), box-shadow 0.25s cubic-bezier(0.7, 0.98, 0.86, 0.98);
	 height: 5vh;
    width: 100%;
}
.rankA {
  background-color: var(--lboard-rankA-bg);
}
.rankB {
  background-color: var(--lboard-rankB-bg);
}
.rankC {
  background-color: var(--lboard-rankC-bg);
}
.rankD {
  background-color: var(--lboard-rankD-bg);
}

.leaderboard__number {
	font-size: calc(7px + 2vh);
	font-weight: bold;

    padding: 0px 0px 0px calc(14px + 2vh);
    height: 100%;
	width: 140%;
    margin-left: -70%;
	min-width: 50px;

	 border-radius: 50%;
	 text-align: center;

}
.num1{
    background: #AEDA49;
}
.num2{
    background: #FFFF00;
}
.num3{
    background: #FFE000;
}
.num4{
    background: #4898D8;
}

 .leaderboard__picture {
	 max-width: 60px;
	 width: 4vh;
	 border-radius: 50%;
	 box-shadow: 0 0 0 0.5vh #ebeef3, 0 0 0 0.5vh #f3f4f6;

}

 .leaderboard__name {
	 color: var(--lboard-name);
	 font-weight: 600;

	 margin-left: 2px;
    padding-left: 10px;
}
 .leaderboard__value {
	 color: var(--lboard-value);
	 font-weight: 700;

	 text-align: right;
       padding-right: 10px;
}