body {
    margin: 0;
    font-family: Arial, sans-serif;
     background-color: rgb(135, 205, 235); /* Pitch black background */
    color: white;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

.menu {
    width: 200px;
    background: rgba(255, 255, 255, 0.5); /* 50% transparency */
    padding: 20px;
    box-sizing: border-box;
    position: absolute; /* floating */
    top: 20px;
    right: 20px; /* Positioned on the right */
    opacity: 80%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.menu-logo {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.menu ul {
    list-style-type: none;
    padding: 0;
}

.menu li {
    margin: 20px 0;
}

.menu a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.menu a i {
    margin-right: 10px;
}

.mobile {
    display: inline; /* Show labels by default */
}

.menu-content {
    flex-grow: 1;
    padding: 20px;
    margin-right: 240px; /* Adjust according to the menu width and position */
}

#toggleMenu {
    background-color: #333;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

#toggleMenu i {
    margin-right: 10px;
}

.bottom-menu {
    width: 100%;
    background-color: #333;
    color: white;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    left: 0;
}

.bottom-menu ul {
    list-style-type: none;
    display: flex;
    justify-content: space-around;
    padding: 0;
    margin: 0;
}

.bottom-menu li {
    margin: 0;
}

.bottom-menu a {
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
}

.bottom-menu a i {
    margin-right: 5px;
}

.bottom-menu .not-mobile {
    display: inline; /* Show labels by default */
}

/* Media query for mobile devices */
@media (max-width: 600px) {
    .not-mobile {
        display: none !important; /* Hide labels on mobile devices */
    }

    .menu-content {
        margin-right: 0; /* Remove right margin on mobile devices */
    }

    .menu {
        width: 60px; /* Adjust menu width on mobile devices */
    }
}

/* Floating search box styles */
.search-container {
    position: absolute;
    top: 20px; /* Adjust as needed to place the box higher or lower */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#searchBox {
    width: 300px;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.suggestions {
    margin-top: 10px;
    width: 300px;
    background: rgb(44, 44, 46);
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}

.suggestions div {
    padding: 10px;
    cursor: pointer;
    background: rgb(44, 44, 46);
}

.suggestions div:hover {
    background-color: #2d8eee6a;
}

/* Floating Card */
.card {
    width: 350px;
    height: 235px;
    position: relative;
    padding: 25px;
    background: radial-gradient(178.94% 106.41% at 26.42% 106.41%, #FFF7B1 0%, rgba(255, 255, 255, 0) 71.88%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, #FFFFFF;
    box-shadow: 0px 155px 62px rgba(0, 0, 0, 0.01), 0px 87px 52px rgba(0, 0, 0, 0.05), 0px 39px 39px rgba(0, 0, 0, 0.09), 0px 10px 21px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
    border-radius: 23px;
    transition: all 0.8s cubic-bezier(0.15, 0.83, 0.66, 1);
    cursor: pointer;
    opacity: 0.4; /* Set opacity to 40% */
  }
  
  .card:hover {
    transform: scale(1.05);
  }
  
  .container {
    width: 250px;
    height: 250px;
    position: absolute;
    right: -35px;
    top: -50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.7);
  }
  
  .cloud {
    width: 250px;
  }
  
  .front {
    padding-top: 45px;
    margin-left: 25px;
    display: inline;
    position: absolute;
    z-index: 11;
    animation: clouds 8s infinite;
    animation-timing-function: ease-in-out;
  }
  
  .back {
    margin-top: -30px;
    margin-left: 150px;
    z-index: 12;
    animation: clouds 12s infinite;
    animation-timing-function: ease-in-out;
  }
  
  .right-front {
    width: 45px;
    height: 45px;
    border-radius: 50% 50% 50% 0%;
    background-color: #4c9beb;
    display: inline-block;
    margin-left: -25px;
    z-index: 5;
  }
  
  .left-front {
    width: 65px;
    height: 65px;
    border-radius: 50% 50% 0% 50%;
    background-color: #4c9beb;
    display: inline-block;
    z-index: 5;
  }
  
  .right-back {
    width: 50px;
    height: 50px;
    border-radius: 50% 50% 50% 0%;
    background-color: #4c9beb;
    display: inline-block;
    margin-left: -20px;
    z-index: 5;
  }
  
  .left-back {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 0% 50%;
    background-color: #4c9beb;
    display: inline-block;
    z-index: 5;
  }
  
  .sun {
    width: 120px;
    height: 120px;
    background: -webkit-linear-gradient(to right, #fcbb04, #fffc00);
    background: linear-gradient(to right, #fcbb04, #fffc00);
    border-radius: 60px;
    display: inline;
    position: absolute;
  }
  
  .sunshine {
    animation: sunshines 2s infinite;
  }
  
  @keyframes sunshines {
    0% {
      transform: scale(1);
      opacity: 0.6;
    }
  
    100% {
      transform: scale(1.4);
      opacity: 0;
    }
  }
  
  @keyframes clouds {
    0% {
      transform: translateX(15px);
    }
  
    50% {
      transform: translateX(0px);
    }
  
    100% {
      transform: translateX(15px);
    }
  }
  
  .card-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .card-header span:first-child {
    word-break: break-all;
    font-weight: 800;
    font-size: 15px;
    line-height: 135%;
    color: rgba(87, 77, 51, 0.66);
  }
  
  .card-header span:last-child {
    font-weight: 700;
    font-size: 15px;
    line-height: 135%;
    color: rgba(87, 77, 51, 0.33);
  }
  
  .temp {
    position: absolute;
    left: 25px;
    bottom: 12px;
    font-weight: 700;
    font-size: 64px;
    line-height: 77px;
    color: rgba(87, 77, 51, 1);
  }
  
  .temp-scale {
    width: 80px;
    height: 36px;
    position: absolute;
    right: 25px;
    bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 9px;
  }
  
  .temp-scale span {
    font-weight: 700;
    font-size: 13px;
    line-height: 134.49%;
    color: rgba(87, 77, 51, 0.66);
  }
  
  /* Additional CSS to position the card */
  .floating-card-container {
  /*  transform: translateY(-50%);  */
    width: 200px;     
    padding: 20px;
    box-sizing: border-box;
    position: absolute; /* floating */
    top: 200px !important;
    left: 2px !important; /* Positioned on the right */
    opacity: 80%; 
    
  }