*{box-sizing:border-box}body{display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0;flex-direction: column;}button{border:0;background-color:#0ff;border-radius:5px;box-shadow:0 2px 4px rgba(0,0,0,.2);font-size:14px;padding:10px 25px;cursor:pointer}.modal-container{display:flex;background:rgba(0,0,0,.6);align-items:center;justify-content:center;position:fixed;pointer-events:none;top:0;left:125%;height:100vh;width:100vw;transition:.5s all ease-in-out}.modal{background:#fff;width:600px;max-width:80%;padding:30px 50px;border-radius:5px;box-shadow:0 2px 4px rgba(0,0,0,.2);text-align:center}.active{pointer-events:auto;left:0}