body{background-image:linear-gradient(to top,#48c6ef 0%,#6f86d6 100%);display:grid;place-items:center}#modal-open{background-color:green;color:#fff;padding:20px;font-weight:700;font-size:20px;border:none;border-radius:5px;cursor:pointer;transition:transform .1s ease-in-out}#modal-open:active{transform:translateY(5px)}.modal-overlay{position:fixed;background:rgba(0,0,0,.6);top:0;left:0;bottom:0;right:0;display:flex;justify-content:center;align-items:center}.modal-overlay .modal-content{background-color:#fff;border-radius:5px;max-width:500px;max-height:500px;padding:20px;margin:20px}.modal-overlay .modal-content .close{display:block;background-color:transparent;border:none;cursor:pointer;margin-left:auto}.modal-container{display:none;position:absolute}.modal-container[data-modal-hidden=false] .modal-overlay .modal-content{animation:slideIn .3s cubic-bezier(0,0,.2,1)}.modal-container[data-modal-hidden=true] .modal-overlay .modal-content{animation:slideOut .3s cubic-bezier(0,0,.2,1)}.modal-container[data-modal-hidden=false] .modal-overlay{animation:fadeIn .3s cubic-bezier(0,0,.2,1)}.modal-container[data-modal-hidden=true] .modal-overlay{animation:fadeOut .3s cubic-bezier(0,0,.2,1)}@keyframes slideIn{0%{transform:translateY(15%)}to{transform:translateY(0)}}@keyframes slideOut{0%{transform:translateY(0)}to{transform:translateY(-10%)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}