html, body {
  background-color: #687869;
  color: white;
  font-size: 25px;
  margin: 0;       /* remove default margins */
  padding: 0;
  height: 100%;    /* make sure they take full height */
}


.landing-main {
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-style: normal;

  width: 100%;       /* span full width */
  min-height: 100vh; /* always at least viewport height */

  background: 
    linear-gradient(
      to bottom,
      rgba(104, 120, 105, 1) 0%,     /* fully opaque at top */
      rgba(104, 120, 105, 0.8) 25%,  
      rgba(104, 120, 105, 0.4) 40%,  
      rgba(104, 120, 105, 0) 50%     /* transparent by 40% */
    ),
    url("../../assets/images/hands.jpg") center center no-repeat;

  background-size: cover;   /* ensures no edges show */
  background-position: center;
}


.top-section {
  position: absolute;
  left: 0;
  top: 10%;
  width: 100%;
  max-height: 80%;
  text-align: center;
  overflow: hidden;
}

.top-section>h1, .top-section>div>h1 {
  margin: 20px;
  font-weight: normal;
}

.top-section>p {
  margin: 0px;
}

.names-amp {
  position: relative;
  display: flex;
  flex-direction: column;   /* stack names vertically */
  align-items: center;      /* center horizontally */
}
.names-amp>:first-child {
  margin-top: 40px;
  margin-bottom: 0px;
}

.names {
  margin: 10px 0;
  font-weight: normal;
  position: relative;
  z-index: 1; /* keep names above the amp */
}

.amp {
  position: absolute;
  top: 50%;         /* vertically center */
  left: 54%;        /* horizontally center */
  transform: translate(-50%, -50%);
  font-size: 150px;  /* make it big */
  color: #f3cf79;
  opacity: 0.3;     /* subtle background look */
  z-index: 0;       /* behind the names */
  pointer-events: none; /* so it doesn’t block clicks */
}

.time-until-color {
  color: #f3cf79;
}

.landing-main-footer {
  text-align: center;
  bottom: 3%;
  cursor: pointer;
  position: absolute;
  bottom: 3%; /* Position at the bottom */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Adjust position */
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.hotels {
  height: 100%;
}

table {
  font-weight: normal;
  font-family: "EB Garamond", serif;
  font-size: 16px;
  margin: 0 auto; /* Center the table */
  border-collapse: collapse; /* Remove gaps between cells */
}

th, td {
  padding: 15px; /* Add padding for spacing */
  text-align: center; /* Center the text */
  border: none; /* Light border for separation */
  border-bottom: dashed #f3cf79 1px;
}

.hotellink {
  color: #f3cf79;
  text-align: left;
  text-decoration:none;
}

td:nth-child(1), th:nth-child(1) {  
  text-align: left;
}

.heart{
  visibility: hidden;
  max-width:250px;
  pointer-events: none; 
}

@media only screen and (max-width: 720px) {
  .top-section {
    top: 5%;
  }

  .heart {
    max-height: 200px; 
  }

  table {
    width: 100%;
    max-width: 100%;
  }
}

@media only screen and (max-height: 600px) {
  .heart {
    max-height: 150px;
  }
  .time-until {
    display: none !important;
  }
}