/*  
selectors for html items;
#  -> id
.  -> class
name -> html element ie. "body"
*/

body {
  font-family: "Lato", Helvetica, Arial, sans-serif;
  font-size: 18px;
  background-color: lightblue;
  color: var(--light-grey);
  padding:8px;
}

h1 {
  text-align: center;
}

h2 {
  text-align: center;
}

.buttons {
  border: 1px solid #0a0a23;
  padding: 5px;
  color: #0a0a23;
}
button {
  cursor: pointer;
  color: #0a0a23;
  background-color: #feac32;
  background-image: linear-gradient(#fecc4c, #ffac33);
  border: 3px solid #feac32;
}
/* bee animation */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  height: 100vh; /* Full viewport height */
  display: flex;
  justify-content: center;
  align-items: center;
}

.bee {
  position: relative;
  width: 100px; /* Width of the bee */
  height: 50px; /* Height of the bee */
  background-color: rgba(255, 255, 255, 0.6); /* Bee body color */
  border-radius: 50px; /* Rounded shape */
  animation: fly 4s infinite; /* Animation for flying effect */
}

.eye {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: black; /* Eye color */
  border-radius: 50%;
  top: 10px; 
  left: 20px; /* Position of the first eye */
}

.antenna {
  position: absolute;
  width: 2px;
  height: 20px; 
  background-color: black; /* Antenna color */
  top: -10px; 
  left: 30px; /* Position of the antenna */
}

.mouth {
  position: absolute;
  width: 20px;
  height: 10px; 
  background-color: rgba(255, 0, 0, 0.5); /* Mouth color */
  border-radius: 10px; 
  bottom: -5px; 
}

.wings {
  position: absolute;
  width: 100%; 
  height: 100%; 
}

.wings::before,
.wings::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.8); /* Wing color */
  border-radius: 50%; 
}

.wings::before {
  top: -20px; 
  left: -20px; 
}

.wings::after {
  top: -20px; 
  right: -20px; 
}

@keyframes fly {
 0% { transform: translateY(0); }
 50% { transform: translateY(-30px); } /* Move up */
 100% { transform: translateY(0); }
}
/* end of bee animation */
.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 10px;
}
img {
  width: 100%;
  max-width: 350px;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
}

.gallery::after {
  content: "";
  width: 350px;
}

.bee {
  width: 100px;
  height: 50px;
  background: linear-gradient(90deg, #f4c13d 80%, #0d323e 80%);
  border-radius: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 -1.56em rgba(0, 0, 0, 0.15);
}

.bee:before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  background-color: #0d323e;
  border-radius: 50%;
  top: -10px;
  left: calc(50% - 10px);
}

.bee:after {
  content: "";
  position: absolute;
  height: 10px;
  width: 40px;
  background-color: #0d323e;
  border-radius: 5px;
  top: 30px;
}

.wings {
  position: absolute;
  width: 60px;
  height: 30px;
  background-color: #ea92b9;
  border-radius: 30px / 15px;
}

.wings::before,
.wings::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 30px;
  background-color: #ea92b9;
}

.wings::before {
  left: -30px; /* Left wing */
}

.wings::after {
  right: -30px; /* Right wing */
}

/* Animation for floating effect */
@keyframes float {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}

.bee {
 animation: float 2s ease-in-out infinite alternate; /* Floating animation */
}

.indent {
  text-indent: 40px;
}

.logo {
  width: 100%;
  max-width: 75px;
  height: 75px;
  object-fit: cover;
  border-radius: 10px;
}

.logo.left {
  float:left;
}

.logo.right {
  float:right;
}

h1 {
  font-family: hulbert_hopper_displayregular;
}

.copyRight {
    
}