body{
  font-family: Arial, Helvetica, sans-serif;
}

.contents-container{
  display: flex;
  flex-direction: column;
  margin: auto;
  align-items: center;
  justify-content: center;
}

button{
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover{
 background-color: rgb(211, 199, 199);
 color: white;
}

button:active{
 background-color: rgb(163, 158, 158);
 color: white;
}

.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notification {
  padding: 12px 20px;
  border-radius: 6px;
  color: white;
  font-family: Arial, sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  opacity: 1;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.notification.hide {
  opacity: 0;
  transform: translateX(100%);
}

.notification.success {
  background-color: #4caf50;
}

.notification.error {
  background-color: #f44336;
}

.notification.warning {
  background-color: #ff9800;
}

.notification.info {
  background-color: #2196f3;
}