/* recommended card section */
#recom-container{
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    gap: 28px;
}

#post-recom-cards-container{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 28px;
    flex-wrap: wrap;
}

#actor-recom-cards-container{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 28px;
    flex-wrap: wrap;
}

#project-recom-cards-container{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 28px;
    flex-wrap: wrap;
}

#recom-show-more-button{
    padding: 6px 10px;
    border: 1px solid;
    align-self: flex-end;
    cursor: pointer;
}


/* recommended card */
.recom-card{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid;
    cursor: pointer;
    padding: 7px;
}

.recom-card-title-container{
    flex: 1;
    display: flex;
    gap: 7px;
    flex-direction: row;
    justify-content: space-between;
}

.recom-card-profile-pic{
    width: 20px;
    height: 20px;
    min-width: auto;
    border-radius: 999px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border: 1px solid #e9e9e9;
}

.recom-card-name{
    font-weight: 600;
    flex: 1;
}

.recom-card-pic{
    width: 135px;
    height: 125px;
}

.recom-card-description{
    width: 135px;
    height: 135px;
}


/* sign in/up section */
#front-sign-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 17px;
}

#front-sign-container.hidden {
    display: none;
}

#sign-in-button{
    padding: 6px 10px;
    border: 1px solid;
    cursor: pointer;
}

#sign-up-button{
    padding: 6px 10px;
    border: 1px solid;
    cursor: pointer;
}