@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap";:root{--color-primary: #66B2B2;--color-secondary: #9CD7DF;--color-background: #F8F8F8;--color-surface: #FFFFFF;--color-text-primary: #333333;--color-text-secondary: #7F8C8D;--color-success: #A8DADC;--color-error:#e08181}body{margin:0;padding:0;background-color:var(--color-background);font-family:Poppins,sans-serif;color:var(--color-text-primary);font-size:15px}#app{height:100vh;background-color:var(--color-surface)}.card{min-height:100%}.card-body{max-width:80%;margin:15svh auto}.card-header{background-color:var(--color-primary);min-width:100%;border-radius:5px 5px 0 0;color:var(--color-surface);padding:.9rem 0;display:flex;align-items:center;text-align:center;justify-content:center}.card-header h1{margin-top:.5rem;margin-left:.3rem;font-size:16px;letter-spacing:.2rem}.card form{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}.card-body input[type=url]{border:none;color:var(--text-color);outline:none;border-radius:.75rem;padding:1rem 1.75rem;background-color:var(--color-background)}button{border:none;outline:none;background-color:var(--color-primary);color:#fff;cursor:pointer;transition:.3s;font-weight:700;border-radius:8px;padding:1rem}.card-body button{margin:auto;width:120px;border-radius:.75rem}.card-body:hover{opacity:.75}.card button:hover{background-color:var(--color-success)}.card-footer{width:100%;bottom:0;margin:0 auto;display:flex;flex-direction:column;font-size:.7rem;text-align:center}.copy-button{font-size:.768rem;border-radius:.25rem;background-color:var(--color-primary);color:var(--color-surface);padding:.45rem .75rem;margin-left:.75rem;cursor:pointer}.alert{position:absolute;top:-50%;left:50%;font-size:.831rem;transform:translate(-50%);padding:.5rem 1rem;border-radius:.25rem;color:#fff;opacity:0;transition:.4s;transform-origin:center}.show-alert{background-color:var(--color-success);opacity:1;top:15%}.show-alert-error{background-color:var(--color-error);opacity:1;top:15%}@media (min-width: 1024px){#app{display:flex;align-items:center;justify-content:center;height:100vh;background-color:var(--color-surface)}.card{min-height:40%;margin:20vh auto;padding:3rem 2rem;width:90%;position:relative}.card-body{max-width:80%;margin:8svh auto}.card{background-color:var(--color-surface);padding:3rem 2rem;border-radius:5px;box-shadow:0 8px 20px #0000001a;max-width:400px;width:90%;position:relative}.card-header{background-color:var(--color-primary);max-height:5rem;min-width:100%;margin-top:0;padding:0;border-radius:5px 5px 0 0;color:var(--color-surface);position:absolute;top:0;left:0;display:flex;align-items:center;text-align:center;justify-content:center}.card-header h1{margin-top:.5rem;margin-left:.3rem;font-size:16px;letter-spacing:.2rem}.card form{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}.card-body input[type=url]{border:none;color:var(--text-color);outline:none;border-radius:.75rem;padding:1rem 1.75rem;background-color:var(--color-background);margin-bottom:1rem}button{border:none;outline:none;background-color:var(--color-primary);color:#fff;cursor:pointer;transition:.3s;font-weight:700;border-radius:8px;padding:1rem}.card-body button{margin:auto;width:120px;border-radius:.75rem}.card-body:hover{opacity:.75}.card button:hover{background-color:var(--color-success)}.card-footer{width:100%;bottom:0;margin:0 auto;display:flex;flex-direction:column;font-size:.7rem;text-align:center}.alert{position:absolute;top:-50%;left:50%;font-size:.831rem;transform:translate(-50%);padding:.5rem 1rem;border-radius:.25rem;color:#fff;opacity:0;transition:.4s;transform-origin:center}.show-alert{background-color:var(--color-success);opacity:1;top:20px}.show-alert-error{background-color:var(--color-error);opacity:1;top:20px}}