input {
    margin-top: 20px;
    margin-bottom: 10px;
}

.card-container {
    margin-top: 10px;
    justify-content: left;
}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.03); }
   
#frequent {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.freq-card {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 5px 11px;
    border-radius: 4px;
    margin-right: 5px;
    margin-bottom: 3px;
}

.card {
    background: #3a3a3a;
    color: white;
    border: 1px solid #444444;
    margin-top: 10px;

    width: 130px;
    margin-bottom: 10px;
}
@media (min-width: 480px) and (max-width: 768px) {
    .card {
        width: 140px;
    }
}
@media (min-width: 768px)  and (max-width: 1024px) {
    .card {
        width: 150px;
    }
}
@media (min-width: 1024px)  and (max-width: 1224px) {
    .card {
        width: 200px;
    }
}
@media (min-width: 1224px) {
    .card {
        width: 250px;
    }
}

.card a:hover {
    text-decoration-line: none;
}

.card p {
    color: white;
}