html, body {
  height: 100%;
  margin: 0;
}

.main {
  height: 100%;
  background-image: url("/img/sandwelle.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

h1 {
  position: absolute;
  top: 5%;
  left: 20%;
  transform: translate(-50%, -50%);
  color: beige;
  animation: move-id 5s;
  font-size: 2rem;
}

@keyframes move-id {
  5%   { top: 5%; left: 20%; font-size: 2rem; color: beige; }
  20%  { top: 50%; left: 50%; font-size: 5rem; color: orange; }
  100% { top: 5%; left: 20%; font-size: 2rem; color: beige; }
}

.btnbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 20px; /* Abstand zwischen Buttons */
  align-items: center;
  animation: show-id 5s;
}

.btn {
  padding: 10px 20px;
  font-size: 1rem;
  background-color: beige;
  color: brown;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  width: 10rem;
}

.btn:hover {
  background-color: white;
}

@keyframes show-id {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.1); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(0.2); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}