* {
        margin: 0;
        padding: 0;
        font-family: 'Poppins', sans-serif;
        box-sizing: border-box;
    }
    
    body {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        justify-content: center;
    }
    
    .header {
        display: flex;
        justify-content: center;
        height: 100vh;
        align-items: center;
        background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1bw2ziXiIhholTifqh9lVZeC0tW70TavMpg&usqp=CAU");
        /* background-image: linear-gradient(hotpink, rgb(123, 13, 214)); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        justify-content: center;
    }
    
    .block {
        height: 250px;
        width: 300px;
        align-items: center;
        justify-content: center;
        margin-bottom: 200px;
    }
    
     ::placeholder {
        color: blanchedalmond;
    }
    
    .searchtext {
        display: flex;
        width: 100%;
        justify-content: space-between;
        height: 12%;
    }
    
    .searchbox {
        display: flex;
        width: 74%;
        outline: none;
        padding-left: 2%;
        letter-spacing: 0.2rem;
        background: none;
        border: none;
        overflow: hidden;
        border-bottom: 0.2rem solid rgb(51, 233, 218);
        color: rgb(39, 6, 6);
        text-transform: uppercase;
    }
    
    .button {
        padding: 5px 8px;
        border-radius: 6px;
        outline: none;
        border: none;
        width: 22%;
        background-color: bisque;
        letter-spacing: 0.1rem;
        /* text-transform: uppercase; */
        background-image: linear-gradient(rgb(43, 55, 167), rgb(20, 243, 243));
        color: white;
    }
    
    .button:active {
        transition-duration: .4s;
        transform: scale(1.1);
    }
    
    .button:hover {
        cursor: pointer;
    }
    
    .apidetail {
        margin-top: 10%;
        height: fit-content;
        box-shadow: 0px 9px 50px 10px rgb(73, 73, 73);
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 12px;
        background-image: url("https://www.worldatlas.com/r/w1200/upload/36/2d/35/shutterstock-1317410681.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 10%;
    }
    
    .cityname,
    .calcius,
    .humidity,
    .windspeed,
    .sunrise,
    .sunset,
    .pressure,
    .cloudcover {
        display: flex;
        width: 90%;
        font-size: 1.1rem;
        font-weight: 600;
        color: rgb(37, 3, 3);
        padding-top: 6%;
        justify-content: space-between;
    }
    
    .cityname {
        text-transform: uppercase;
        justify-content: center;
        font-size: 1.5rem;
    }
    
    .calcius {
        justify-content: center;
        font-size: 3.4rem;
        margin-left: 10%;
    }
    
    sup {
        margin-top: 11%;
        font-size: 2.1rem;
        margin-left: 0%;
    }
    
    sub {
        font-size: 1.6rem;
        font-weight: 800;
    }
    
    @media (max-width:470px) {
        .block {
            margin-top: 200px;
            width: 90%;
            height: fit-content;
            padding: 10%;
        }
        .apidetail {
            align-items: center;
        }
        .calcius,
        .humidity,
        .windspeed,
        .sunrise,
        .sunset,
        .pressure,
        .cloudcover {
            display: flex;
            font-size: 1.1rem;
            color: rgb(37, 3, 3);
            padding-top: 6%;
            justify-content: space-between;
            width: 90%;
        }
        .calcius {
            justify-content: center;
            font-size: 1.6rem;
            margin-left: 10%;
        }
        sup {
            margin-top: 6%;
            font-size: 1.6rem;
            margin-left: 0%;
        }
        sub {
            font-size: 1.1rem;
            font-weight: 800;
        }
        .searchtext {
            height: 27px;
        }
        .button {
            width: fit-content;
            border-radius: 6px;
        }
        .searchbox {
            width: 73%;
        }
    }