mai.less

* {
    border: 0;
    margin: 0;
}

body {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

.nav-main {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    height: 220px;
    width: 340px;
    transform: translateY(-35px);




    .nav-input {
        box-shadow: 0 1px 1px linear-gradient(to right, #fa709a 0%, #fee140 100%);
        ;
        padding-top: 20px;
        display: flex;
        flex-flow: wrap column;
        justify-content: space-around;
        align-items: center;
        height: 100%;
        width: 100%;
        background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
        border-radius: 40px;

        input {
            background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
            flex: 0 1;
            outline-style: none;
            width: 180px;
            // height: 30px;
            line-height: 30px;
            border-radius: 13px;
            padding-left: 13px;
            color: #111;
        }

        button {
            background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
            // background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
            height: 28px;
            border-radius: 13px;
            width: 60px;
            text-align: center;
            letter-spacing: 3px;
        }
    }
}