* { padding: 0; margin: 0; } .popup-container { width: 100vw; height: 100vh; background-color: #ffffff; opacity: 1; transition: background-color 0.5s ease-in, opacity 0.5s ease-in; } .popup-container.show { background-color: #000000; opacity: 40%; } #trigger-modal, .popup-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } .popup-modal { position: absolute; width: 30%; border: 1px solid black; background-color: white; display: flex; justify-content: space-between; visibility: hidden; } .popup-modal.show { visibility: visible; }