#modal-container {
    position: absolute;
    top: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 5;
}

#modal-container.hidden {
    display: none;
    z-index: -999;
}


#modal {
    position: relative;
    background-color: var(--soft-purple-bg);
    border: var(--daisy-border);
    width: 40%;
    height: 55%;
    border-radius: var(--container-border-radius);
    color: black;
    z-index: 6;
}

#modal h2 {
    color: black;
}

#close-modal {
    position: absolute;
    top: 0;
    right: 0;
}

@media screen and (max-width: 768px) {
    #modal {
        width: 90%;
        overflow: scroll;
    }
}