/* Specific styling for the accordions / cards in general */
#card {
    background: linear-gradient(90.24deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid #845C38;
    border-radius: 6px;
}
#btn-link {
    width: 100%;
    height: 100%;
    color: #FFFBF5;
    text-decoration: none;
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    text-align: left;

}
.card-bean-name {
    color: #FFFBF5;
    padding-left: 11px;
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
}
.card-bean-body {
    color: #FFFBF5;
    padding-left: 11px;
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
}
/* Specific Styling for the Recommender Card*/
.recommender-card-head {
    padding: 24px 45px 0px 45px;
    color: #FFFBF5;
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 33.18px;
    line-height: 30px;
}
.recommender-card-body {
    padding: 24px 45px 0px 45px;
    color: #FFFBF5;
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-size: 19.2px;
    line-height: 30px;
}
#recommender-image {
    padding: 32px 64px 0px 64px;
    width: 100%;
    height: 100%;
}
.recommender-card-text {
    padding: 6px 45px 6px 45px;
    color: #FFFBF5;
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
}

a:link {
    color: #9C7744;
}
a:visited {
    color: #9C7744;
}
#roaster-url:hover {
    color: #49371e;
}
/* Welcome CSS */
#welcome-header {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    color: #FFFBF5;
    padding-bottom: 16px;
}
#welcome-text {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: #CDCDCD;
    padding-bottom: 24px;
}
/* */
.custom-card {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(17, 25, 40, 0.75);
    border-radius: 3px !important;
}

.custom-button {
    background-color: #9C7744;
    color: #9C7744;
}

.btn-primary {
    background-color: #9C7744 !important;
    color: #FFFBF5 !important;
    width: 200px;
    height: 50px;
    border-color:#9C7744 !important;
    border-radius: 6px !important;
}

.btn-primary:hover {
    background-color: #49371e !important;
    border-color:#49371e !important;
}