/* Add styles here! */
  html, body {
  background-color: #040f2c;
  background-image: url('sky.jpg');
  background-blend-mode:overlay;
  color: #fafbfc;
  height: 100%;
  margin: 0;
  padding: 0;

}
.video{
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: brightness(1); /* Default brightness */
  transition: filter 0.3s ease; /* Smooth transition */
}
.text{
  margin-left: 35px;
  font-family: "Onest", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

  .map{
    position:relative;
    width: 100%;
    margin: 0 auto;
  }
  .image{
    width: 100%;
    height:auto;
    display:block;
  }
  .marker{
    position:absolute;
    transform:translate(-50%,50%);
    text-decoration: none;
    display:inline-block;
    animation: bounce 1s ease infinite;
  }

  @keyframes bounce{
    0%, 100% {
      transform: translateY(0); }
    50%{
      transform: translateY(-10px);
    }
  }
/* Create the portal effect */
@keyframes portalAnimation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.portal-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.3));
  animation: portalAnimation 1.5s ease-in-out forwards;
  z-index: 9999; /* Ensures it covers everything */
}
}

header {
  font-size: 40px;
  font-family: "Onest", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.home {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.container {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
}

h1 {
  font-size: 40px;
  font-family: "Onest", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-align: center;
}
\