:root{font-size:16px}*,*::before,*::after{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:baseline;font-family:inherit;font-size:inherit;border:none;outline:none;text-decoration:none}button{cursor:pointer}main{display:-ms-grid;display:grid;place-items:center;min-height:100vh}.overlay{z-index:1;position:fixed;width:100%;background-color:rgba(0,0,0,0.6);top:0;min-height:100vh;opacity:0;pointer-events:none;-webkit-transition:.5s all ease;-o-transition:.5s all ease;transition:.5s all ease}.overlay.active{opacity:1;pointer-events:all}.toggle-btn{background-color:black;color:white;padding:1rem 2rem;border-radius:.4rem}.modal{z-index:2;-webkit-box-shadow:rgba(0,0,0,0.24) 0px 3px 8px;box-shadow:rgba(0,0,0,0.24) 0px 3px 8px;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;background-color:white;position:fixed;top:1rem;padding:2rem;margin:0 1rem;border-radius:.6rem;-webkit-transform:translateY(-130%);-ms-transform:translateY(-130%);transform:translateY(-130%);opacity:0;-webkit-transition:.5s all ease;-o-transition:.5s all ease;transition:.5s all ease}.modal.open{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1}.modal__title{font-size:1.5rem;margin-bottom:.8rem}.modal__buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end;margin-top:2rem}.modal__buttons__btn{padding:.6rem 1rem;border-radius:.4rem}.modal__buttons__btn--close{margin-right:.6rem;background-color:#ccc}.modal__buttons__btn--save{background-color:black;color:white}