/* Custom Fonts */
@font-face {
font-family: pollen;
src: url(pollen.otf) format('opentype');
}
@font-face {
  font-family: comb;
  src: url(honeycomb.ttf) format('opentype');
  }
  @font-face {
    font-family: calibri-fallback;
    src: url(calibri-fallback.ttf) format('opentype');
    }
  
.custom-cursor {
    cursor: url('bee2.png'), pointer;
  }

html {
  font-family: Calibri, calibri-fallback, Georgia, serif;
  font-size: 75.5%;
  font-weight: bold;
}
body {
  margin: 0;
  padding: 0;
  font-family: Calibri, calibri-fallback, Georgia, serif;
  font-size: 75.5%;
  font-weight: bold;
  background-color: #1C1D1C;
  border-top: 0px solid hsl(220, 50%, 75%);
  max-width: 1300px;
  margin: 0 auto;
  background-image: url(baby.jpg);
  background-position: center;
  background-repeat: repeat;
  background-attachment: fixed;
}

a {
        text-decoration-color: grey;
      }
      a:link {
        color: black;
        font-weight: bold;
      }
      a:hover {
        color: black;
        font-weight: bold;

      }
      a:visited {
        color: black;
        font-weight: bold;
      }

.header {
  font-size: 50px;
  color: rgb(255, 255, 255);
  align-items: center;
  align-content: center;
  text-align: center;
  background-color: black;
  width: 100%;
  position: fixed;
  left: 0;
  z-index: 999;
}

/* Variables */
:root {
  --hexagon-height:116px ;
  --hexagon-width:67px ;
  --scaler: 1;
  --screen-scale: 200px;
}


.hexagon {
  position: relative;
  display: inline-block;
  /* left/right margin approx. 25% of .hexagon width + spacing */
  margin: 1px 18px;
  background-color: hsl(220, 75%, 75%);
  text-align: center;
}
.hexagon, .hexagon::before, .hexagon::after {
  /* easy way: height is width * 1.732
  actual formula is 2*(width/(2*Math.tan(Math.PI/6)))
  remove border-radius for sharp corners on hexagons */
  width: calc(var(--scaler) * var(--hexagon-width));
  height: calc(var(--scaler) * var(--hexagon-height));
  border-radius: 20%/5%;
  background-color: inherit;
  content: "";
  left: 0; /* Aligns combs */
}
.hexagon::before {
  position: absolute;
  transform: rotate(-60deg);
}
.hexagon::after {
  position: absolute;
  transform: rotate(60deg);
}
.hexagon:nth-child(even) {
  /* top approx. 50% of .hexagon height + spacing */
  top: calc(calc(var(--hexagon-height) / 2) + calc(var(--scaler) * 1px));
}
.hexagon:hover {
  transform: scale(1.3);
  z-index: 999;
}

.hexagontent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180%;
  /* font-size: 1.4rem; */
  font-size: 1.6rem;
  line-height: 1.2;
  z-index: 100;
}
 

.container-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.container {
  padding-top: 180px;

}

/* Add a class to hide elements when searching */
.hidden {
  display: none;
}

@media screen and (max-width: 1300px) {
  .container {
    width: 1100px;
  }
}

@media screen and (max-width: 1100px) {
  .container {
    width: 900px;
  }
}

@media screen and (max-width: 900px) {
  .container {
    width: 700px;
  }
}

@media screen and (max-width: 700px) {
  .container {
    width: 500px;
  }
}
@media screen and (max-width: 500px) {
  .container {
    width: 300px;
  }
}





.fancy-button {
  display: inline-block;
  padding: 10px 20px; /* Adjust padding as needed */
  font-size: 10px; /* Adjust font size as needed */
  font-weight: bold;
  color: #ffffff; /* Text color */
  background-color: #4CAF50; /* Background color */
  border: none;
  border-radius: 180px; /* Rounded corners */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Smooth background color transition */
}

.fancy-button:hover {
  background-color: #45a049; /* Change background color on hover */
}

.fancy-searchbox {
  position: relative;
  width: 300px; /* Adjust the width as needed */
  margin: 0 auto; /* Center the search box */
}

.fancy-searchbox input[type="text"] {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 30px; /* Adjust for the desired roundness */
  background: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
  outline: none;
  font-size: 16px;
  color: #333; /* Text color */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Box shadow for the input */
}

.fancy-searchbox input[type="text"]::placeholder {
  color: #999; /* Placeholder text color */
}

.fancy-searchbox button {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}

/* Optional hover effect for the button */
.fancy-searchbox button:hover {
  color: #4CAF50; /* Change color on hover */
}