/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

/* Container chỉ để giữ cấu trúc, không cần flex */
.lantern-container {
  position: relative;
  z-index: 9999;
}

@media (max-width: 1024px){
	.lantern-container{
		display:none
	}
}

/* Style chung cho tất cả đèn */
.lantern1,
.lantern2 {
  position: fixed;
  top: 100px;
  height: auto;
  cursor: pointer;
  transform-origin: top center;
  animation: sway 4s ease-in-out infinite;
  transition: filter 0.3s ease;
}

/* Đèn bên trái */
.lantern1 {
  left: 100px;
  width: 100px;
}

/* Đèn bên phải */
.lantern2 {
  right: 100px;
  width: 100px;
  animation-delay: -2s;
}

/* Hiệu ứng đung đưa */
@keyframes sway {
  0%, 100% {
    transform: rotate(7deg);
  }
  50% {
    transform: rotate(-7deg);
  }
}

/* Khi click sẽ sáng */
.lantern1.lit,
.lantern2.lit {
  filter:
    drop-shadow(0 0 25px #ffc400)
    drop-shadow(0 0 15px #ff8c00)
    brightness(1.3);
}