@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); html, body { height: 100%; } body { font-family: Roboto, sans-serif; margin: 0; background: #aaa; color: #333; /* I'll give you this one for free lol */ display: flex; align-items: center; justify-content: center; } .modal { background: white; width: 480px; border-radius: 10px; box-shadow: 2px 4px 16px rgba(0,0,0,.2); display: flex; gap: 16px; padding: 16px; } .icon { color: royalblue; font-size: 26px; font-weight: 700; background: lavender; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .close-button { background: #eee; border-radius: 50%; color: #888; font-weight: 400; font-size: 16px; height: 24px; width: 24px; display: flex; align-items: center; justify-content: center; } button { padding: 8px 16px; border-radius: 8px; } button.continue { background: royalblue; border: 1px solid royalblue; color: white; } button.cancel { background: white; border: 1px solid #ddd; color: royalblue; } .header { display: flex; align-items: center; justify-content: space-between; font-size: 18px; font-weight: 700; margin-bottom: 8px; } .text { margin-bottom: 16px; }