.liu-jian-mao-cao-regular {
  font-family: "Liu Jian Mao Cao", cursive;
  font-weight: 400;
  font-style: normal;
}

body {
  background-color: rgb(231, 248, 252);
  z-index: 1;
}

[title~=header] {
  text-align: center;
  font-size: 1.5rem;
  background-color: #486a97;
  margin-top: 5px;
}

.navbar-brand {
  margin-left: 5px;
}
.navbar-brand img {
  max-height: 125px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

#navbarSupportedContent {
  justify-content: end;
  align-items: end;
}
#navbarSupportedContent a {
  color: white;
}
#navbarSupportedContent a:hover {
  color: rgb(5, 36, 5);
}

.dropdown-item a {
  color: #486a97;
}

@media (max-width: 768px) { /* Adjust the breakpoint to match your tablet size */
  .navbar-brand img {
    display: none; /* Hide the image */
  }
}
footer {
  background-color: #486a97;
}
footer ul {
  list-style: none;
}

h4, h5 {
  font-family: "Liu Jian Mao Cao", cursive;
}

/*----------------------------footer------------------------------------------------------------*/
.custom-navbar {
  height: 100px;
}

/* ----------------------------------------- ad --------------------------------------------------*/
.ad {
  animation: fade-in-left 2s ease, bounce 1s ease 1s;
  justify-content: center;
}

@media (max-width: 768px) { /* Adjust the breakpoint to match your tablet size */
  .ad {
    display: none; /* Hide the image */
  }
}
@keyframes fade-in-left {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes bounce {
  70% {
    transform: translateY(0%);
  }
  80% {
    transform: translateY(-25%);
  }
  90% {
    transform: translateY(0%);
  }
  95% {
    transform: translateY(-25%);
  }
  97% {
    transform: translateY(0%);
  }
  99% {
    transform: translateY(-3%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes fade-in-left {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/*----------------------bee----------------------------*/
img[alt|=bee1] {
  position: absolute;
  top: 50px;
  left: 50px;
  animation: floatAway 10s ease-in-out infinite alternate forwards;
  /*add spin transform here */
}
@keyframes floatAway {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  15% {
    transform: translateY(0px) translateX(0) rotate(0deg);
  }
  20% {
    transform: translateY(0) translateX(0) rotate(360deg);
  }
  50% {
    transform: translateY(0) translateX(50px) rotate(0);
  }
  100% {
    transform: translateY(60px) translateX(-40px) rotate(360deg);
  }
}/*# sourceMappingURL=main.css.map */