/* ****************************************
CSS Only Modal using target
https://dev.to/mandrewdarts/
**************************************** */

/* Greeting Modal Container */

[id*="modal_"] {
visibility: hidden;
opacity: 0;
-webkit-transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
-o-transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* Greeting Modal Container - when open */
[id*="modal_"]:target {
visibility: visible;
opacity: 1;
}

/* Greeting Modal */
[id*="modal_"] .modal {
opacity: 0;
-webkit-transform: translateY(-1rem);
        -ms-transform: translateY(-1rem);
    transform: translateY(-1rem);
-webkit-transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1);
-o-transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1);
-webkit-transition-delay: .2s;
     -o-transition-delay: .2s;
        transition-delay: .2s;
}

/* Greeting Modal - when open */
[id*="modal_"]:target .modal {
-webkit-transform: translateY(0);
        -ms-transform: translateY(0);
    transform: translateY(0);
opacity: 1;
}

/* Modal Container Styles */
.modal-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}

/* Modal Background Styles */
.modal-bg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .2);
}

/* Modal Body Styles */
.modal {
z-index: 1;
background-color: white;
width: 80%;
max-width: 500px;
padding: 1rem;
border-radius: 8px;
}

.modal h3, p, a {
color: black;
}

.modal a:hover {
color: grey;
}