body {
  background-image: url("../imgs/img-tet5.jpg");
  background-size: cover;
}

.contain-tree-flower {
  opacity: 0;
}

.contain-tree-flower .tree-flower {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 3;
}

.contain-tree-flower:nth-child(1) {
  position: fixed;
  width: 30%;
  height: 60%;
  z-index: 9;
  top: 0px;
  left: -30%;
}
.contain-tree-flower:nth-child(2) {
  position: fixed;
  bottom: 10px;
  right: -30%;
  width: 28%;
  height: 65%;
  z-index: 8;
}

.lentern {
  position: absolute;
  z-index: 10;
  opacity: 1;
  transition: 4s;
  transform: rotate(-45deg);
}
.contain-tree-flower:nth-child(1) > .lentern:nth-child(2) {
  width: 10%;
  height: 30%;
  top: -50%;
  left: -50%;
}
.contain-tree-flower:nth-child(1) > .lentern:nth-child(3) {
  width: 15%;
  height: 25%;
  top: -50%;
  left: -50%;
}
.contain-tree-flower:nth-child(1) > .lentern:nth-child(4) {
  width: 10%;
  height: 36%;
  top: -50%;
  left: -50%;
}
.contain-tree-flower:nth-child(2) > .lentern:nth-child(2) {
  width: 11%;
  height: 30%;
  top: -150%;
  left: -250%;
}
.contain-tree-flower:nth-child(2) > .lentern:nth-child(3) {
  width: 17%;
  height: 23%;
  top: -150%;
  left: -250%;
}
.contain-tree-flower:nth-child(2) > .lentern:nth-child(4) {
  width: 10%;
  height: 33%;
  top: -150%;
  left: -250%;
}

.sky {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  box-shadow: inset 0px 0px 150px rgb(0, 0, 0);
  z-index: 10;
  display: none;
}

.family {
  position: fixed;
  opacity: 0;
  transition: 3s;
}
.family:nth-child(4) {
  left: 2.5%;
  bottom: 5px;
  width: 30%;
  height: 40%;
}
.family:nth-child(5) {
  left: 45%;
  bottom: 30px;
  width: 20%;
  height: 35%;
}
@keyframes animationTopDownTextTet {
  to {
    top: -12%;
  }
}
@keyframes animationTopDownNumber2020 {
  to {
    top: -11%;
  }
}
@keyframes animationTopDownSlogan {
  to {
    top: -15%;
  }
}
.textTet {
  position: fixed;
  top: -7%;
  width: 9%;
  height: 32%;
  left: 26%;
  z-index: 11;
  -webkit-animation: animationTopDownTextTet 1s linear 2.5s infinite alternate;
  -moz-animation: animationTopDownTextTet 1s linear 2.5s infinite alternate;
  opacity: 0;
}
.number {
  position: fixed;
  top: -8%;
  z-index: 11;
  opacity: 0;
}
.number:nth-child(7) {
  left: 35%;
  -webkit-animation: animationTopDownNumber2020 1.2s ease-in-out 2.8s infinite
    alternate;
  -moz-animation: animationTopDownNumber2020 1.2s ease-in-out 2.8s infinite
    alternate;
}
.number:nth-child(8) {
  left: 40%;
  -webkit-animation: animationTopDownNumber2020 1.2s ease-in-out 3.1s infinite
    alternate;
  -moz-animation: animationTopDownNumber2020 1.2s ease-in-out 3.1s infinite
    alternate;
}
.number:nth-child(9) {
  left: 45%;
  -webkit-animation: animationTopDownNumber2020 1.2s ease-in-out 3.4s infinite
    alternate;
  -moz-animation: animationTopDownNumber2020 1.2s ease-in-out 3.4s infinite
    alternate;
}
.number:nth-child(10) {
  left: 50%;
  -webkit-animation: animationTopDownNumber2020 1.2s ease-in-out 3.7s infinite
    alternate;
  -moz-animation: animationTopDownNumber2020 1.2s ease-in-out 3.7s infinite
    alternate;
}
.slogan {
  position: fixed;
  top: -10%;
  width: 10%;
  height: 33%;
  left: 55%;
  z-index: 11;
  -webkit-animation: animationTopDownSlogan 1.2s ease-in-out 3.9s infinite
    alternate;
  -moz-animation: animationTopDownSlogan 1.2s ease-in-out 3.9s infinite
    alternate;
  opacity: 0;
}
/* Container chứa đồng hồ đếm ngược */
.clock {
  width: 0px;
  height: 0px;
  top: 25%;
  left: 25%;
  font-family: "Baloo Bhai", "Arial";
  border-style: solid;
  border-width: 1.5px;
  border-color: rgba(212, 144, 61, 0.432);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.199);
  position: fixed;
}
.snake {
  position: absolute;
  width: 300px;
  height: 300px;
  animation: moveSnake 11s linear infinite;
}

.snake img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes moveSnake {
  0% {
    top: calc(-50% - 150px);
    left: calc(10% - 200px);
  }
  25% {
    top: calc(-15% - 200px);
    left: calc(65% + 250px);
  }
  50% {
    top: calc(-25% + 150px);
    left: calc(75% + 150px);
  }
  75% {
    top: calc(15% + 120px);
    left: calc(0% - 220px);
  }
  100% {
    top: calc(-40% - 100px);
    left: calc(0% - 200px);
  }
}

.clock .lan:nth-child(2) {
  width: 20%;
  height: 60%;
  position: absolute;
  top: -57%;
  left: 15%;
  transform: rotateY(180deg);
}

.options-menu {
  position: fixed; /* Fix it to the viewport */
  top: 10px; /* Distance from the top */
  right: 10px; /* Distance from the right */
  z-index: 1000; /* Ensure it appears above other elements */
}

.options-button {
  background-color: #a93132; /* Green background */
  color: white; /* White text */
  padding: 10px 20px; /* Spacing inside the button */
  width: 13rem;
  font-weight: bold;
  font-size: 1.5rem; /* Font size */
  border: none; /* No border */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s ease;
}

/* Change background color when hovering over the button */
.options-button:hover {
  background-color: #f58888;
}

/* Style for the dropdown menu */
.options-dropdown {
  display: none; /* Initially hidden */
  position: absolute; /* Positioned relative to .options-menu */
  top: 40px; /* Below the options button */
  right: 0; /* Align with the right edge of the button */
  background-color: white; /* White background */
  border: 1px solid #ddd; /* Border around the menu */
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Shadow effect */
  z-index: 1; /* Ensures the dropdown is above other elements */
}

/* Style for each option in the dropdown */
.options-dropdown button {
  background-color: white; /* White background for options */
  color: black; /* Black text */
  padding: 10px 20px; /* Padding inside each button */
  width: 100%; /* Make the button fill the container */
  border: none; /* Remove border */
  font-weight: bold;
  font-size: 1rem;
  text-align: left; /* Align text to the left */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s ease;
}

/* Change background color when hovering over the options */
.options-dropdown button:hover {
  background-color: #f44747;
}

/* Optional: active state for buttons (when clicked) */
.options-dropdown button:active {
  background-color: #ccc;
}

@media only screen and (max-width: 414px) {
  .flower:nth-child(1) {
    width: 55%;
    height: 40%;
  }
  .flower:nth-child(2) {
    width: 55%;
    height: 45%;
  }
  .contain-tree-flower:nth-child(1) {
    width: 45%;
    height: 27%;
    top: 15%;
  }
  .contain-tree-flower:nth-child(2) {
    width: 43%;
    height: 30%;
    top: 60%;
  }
  .family:nth-child(4) {
    height: 30%;
    width: 50%;
    bottom: 0px;
  }
  .family:nth-child(5) {
    height: 25%;
    width: 45%;
    left: 60%;
    bottom: 0px;
  }
  @keyframes animationTopDownTextTet {
    to {
      top: -5%;
    }
  }
  @keyframes animationTopDownNumber2020 {
    to {
      top: -11%;
    }
  }
  @keyframes animationTopDownSlogan {
    to {
      top: -9%;
    }
  }
  .textTet {
    width: 20%;
    height: 20%;
    left: 5%;
  }
  .number {
    position: fixed;
    top: -8%;
    z-index: 11;
    width: 15%;
    height: 23%;
  }
  .number:nth-child(7) {
    left: 26%;
  }
  .number:nth-child(8) {
    left: 37%;
  }
  .number:nth-child(9) {
    left: 47%;
  }
  .number:nth-child(10) {
    left: 57%;
  }
  .slogan {
    left: 70%;
    height: 20%;
    width: 22%;
  }
  .clock {
    top: 35%;
    left: 2%;
  }
}