body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

.page-footer {
    background: 
        repeating-linear-gradient(
            135deg,
            #4CAF50,
            #4CAF50 1px,
            #8BC34A 1px,
            #8BC34A 2px
        );
}

.icon-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.wi {
    color: rgb(181, 221, 72);
    font-size: 36px;
    text-shadow: 1px 1px 2px black, 0 0 25px rgb(125, 126, 122), 0 0 5px rgb(5, 5, 5); /* 3D effect */
    transition: all 0.1s ease-in-out;
    /* animation: float 2s ease-in-out infinite; */
}

.wi:hover {
    transform: scale(1.1); /* Slightly enlarge the icon when hovered over */
}

.material-icons {
    color: rgb(181, 221, 72);
    font-size: 36px;
    text-shadow: 1px 1px 2px black, 0 0 25px rgb(125, 126, 122), 0 0 5px rgb(5, 5, 5); /* 3D effect */
    transition: all 0.1s ease-in-out;
}

.material-icons:hover {
    transform: scale(1.1); /* Slightly enlarge the icon when hovered over */
}

@keyframes float {
    0% {
        transform: translatey(2px);
    }
    50% {
        transform: translatey(-2px);
    }
    100% {
        transform: translatey(2px);
    }
}

.material-icons {
    animation: float 2s ease-in-out infinite;
}
.shelf {
    width: 75%;
    height: 300px; /* Adjust as needed */
    margin: 0 auto; /* Center the shelf */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 3px solid black;
    border-radius: 50px / 10px;
    background-color: black;
}

.shelf-level {
    height: 10px; /* Adjust as needed */
    border-radius: 50px / 10px;
    background-color: white; /* Adjust as needed */
}

.seed-packet {
    width: 50px; /* Adjust as needed */
    height: 50px; /* Adjust as needed */
    background-color: green; /* To make the seed packet visible */
}
#weather-icon {
    font-size: 36px;  /* Change this to the size you want */
}