@import "https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600&display=swap";:root{--blue:#2975bf;--blue-dark:#315c86;--blue-faint:#f0f5fa;--green:#22b573;--red:#e74c3c;--gray-dark:#4d5155;--gray-medium:#979797;--gray-cloud:#f6f6f6;--white:#fff}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--gray-cloud);color:var(--gray-dark);justify-content:center;align-items:center;min-height:100vh;font-family:Titillium Web,sans-serif;display:flex}#app{text-align:center;width:100%;max-width:400px;padding:2rem}.card{background:var(--white);border-radius:5px;padding:2.5rem 2rem;box-shadow:0 0 .25em #43475545,0 .25em 1em #5a7dbc0d}.icon{border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 1.5rem;font-size:28px;display:flex}.icon--loading{background:var(--blue-faint);color:var(--blue);animation:2s ease-in-out infinite pulse}.icon--success{color:var(--green);background:#e8f8ef}.icon--error{color:var(--red);background:#fdecea}.title{color:var(--gray-dark);margin-bottom:.5rem;font-size:22px;font-weight:600}.message{color:var(--gray-medium);font-size:16px;line-height:1.5}.spinner{border:3px solid var(--blue-faint);border-top-color:var(--blue);border-radius:50%;width:40px;height:40px;margin:0 auto 1.5rem;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}