.category-card {
    position: relative;
    margin: 10px;
    aspect-ratio: 1 / 1.6;
    background-color: #fffec8;
    border-radius: 10px;
    padding: 0;
    width: 15vw;
}

.category-card.new-card {
    background-color: #fffd00;
}

.category-card .card-new {
    font-family: "Helvetica", sans-serif;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    top: 5%;
    right: 5%;
    text-decoration: none;
    color: red;
    background-color: #fffd00;
    border: 3px solid #fffd00;
    border-radius: 10px;
}

@media (max-width: 765px) {
    .category-card {
        width: 20vw;
    }
}

@media (max-width: 576px) {
    .category-card {
        width: 40vw;
    }
}

.category-card .card-container {
    position: absolute;
    top: 2%;
    left: 3%;
    width: 94%;
    height: 96%;
}

@media (max-width: 765px) {
    .category-card .card-container {
        position: absolute;
        top: 4%;
        left: 6%;
        width: 88%;
        height: 92%;
    }
}

.category-card .card-body {
    min-height: 40%;
}

.category-card .card-header {
    min-height: 40%;
}

.category-card .card-footer {
    min-height: 20%;
}

.category-card .card-banner {
    position: absolute;
    background-color: #fffec8;
    padding: 0;
    text-align: center;
    top: 50%;
    width: 100%;
    height: 20%;
    transform: skewY(-18deg);
    font-size: 2.5vw;
}

.category-card .card-banner.new-card {
    background-color: #fffd00;
}

@media (max-width: 576px) {
    .category-card .card-banner {
        font-size: 6vw;
    }
}

.category-card .card-main-text {
    font-family: FontLobster, sans-serif;
    font-weight: bold;
}

.category-card .card-footer {
    text-align: center;
}

.category-card .card-footer-text {
    font-family: AirAmericana, sans-serif;
    font-size: 3vw;
    color: #fff;
}

@media (max-width: 576px) {
    .category-card .card-footer-text {
        font-size: 6vw;
    }
}

.category-card .card-stars {
    font-size: 1vw;
    color: #fffec8;
}

@media (max-width: 576px) {
    .category-card .card-stars {
        font-size: 2vw;
    }
}

.category-card .card-star-1 {
    position: absolute;
    top: 45%;
    left: 5%
}

.category-card .card-star-2 {
    position: absolute;
    top: 45%;
    left: 15%
}

.category-card .card-star-3 {
    position: absolute;
    top: 45%;
    left: 25%
}

.category-card .card-star-bottom-1 {
    position: absolute;
    top: 70%;
    left: 88%
}

.category-card .card-star-bottom-2 {
    position: absolute;
    top: 70%;
    left: 78%
}

.category-card .card-star-bottom-3 {
    position: absolute;
    top: 70%;
    left: 68%
}

.category-card .card-header {
    font-family: AirAmericana, sans-serif;
    font-size: 1.5vw;
}

@media (max-width: 576px) {
    .category-card .card-header {
        font-size: 3vw;
    }
}


.category-card .card-quizzes-count {
    font-family: "Helvetica", sans-serif;
    color: white;
    background-color: red;
    position: absolute;
    width: 100%;
    top: 33%;
    text-align: center;
}

.category-card .card-completed {
    color: #fffec8;
    position: absolute;
    width: 100%;
    top: 5%;
    text-align: center;
    font-size: 12vw;
}

@media (max-width: 576px) {
    .category-card .card-completed {
        font-size: 24vw;
    }
}

.category-card .card-completed-symbol {
    position: absolute;
    width: 100%;
    top: 15%;
    text-align: center;
    font-size: 1.5vw;
}

.category-card .card-completed-symbol i {
    color: #fffec8;
    font-size: 4rem;
}

@media (max-width: 765px) {
    .category-card .card-completed-symbol {
        top: 20%;
    }
}

@media (max-width: 576px) {
    .category-card .card-completed-symbol {
        top: 23%;
        font-size: 3vw;
    }
}

.category-card .card-progress {
    position: absolute;
    bottom: 0;
    height: 3%;
    width: 60%;
    background-color: #07ff00;
}

.category-card .card-progress-bg {
    position: absolute;
    bottom: 0;
    height: 3%;
    width: 100%;
    background-color: black;
}