@import url('https://fonts.googleapis.com/css2?family=Dekko:wght@400;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Overlock:wght@400;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@400;700&display=swap');
    .notification {
      position: fixed;
      top: -100px;
      left: 50%;
      transform: translateX(-50%);
      padding: 15px;
      background-color: #0B3651;
      color: white;
      border: 1px solid #ccc;
      font-family: Overlock;
      border-radius: 15px;
      margin-bottom: 10px;
      opacity: 0;
      transition: top 0.5s, opacity 0.5s, transform 0.5s;
      z-index: 2147483647;
    }
.notification:hover {
      position: fixed;
      top: -100px;
      left: 50%;
      transform: translateX(-50%);
      padding: 15px;
      background-color: #0c3c5a;
      cursor: pointer;
      color: white;
      border: 1px solid #ccc;
      font-family: Overlock;
      border-radius: 15px;
      margin-bottom: 10px;
      opacity: 0;
      transition: top 0.5s, opacity 0.5s, transform 0.5s;
      z-index: 2147483647;
    }

    .notification.show {
      top: 10px;
      opacity: 1;
    }

    .notification.hide {
      animation: slideOut 0.5s forwards;
    }

    .notification .title {
      font-weight: bold;
    }

    .notification .message {
      margin-top: 5px;
      opacity: 1;
      transition: opacity 0.5s;
    }

    .notification.hide .message {
      opacity: 0;
    }

    .notification .timestamp {
      font-size: 12px;
      color: #888;
    }

    .close-button {
      position: absolute;
      top: 10px;
      right: 15px;
      cursor: pointer;
    }
.close-button:hover {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  transform: scale(1.5);
  transition: transform 0.3s ease;
}
    @keyframes slideOut {
      0% {
        opacity: 1;
        transform: translateX(-50%);
      }
      100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-100px);
      }
    }