body,
html {
  height: 100%;
  margin: 0;
  font-family: "Roboto", sans-serif;
  background-color: #f3f3f3;
  color: #003366;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  padding: 0 20px;
}

.message {
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.4;
  transition: all 200ms;
  transform: scale(0.95);
  opacity: 0;
  animation: zoomIn 0.7s forwards 0.5s;
  cursor: default;
}

.website-message {
  color: #ffa500;
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 0.7s forwards 1s;
  transition: transform 0.3s, color 0.3s;
}

.website-message:hover {
  transform: translateY(0) scale(1.1) rotate(5deg);
}

@media (max-width: 880px) {
  .message {
    font-size: 1.5rem;
  }
}

@keyframes zoomIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
