*,
html,
body{
    margin: 0;
    padding:0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: Arial, Helvetica, sans-serif;
    background-color:#181818;
    overflow:hidden;
}

.honey1{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
    background-color: RGBA(33,37,41,0.75);
    height: 56px;
    color: white;
    padding: 8px;
    /* padding-left: 111px; */
    backdrop-filter: blur(10px); /* Frosted glass effect */
    -webkit-backdrop-filter: blur(10px); /* For Safari compatibility */
    position:fixed;
    width: 100vw;
    z-index:9;
}

.logo{
    background-color:transparent;
    height: 100%;
    cursor:pointer;
}

.logo-cont{
    height: 100%;
    width:1248px;
    background-color: transparent;
}

.main-body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-wrapper{
  background-color: #181818;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width:1248px;
  color: white;
  height:100%;
}

.fade-in-up {
  opacity: 0; /* Initially invisible */
  transform: translateY(20px); /* Starts 20px below its final position */
  animation: fadeInUp 1.5s ease-out forwards; /* Animation duration and easing */
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px); /* Starting position below */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Final position */
  }
}

.fade-in {
    opacity: 0; /* Initially invisible */
    animation: fadeIn 1.5s ease-out forwards; /* Animation duration and easing */
  }
  
@keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

.flex-column{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top:32px;
    padding-bottom:32px;
}

.circle{
    background-color:#32f1c3;
    padding: 0.5em;
    padding-left:1em;
    padding-right:1em;
    border-radius:5px;
    color: black;
    cursor:pointer;
}

#emoji-container {
    width: 100%;
    overflow: hidden; /* Prevents emojis from overflowing out of the container */
}

.emoji {
  position: absolute;
  top: -50px; /* Start above the viewport */
  font-size: 24px;
  animation: fall linear infinite;
}

.bigger-text{
  font-size: 80px;
}

.margin-64{
  margin-top:64px;
}

.margin-32{
  margin-top:32px;
}

@keyframes fall {
  0% {
    transform: translateY(0); /* Start at the top */
  }
  100% {
    transform: translateY(110vh); /* End at the bottom of the viewport */
  }
}

@media (min-width: 768px) and (max-width: 1439px) {
  .logo-cont{
      width:100%;
  }

  .honey1{
    padding-left: 16px;
    padding-right: 16px;
  }

  .main-wrapper{
    width: 100%;
  }

  .main-body{
    padding-left: 16px;
    padding-right: 16px;
  }

}

@media (min-width: 199px) and (max-width: 767px) {
  .honey1{
    height:48px;
    padding-top: 13.5px;
    padding-bottom: 13.5px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .logo-cont{
    width: 100%;
  }

  .main-wrapper{
    width:100%;
  }

  .main-body{
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .smaller-text{
    font-size: 8px;
  }

  .bigger-text{
    font-size: 40px;
  }

  .margin-64{
    margin-top: 32px;
  }

  .margin-32{
    margin-top: 16px;
  }

  .flex-column{
    padding-top:24px;
    padding-bottom:24px;
  }
}

@media (min-width: 0px) and (max-width: 198px) {
  .honey1 {
    height: 24.24vw;
    padding-top: 6.82vw;
    padding-bottom: 6.82vw;
    padding-left: 8.08vw;
    padding-right: 8.08vw;
  }
  
  .logo-cont {
    width: 100%; /* No conversion needed */
  }
  
  .main-wrapper {
    width: 100%; /* No conversion needed */
  }
  
  .main-body {
    padding-left: 8.08vw;
    padding-right: 8.08vw;
  }
  
  .smaller-text {
    font-size: 4.04vw;
  }
  
  .bigger-text {
    font-size: 20.20vw;
  }
  
  .margin-64 {
    margin-top: 16.16vw;
  }
  
  .margin-32 {
    margin-top: 8.08vw;
  }
  
  .flex-column {
    padding-top: 12.12vw;
    padding-bottom: 12.12vw;
  }  
}