* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{
   background-color: #f7edff;
}

.buttons {
   margin: 50px;
}

.buttons button{
   background-color: #333;
   color: #fff;
   border: 0;
   outline: 0;
   width: 120px;
   height: 40px;
   margin: 5px;
   cursor: pointer;
}

#toast-box{
   position: absolute;
   bottom: 30px;
   right: 30px;
   display: flex;
   align-items: flex-end;
   flex-direction: column;
   overflow: hidden;
   padding: 20px;
}

.toast{
   width: 400px;
   height: 80px;
   background-color: #fff;
   font-weight: 500;
   margin: 15px 0;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
   display: flex;
   align-items: center;
   position: relative;
   transform: translateX(100%);
   animation: moveleft 0.5s linear forwards;
}

.toast i{
   margin: 0 20px;
   font-size: 35px;
   color: green;
}

.toast.error i{
   color: red;
}

.toast.invalid i{
   color: orange;
}

.toast::after{
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 5px;
   background-color: green;
   animation: anim 5s linear forwards;
}
.toast.error::after{
   background-color: red;
}
.toast.invalid::after{
   background-color: orange;
}

@keyframes moveleft{
   100%{
      transform: translateX(0);
   }
}

@keyframes anim{
   100%{
      width: 0;
   } 
}