body{
    font-family: sans-serif;
}

/* .formPanel{
    display: none;
    background-color: rgb(239, 255, 167);
    width: 300px;
    height: 400px;
    position: absolute;
    top: 3em;
    margin: 0 auto;
} */
.all-cards{
    display: flex;
    flex-flow: row;
    flex-wrap: wrap; 
    width: 100vw;

}
.card{
    flex-basis: 400px;
    height: 400px;
    border: 1px solid rgb(147, 93, 255);
    padding: 4px;
}

.card-header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.card-header h6{
    margin: 0;
    font-size: 1.8ch;
}

.card .topics {
    display: inline-block;
    margin-bottom: 16px;
    
}
.card .topics > * {
    font-size: 1.8ch;
    color: white;
    background-color: rgb(147, 93, 255);
}

.topic-tag::before{
    content: "—";
}

.btn {
    text-decoration: none;
    background-color: white;
    border: none;
    color: grey;
}

.btn:hover{
    cursor: pointer;
    background: grey;
    color: white;
    transition: background 0.4s, color 0.4s;
}