#toast {
  position: absolute;
  bottom: 2%;
  min-width: 10%;
  max-width: 50%;
  text-align: center;
  left: 50%;
  transform: translate(-50%,0);
  background-color: rgba(72, 72, 72, 0.6);
  backdrop-filter: blur(10px);
  padding: 1% 2% 1% 2% ;
  color: white;
  font-size: 1.4em;
  border-radius: 5px;
  z-index: 1;
  pointer-events: none;
}
#toast:hover, #toast.toasthover {
  opacity: 0.2;
}

#toast.warning{
  background-color: rgba(154, 126, 0, 0.6);
}

#toast.error{
  background-color: rgba(213, 60, 33, 0.6);
}

#toast.success{
  background-color: rgba(33, 213, 93, 0.6);
}

#toast.fadeIn {
  animation: 0.5s fade;
  animation-fill-mode: forwards;
}

#toast.fadeOut {
  animation: 0.5s fade reverse;
}


@keyframes fade {
  from { 
    opacity: 0%;
  }
  to   { 
    opacity: 100%;  
  }
}