.modal { z-index: 99; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; padding: 5%; background: rgba(0,0,0,0.5); backdrop-filter: blur(1px); --modal-gray: #0e0f0e; } .modalContainer { background: var(--modal-gray, #0e0f0e); color: #ccc; width: 100%; height: 100%; padding: 20px; border-radius: 20px; overflow-y: auto; position: relative; clear: none; } .modalText { max-width: 45em; margin: 0 auto; } .modalClose { float: right; position: relative; background: var(--modal-gray, #0e0f0e); border-radius: 50%; width: 2em; height: 2em; font-family: sans-serif; margin-top: -3em; margin-bottom: 1em; z-index: 100; } .modalCloseAlign { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; color: #fff; text-decoration: none; } /* Firefox */ .modalContainer { scrollbar-width: auto; scrollbar-color: var(--repl-color, #188a18) var(--modal-gray, #0e0f0e); } /* Chrome, Edge, and Safari */ .modalContainer::-webkit-scrollbar { width: 16px; } .modalContainer::-webkit-scrollbar-track { background: var(--modal-gray, #0e0f0e); border-bottom-right-radius: 20px; border-top-right-radius: 20px; } .modalContainer::-webkit-scrollbar-thumb { background-color: var(--repl-color, #188a18); border-radius: 20px; border: none; }