user.css

:root {
    --primary: #664df6;
    --primary-dark: #523adc;
    --primary-darker: #3c2aa8;
    --primary-darkest: #0c0531;
}

@font-face {
    font-family: 'Config';
    src: url('cr.ttf');
}

@font-face {
    font-family: 'Config Bold';
    src: url('cb.ttf');
}

@font-face {
    font-family: 'Hun DIN 1451';
    src: url('hun.ttf');
}

body {
    background: var(--primary-darkest);
}

p {
    color: white;

    font-family: 'Config', sans-serif;

    white-space: pre;
}

.hide-warning {
    font-family: 'Config', sans-serif;

    background: repeating-linear-gradient(-45deg, #d02405, #d02405 10px, #a61b02 10px, #a61b02 20px);

    border: 1px solid #d02405;
    border-radius: 4px;

    padding: 20px;

    width: max-content;

    margin: auto;
}

#stats-container {
    margin: 30px;
}

#title {
    font-family: 'Hun DIN 1451', sans-serif;
    font-size: 56pt;

    text-align: center;

    color: white;

    margin-bottom: 0;
}

.header-container h2 {
    font-family: 'Config', sans-serif;

    position: relative;

    bottom: -15px;

    padding-right: 10px;
    margin: 0;

    display: inline-block;

    background-color: var(--primary-darkest);
}

#win-rate-scale,
#tl-win-rate-scale {
    font-family: 'Config', sans-serif;

    color: white;

    display: flex;

    justify-content: space-evenly;
}

#win-rate-scale div,
#tl-win-rate-scale div {
    padding: 8px;

    font-family: 'Config Bold', sans-serif;
}

#win-scale,
#tl-win-scale {
    background: repeating-linear-gradient(-45deg, #46ad51, #46ad51 10px, #379641 10px, #379641 20px);
    border-radius: 4px 0 0 4px;
    border: 1px solid #46ad51;
    border-right: none;

    text-align: right;

}

#loss-scale,
#tl-loss-scale {
    background: repeating-linear-gradient(45deg, #ff3813, #ff3813 10px, #d02405 10px, #d02405 20px);

    border-radius: 0 4px 4px 0;
    border: 1px solid #ff3813;
    border-left: none;
}

#tl-grade-info {
    color: white;
}

#grade {
    font-size: 40pt;
    font-family: 'Config Bold', sans-serif;

    padding-right: 16px;
}

#tr-container,
#xp-container {
    font-size: 30pt;

    color: #717171;

    font-family: 'Config', sans-serif;
}

#tr,
#xp,
#pb-time-40l {
    color: white;

    font-family: 'Config Bold', sans-serif;
}

#rank-graph {
    width: 100%;

    display: flex;

    flex-direction: row-reverse;
}

.grade-box {
    height: 60px;

    border: 1px solid var(--primary-darkest);

    padding-left: 8px;

    font-family: 'Config Bold', sans-serif;
    font-size: 40px;

    color: #0000005f;

    text-overflow: clip;
    
    display: flex;
    align-items: center;
    
    position: relative;
    left: auto;
}

.grade-box span {
    overflow: hidden;
}

#tr-pointer {
    position: absolute;
    margin-bottom: -90px;

    z-index: 1;

    transform: translate(-50%, -46%);
}

#grade-box-d {
    border-radius: 4px 0 0 4px;
}

#grade-box-x+ {
    border-radius: 0 4px 4px 0;
}

.leaderboard-entry {
    background-color: #664df631;

    border-radius: 4px;

    padding: 8px;

    color: white;

    display: flex;

    margin: auto;
    margin-top: 4px;

    width: 60%;
}

.leaderboard-you {
    background-color: #664df654;
}

.leaderboard-entry .placement {
    font-family: 'Config', sans-serif;

    width: 150px;
}

.leaderboard-entry .name {
    font-family: 'Config Bold', sans-serif;

    width: 50%;
}

.leaderboard-entry .glicko {
    font-family: 'Config', sans-serif;

    width: 50%;

    text-align: center;
}

.leaderboard-entry .tr {
    font-family: 'Config', sans-serif;

    width: 50%;

    text-align: center;
}

.leaderboard-entry .rank {
    font-family: 'Config Bold', sans-serif;

    width: 100px;

    text-align: center;
}

.leaderboard-title {
    background: none;
}

.leaderboard-title span {
    font-family: 'Config', sans-serif !important;
}

h3 {
    width: 100%;

    text-align: center;

    color: white;

    font-family: 'Config Bold', sans-serif;
}

.leaderboard-container {
    font-family: 'Config', sans-serif;

    color: white;

    text-align: center;
}

#tc-link {
    font-family: 'Hun DIN 1451';

    text-align: center;
    text-decoration: dotted;
    
    color: #79e25e;
    
    display: block;
}

.tl-game {
    font-family: 'Config Bold', sans-serif;
    
    margin: auto;

    width: 60%;
    
    color: black;

    border-radius: 4px;

    height: 36px;

    display: inline-flex;

    justify-content: space-between;

    position: relative;
}

.tl-game.user-win {
    background: repeating-linear-gradient(-45deg, #ffa742, #ffa742 10px, #f19a38 10px, #f19a38 20px);
}


.tl-game.user-lose {
    background: repeating-linear-gradient(-45deg, #8b8bff, #8b8bff 10px, #7c7cf3 10px, #7c7cf3 20px);
}

.tl-game .user {
    font-family: 'Config Bold', sans-serif;

    padding-left: 8px;
    padding-right: 8px;

    position: relative;

    border-radius: 4px 0 0 4px;

    line-height: 36px;

    display: inline-block;
}

.tl-game .user.loser {
    background-color: #1e1357;

    color: white;
}

.tl-game .user.loser::after {
    background-color: #1e1357;
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    bottom: 0;
    width: 6px;
    clip-path: polygon(0 0, 100% 0, 0 50%, 100% 100%, 0 100%);
}

.tl-game .opponent {
    font-family: 'Config Bold', sans-serif;

    padding-left: 8px;
    padding-right: 8px;

    position: relative;

    border-radius: 0 4px 4px 0;

    text-align: right;

    line-height: 36px;

    display: inline-block;
}

.tl-game .opponent.loser {
    background-color: #1e1357;

    color: white;
}

.tl-game .opponent.loser::before {
    background-color: #1e1357;
    content: '';
    position: absolute;
    top: 0;
    right: calc(100% - 1px);
    bottom: 0;
    width: 6px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, calc(100% - 1px) 50%);
}

.tl-score {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tl-game-container {
    font-family: 'Config Bold', sans-serif;

    color: white;

    line-height: 36px;

    margin: auto;
    padding-bottom: 8px;

    width: 100%;

    display: flex;
}

.user-label, .opponent-label {
    display: inline-block;

    width: 20%;
}

.user-label {
    text-align: right;

    margin-right: 8px;
}

.opponent-label {
    text-align: left;
    
    margin-left: 8px;
}

#recent-tl-games {
    display: flex;

    flex-direction: column;
    justify-content: center;
}

#last-hr {
    border: none;
    border-top: 1px solid #aa98ff3a;
}

#last-updated {
    color: #aa98ff3a;

    text-align: center;
}

#pb-time-40l {
    font-size: 30pt;
}