body {

    background:
        linear-gradient(
            180deg,
            #111827,
            #1f2937
        );

    min-height: 100vh;
}

@media (max-width: 768px) {

    body {
        font-size: 1.08rem;
    }

    .btn {
        font-size: 1rem;
        padding: 0.6rem 0.9rem;
    }

    .card-body {
        padding: 1rem;
    }

    .table {
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {

    .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }
}

.navbar {

    background:
        #030712 !important;

}

.card {

    border-radius: 18px;

    box-shadow:
        0 10px 25px rgba(
            0,
            0,
            0,
            .25
        );
}

h1,
h2,
h3 {

    color: white;

    font-weight: 700;
}

.navbar .nav-link {

    color: white !important;
}

.navbar .navbar-brand {

    color: white !important;
}

.btn-outline-primary {

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

    color: white;

    border-color:
        rgba(
            255,
            255,
            255,
            .25
        );
}

.btn-outline-primary:hover {

    background:
        rgba(
            255,
            255,
            255,
            .15
        );
}

.alert {

    color: inherit;
}

.table {

    background: white;
    border-radius: 16px;
    overflow: hidden;
}

.avatar-lg {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-ranking {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
}

.badge {
    border-radius: 12px;
}

.btn {
    border-radius: 12px;
}



.ranking-card {

    padding: 0.85em;

    transition: .2s;

    margin-bottom: 15px;
}

.ranking-card:hover {

    transform: translateY(-2px);
}

.ranking-medal {

    font-size: 2rem;

    width: 50px;

    text-align: center;
}

.ranking-points {

    font-size: 1.6rem;

    font-weight: 700;

    white-space: nowrap;
}

.avatar-ranking {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    object-fit: cover;
}

.ranking-rank {

    min-width: 50px;

    text-align: center;
}

.card:hover {

    transform: translateY(-2px);

    transition: .2s;
}

label {
    color: white;
}

.forum-topic-card {

    transition: all .15s ease;
}

.forum-topic-card:hover {

    transform: translateY(-2px);

    box-shadow:
        0 4px 12px rgba(0,0,0,.25);
}

@media (max-width: 768px) {

    .forum-topic-card .card-body {

        padding: .8rem;
    }

    .forum-topic-card .fw-bold {

        font-size: 1rem;
    }
}