* {
  user-select: none;
}

*:focus {
  outline: none;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  cursor: none;
  background-color: #ffffea;
}

#zippo {
  position: absolute;
  pointer-events: none;
  width: 100px;
  height: 100px;
  background-image: url("media/imgs/lighter-closed.png");
  background-size: cover;
  z-index: 1000;
  transition: transform 0.1s;
  transform: translate(-50%, -50%);
}

.main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.ca {
  position: absolute;
  bottom: 400px;
  font-size: 18px;
}

.logo {
  position: absolute;
  width: 70vw;
  max-width: 650px;
  z-index: 10;
}

.hero-container {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 160px;
  align-items: start;
  height: 100vh;
  width: 100vw;
}
.hero-container img {
  position: relative;
  height: auto;
  width: 55vw;
  max-width: 600px;
  max-height: 100vh;
}

.cigar-tip {
  position: absolute;
  width: 85px;
  height: 125px;
  z-index: 10;
  /* background-color: rgb(255, 0, 0, 0.3); */
}
#cigar-lit {
  position: absolute;
  opacity: 0;
  animation: opacity 0.5s ease;
}
#smoke {
  position: absolute;
  opacity: 0;
  transform-origin: 22.8% 47.3%;
  transform: scale(1);
  animation: opacity 0.5s ease;
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleUp {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

@media (max-width: 768px) {
  .hero-container img {
    width: 75vw;
    top: 15vh;
  }
  #zippo {
    width: 128px;
    height: 128px;
  }
  .logo {
    position: absolute;
    top: 50px;
    width: 95vw;
    z-index: 10;
  }
}

@media (max-height: 768px) {
  #zippo {
    width: 128px;
    height: 128px;
  }
  .logo {
    position: absolute;
    top: 5px;
    width: 60vw;
    z-index: 10;
  }
}

@media (orientation: landscape) {
  .hero-container img {
    width: auto; /* Let width adjust based on height */
    max-height: 75vh; /* Reduce max height a bit if necessary */
    top: 5px;
  }
}