.backdrop{position:fixed;top:0;left:0;width:100%;height:100dvh;background:rgba(0,0,0,.75);z-index:10}.backdrop.show{animation:fadeIn .2s ease}.modal{z-index:100;position:fixed;top:22vh;left:10%;width:80%;max-height:60%;background:var(--color-tertiary);box-shadow:3px 3px 5px rgba(0,0,0,.3);border-radius:10px;display:flex;flex-direction:column}.modal__header{width:100%;padding:1rem;background:var(--color-secondary);color:white;border-radius:10px 10px 0 0}.modal__header h2{margin:.5rem}.modal__content{padding:1.5rem;color:black}.modal__footer{padding:0 .5rem;border-top:1px solid #e0e0e0}.modal.show{animation:fadeIn .3s ease}@keyframes fadeIn{0%{transform:translateY(-10rem);opacity:0}to{transform:translateY(0);opacity:1}}@media (min-width:768px){.modal{left:calc(50% - 20rem);width:40rem}}