#history{

    padding:70px 0;

}

.history-card{

    background:linear-gradient(
        180deg,
        #173985,
        #10275d
    );

    border-radius:24px;

    padding:40px;

    border:1px solid rgba(255,255,255,.08);

}

.history-card h2{

    margin-bottom:25px;

    text-align:center;

    font-size:34px;

}

table{

    width:100%;

    border-collapse:collapse;

}

thead{

    background:#0d214f;

}

th{

    padding:18px;

    text-align:center;

    color:#fff;

}

td{

    padding:18px;

    text-align:center;

    border-bottom:1px solid rgba(255,255,255,.08);

}

tbody tr:hover{

    background:rgba(255,255,255,.04);

}

strong{

    color:var(--accent);

    font-size:20px;

}

@media(max-width:768px){

table{

display:block;

overflow-x:auto;

}

}

.history-top{

    margin-bottom:25px;

}

.history-top input{

    width:100%;

    padding:16px 20px;

    border-radius:12px;

    background:#0d214f;

    color:#fff;

    border:1px solid rgba(255,255,255,.08);

}

.history-top input::placeholder{

    color:#9eb0dc;

}

#pagination{

    margin-top:30px;

    display:flex;

    justify-content:center;

    gap:10px;

    flex-wrap:wrap;

}

#pagination button{

    width:42px;

    height:42px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    background:#0d214f;

    color:#fff;

    transition:.25s;

}

#pagination button:hover{

    background:var(--accent);

    color:#111;

}

#pagination button.active{

    background:var(--accent);

    color:#111;

    font-weight:700;

}