.backdrop{z-index:10;background:#000000bf;width:100%;height:100dvh;position:fixed;top:0;left:0}.backdrop.show{animation:.2s fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
.modal{z-index:100;background:var(--color-surface);border-radius:10px;flex-direction:column;width:80%;max-height:60%;display:flex;position:fixed;top:22vh;left:10%;box-shadow:3px 3px 5px #0000004d}.modal__header{background:var(--color-button-primary);color:#fff;border-radius:10px 10px 0 0;width:100%;padding:.75rem 1rem}.modal__header h2{margin:.25rem;font-size:1.3rem}.modal__content{color:var(--color-text-primary);padding:1.5rem}.modal__footer{border-top:1px solid #e0e0e0;padding:0 .5rem}.modal__footer .button{padding:12px 10px;font-size:1.1rem}.modal.show{animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10rem)}to{opacity:1;transform:translateY(0)}}@media (min-width:768px){.modal{width:40rem;left:calc(50% - 20rem)}.modal__header{padding:1rem}.modal__header h2{margin:.5rem;font-size:2rem}.modal__footer .button{padding:16px 12px;font-size:1.3rem}}