.header{
    background-color: slategrey;
    color: whitesmoke;
    padding: 10px;
    margin:auto;
    display:grid;
    grid-template-columns: 1fr auto 1fr;
}
body{
    margin: 0;
    background-color: #222222;
    color: azure;
}
.center{
    text-align:center;
}
.new-records{
    display:grid;
    grid-template-columns: 1fr 1fr;
}
.record-list{
    list-style: none;
}
.card{
    background-color: #333333;
    margin: 1rem;
    padding: 1rem;
    border-radius: 0.3rem;
}
.date{
    font-size:0.8em;
    color:#dddddd
}
.ranking{
    display: flex;
    
}
.ranking-menu{
    background-color: #444444;
    padding: 10px;
    height: 100%;
}
.ranking-menu a{
    color:#dddddd;
}

.flex{
    display: flex;
}
.number{
    font-variant-numeric: tabular-nums;
}
.ranking-record{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}
.ranking-card{
    width:100%
}
.full-width{
    flex: 0.8;
}
.player-name{
    flex:0.8
}
.rank{
    width:20px;
    display: flex;
}
.rank-number{
    margin-left: auto;
}
.input-name-form{
    margin-left: auto;
}
.highlight-self-score{
    color:#ee0000
}
.category-tytle{
    margin :auto;
}
.ranking-content{
    display:flex;
    flex-direction: column
}