body{
    background: #111827;
    font-family:Arial, Helvetica, sans-serif;
    color: white;
    font-size:large;
}

a{
    color: white;
}

table {
    width: 100%;
}

table, th, td {
    border: 2px solid white;
    border-collapse: collapse;
    padding: 5px;
    text-align: center;
}

tbody tr:hover{
    background:#2a3444;
}

img {
    border-radius: 10px;
    height: 75px;
}

td.imageComponent{
    width: 75px;
    height: 75px;
}

td.nameComponent {
    width: 60%;
}

td.axisSystemComponent {
    width: 15%;
}

td.shapeComponent {
    width: 15%;
}

td.solvedComponent{
    width:5%;

    font-size:40px;
    font-weight:bold;
}

td.ratingComponent{
    width:5%;

    font-size:40px;
    font-weight:normal;
}

thead{
    background-color: #1a243b;
    position: sticky;
    top: 0;
}

.controls input,
.controls select{
    border-radius: 5px;
    border: 1px solid #46557c;

    background-color: #283147;

    color: white;

    padding: 10px;
    margin: 7px;
}

.stats{
    display: flex;
    gap: 12px;
    margin-bottom:5px;
}

.card{
    border-radius: 15px;
    border: 1px solid #46557c;

    background-color: #283147;

    padding: 5px;

    text-align: center;

    min-width: 150px;
}

.card h2{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 0px;
}

.card p {
    font-size: 28px;
    font-weight: bolder;
    margin: 8px;
}



.solved {
    background: #14532d;
    color: #86efac;
}

.unsolved {
    background: #4c0519;
    color: #fda4af;
}

.enjoyment10,
.difficulty0,
.difficulty1 {
    color: #32ff32;
    background: #006400;
}

.enjoyment9,
.difficulty2 {
    color: #5bff2c;
    background: #275d00
}

.enjoyment8,
.difficulty3 {
    color: #87ff27;
    background: #395500;
}

.enjoyment7,
.difficulty4 {
    color: #b5ff21;
    background: #464c00;
}

.enjoyment6,
.difficulty5 {
    color: #e6ff1c;
    background: #4e4300;
}

.enjoyment5,
.difficulty6 {
    color: #ffe516;
    background: #553a00;
}

.enjoyment4,
.difficulty7 {
    color: #ffb011;
    background: #5b3100;
}

.enjoyment3,
.difficulty8 {
    color: #ff780b;
    background: #602400;
}

.enjoyment2,
.difficulty9 {
    color: #ff3d06;
    background: #641400;
}

.enjoyment1,
.difficulty10 {
    color: #ff0000;
    background: #640000;
}

.difficulty11 {
    color: #aa0000;
    background: #430000;
}

.difficulty12 {
    color: #550000;
    background: #210000;
}

.enjoyment0 {
    font-size: 0px;
}