:root {

    --background-color: rgba(245,245,245,0.88);

    --background-image: url("images/background.png");

}


body {

    padding-top:20px;

    color:#333;

    font-family:
    Arial,
    Helvetica,
    sans-serif;


    background-image:

    linear-gradient(
        var(--background-color),
        var(--background-color)
    ),

    var(--background-image);


    background-size:
    cover;


    background-attachment:
    fixed;


    background-position:
    center;

}

.header {

    text-align:center;

    margin-bottom:25px;

}



.header h1 {

    font-size:38px;

    margin-bottom:5px;

    color:#333;

    text-shadow:
    0 1px 0 #fff;

}



.header p {

    color:#777;

    font-size:16px;

}






.controls {

    overflow:hidden;

    background:#f5f5f5;

    border:1px solid #ddd;

    border-radius:5px;

    padding:8px 12px;

    box-shadow:

    inset 0 1px 1px rgba(0,0,0,.05);

}




.updated {

    float:right;

    color:#777;

    line-height:30px;

    margin:0;

}




.search-form {

    display:flex;

    align-items:center;

    float:left;

    margin:0;

}




.search-query {

    width:250px;

    height:20px !important;

    padding:4px 8px !important;

    margin:0 !important;

}





.search-form .btn {

    height:30px;

    padding:4px 12px;

    margin-left:5px;

}

.pagination {

    text-align:center;

    margin:20px 0;

}



.pagination a {

    text-decoration:none;

}



.pagination .btn {

    margin:0 2px;

}



.pagination button {

    background:

    linear-gradient(
        #ffffff,
        #e6e6e6
    );


    border:1px solid #ccc;

    border-radius:4px;

    padding:5px 12px;

    color:#333;

    cursor:pointer;


    box-shadow:

    inset 0 1px 0 rgba(255,255,255,.8);

}



.pagination button:hover {

    background:

    linear-gradient(
        #f5f5f5,
        #d9d9d9
    );

}



.active-page {

    background:

    linear-gradient(
        #0088cc,
        #0077b3
    ) !important;


    color:white !important;

    border-color:#006699 !important;

}







.player-grid {

    display:grid;

    grid-template-columns:
    repeat(5, 1fr);

    gap:20px;

    margin-top:10px;

}






.player-card {

    background:#fff;

    border:1px solid #ccc;

    border-radius:5px;

    overflow:hidden;


    min-height:310px;


    box-shadow:

    0 1px 3px rgba(0,0,0,.15),

    inset 0 1px 0 rgba(255,255,255,.8);


    transition:.15s;

}





.player-card:hover {

    border-color:#999;


    box-shadow:

    0 3px 8px rgba(0,0,0,.25),

    inset 0 1px 0 rgba(255,255,255,.9);

}






.card-title {

    height:32px;

    line-height:32px;


    padding:0 10px;


    font-size:14px;


    font-weight:bold;


    color:#333;



    background:

    linear-gradient(
        #ffffff,
        #eeeeee
    );



    border-bottom:1px solid #ccc;



    text-shadow:

    0 1px 0 #fff;



    white-space:nowrap;


    overflow:hidden;


    text-overflow:ellipsis;

}







.avatar-box {

    height:170px;


    display:flex;


    justify-content:center;


    align-items:center;



    background:

    linear-gradient(
        #f8f8f8,
        #e6e6e6
    );



    border-bottom:1px solid #ccc;



    box-shadow:

    inset 0 1px 5px rgba(0,0,0,.12);

}






.avatar-box img {

    width:150px;

    height:150px;

}







.stats {

    padding:10px;

    background:#fff;

}







.stat-row {

    display:flex;


    justify-content:space-between;


    align-items:center;



    padding:6px 2px;



    border-bottom:

    1px solid #eee;

}





.stat-row:last-child {

    border-bottom:none;

}






.stat-row span {

    color:#999;


    font-size:12px;


    text-transform:uppercase;

}





.stat-row b {

    color:#333;


    font-size:13px;

}





.rap {

    color:#46a546 !important;

}








@media(max-width:1200px){


    .player-grid {

        grid-template-columns:
        repeat(4,1fr);

    }


}






@media(max-width:900px){


    .player-grid {

        grid-template-columns:
        repeat(3,1fr);

    }


}







@media(max-width:700px){


    .player-grid {

        grid-template-columns:
        repeat(2,1fr);

    }


}







@media(max-width:450px){


    .player-grid {

        grid-template-columns:
        repeat(1,1fr);

    }


}