@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}:root{--dark: #34495E;--light: #ffffff;--success: #0ABF30;--error: #E24D4C;--warning: #E9BD0C;--info: #3498DB}body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:-webkit-linear-gradient(90deg,#008bc9,#4ae184);background:linear-gradient(90deg,#008bc9,#4ae184)}.notifications{position:fixed;top:30px;right:20px}.notifications :where(.toast,.column){display:flex;align-items:center}.notifications .toast{position:relative;overflow:hidden;list-style:none;border-radius:4px;padding:16px 17px;margin-bottom:10px;background:var(--light);justify-content:space-between;animation:show_toast .3s ease forwards}@keyframes show_toast{0%{transform:translate(100%)}40%{transform:translate(-5%)}80%{transform:translate(0)}to{transform:translate(-10px)}}.notifications .toast.hide{animation:hide_toast .3s ease forwards}@keyframes hide_toast{0%{transform:translate(-10px)}40%{transform:translate(0)}80%{transform:translate(-5%)}to{transform:translate(calc(100% + 20px))}}.toast:before{position:absolute;content:"";height:3px;width:100%;bottom:0;left:0;animation:progress 5s linear forwards}@keyframes progress{to{width:0}}.toast.success:before,.btn#success{background:var(--success)}.toast.error:before,.btn#error{background:var(--error)}.toast.warning:before,.btn#warning{background:var(--warning)}.toast.info:before,.btn#info{background:var(--info)}.toast .column i{font-size:1.75rem}.toast.success .column i{color:var(--success)}.toast.error .column i{color:var(--error)}.toast.warning .column i{color:var(--warning)}.toast.info .column i{color:var(--info)}.toast .column span{font-size:1.07rem;margin:0 16px}.toast i:last-child{color:#aeb0d7;cursor:pointer}.toast i:last-child:hover{color:var(--dark)}@media screen and (max-width: 530px){.notifications{width:95%}.notifications .toast{width:100%;font-size:1rem;margin-left:20px}}