.input-area {
    margin-top: 2rem;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    border: solid 1px #e6e6e6;
    border-radius: 10px;
    padding-bottom: 2rem;
    color: #BA0F30;
    background-color: white;
}

.input-area .input-group :focus {
    box-shadow: 0 0 0 0.25rem #BA0F30;
}

#input-small-heading {
    color: #787878;
}

#preview-heading {
    color: #BA0F30;
}

#fonts-preview {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    overflow-x:hidden;
    height: 70vh;
    background-color: white;
}

.col-1 > .copy-button {
    justify-content: center;
    place-items: center;
}

.font-text > h3 {
    word-wrap: break-word;
    width: calc(100% - 10px);
}

.font-name {
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    opacity: 0.7;
}

.copy-button {
    display: none;
    margin-top: auto;
    margin-bottom: auto;
    text-align: left;
    margin-left: -1.5rem;

    --bs-btn-color: #fff;
    --bs-btn-bg: #BA0F30;
    --bs-btn-border-color: #BA0F30;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #86061f;
    --bs-btn-hover-border-color: #BA0F30;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #BA0F30;
    --bs-btn-active-border-color: #BA0F30;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #BA0F30;
    --bs-btn-disabled-border-color: #BA0F30;
}

.single-font-preview:hover .copy-button{
    display: block;
}

#load-more-button-area {
    text-align: center;
    margin-top: 2rem;
}

#load-more-button-area > button {
    height: 70px;
    width: 200px;
    font-size: large;
    font-weight: 500;

    --bs-btn-color: #BA0F30;
    --bs-btn-border-color: #BA0F30;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #BA0F30;
    --bs-btn-hover-border-color: #BA0F30;
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #BA0F30;
    --bs-btn-active-border-color: #BA0F30;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #BA0F30;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #BA0F30;
    --bs-gradient: none;
}