/* Modals */

.modal-overlay {
    /* not displayed until opened (switched to flex display for centering) */
    display: none;

    /* spans entire viewport, hortizontally and vertically */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* translucent gray */
    background-color: rgba(0, 0, 0, 0.5);

    /* child(ren) centered horizontally */
    justify-content: center;

    /* child(ren) centered vertically */
    align-items: center;

    z-index: 2;
}

.modal-container {
    /* stlying: white background, rounded corners, box shaddow, spacing for content */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;

    /* width of 90% of parent / viewport, up to 500px max width */
    width: 90%;
    max-width: 800px;

    /* height of 80% of parent / viewport */
    height: 80%;
    max-height: 80%;

    /* children (header and content) one right after another, vertically */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.modal-header-container {
    /* children on either end, vertically centered */
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* space before content */
    margin-bottom: 20px;

    /* positioned element, if using CSS close button rather than a graphic */
    position: relative;
}

.modal-content-container {
    /* scrolling for long content */
    overflow: auto;

    /* spacing between content and scroll bar */
    padding-right: 15px;

    font-family: "Open Sans", sans-serif;
}

.modal-container h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.75rem;
    color: black;

    /* no default spacing around text */
    margin: 0;
}

.btn-close {
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;

    /* no default border and background */
    background: none;
    border: none;
}

.btn-close:hover {
    opacity: 0.5;
    cursor: pointer;
}


/* Scrollbar Styles */
.modal-content-container::-webkit-scrollbar {
    width: 15px;
}

.modal-content-container::-webkit-scrollbar-track {
    /* outlined track, rounded corners */
    box-shadow: inset 0 0 5px gray;
    border-radius: 10px;
}

.modal-content-container::-webkit-scrollbar-thumb {
    /* white slider, outlined, rounded corners */
    background-color: #fff;
    box-shadow: inset 0 0 5px gray;
    border-radius: 10px;
}

.modal-content-container::-webkit-scrollbar-thumb:hover {
    /* gray slider on hover */
    background-color: lightgray;
}