* {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
                font-family: "Poppins", sans-serif;
            }
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                background: url('https://i.postimg.cc/bYQptgPz/background.jpg');
                background-size: cover;
                background-position: center;
            }
            .container {
                position: relative;
                width: 400px;
                height: 100px;
                background: linear-gradient(250deg ,#fdd70069, #154f95be);
                backdrop-filter: blur(30px);
                border: 2px solid lightcyan;
                border-radius: 16px;
                padding: 20px;
                color: #fff;
                transition: height 0.6s ease;
            }
            .search-box {
                position: relative;
                width: 100%;
                height: 55px;
                display: flex;
                align-items: center;
            }
            .search-box i {
                position: absolute;
                left: 10px;
                font-size: 20px;
                color: #fff;
            }
            .search-box input {
                position: absolute;
                width: 100%;
                height: 100%;
                background: transparent;
                border: 2px solid rgba(255, 255, 255, 0.2);
                border-radius: 10px;
                outline: none;
                font-size: 22px;
                color: #fff;
                font-weight: 500;
                text-transform: uppercase;
                padding: 0 40px 0 42px;
            }
            .search-box input::placeholder {
                color: #fff;
                text-transform: capitalize;
            }
            .search-box button {
                position: absolute;
                right: 0;
                width: 40px;
                height: 100%;
                background: transparent;
                border: none;
                outline: none;
                font-size: 20px;
                color: #fff;
                padding: 0 40px 0 5px;
                cursor: pointer;
            }
            #weatherbox{
                margin-top: 30px;
            }

            .main-container{
                display: flex;
                flex-direction: column;
            }

            .main-iner{
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 20px;
            }

            .temp{
                text-align: center;
            }

            .main-icon,.main-title{
                font-size: 35px;
                font-weight: bold;
            }

            .error-message{
                color: red;
                font-size: 20px;
            }