@import url('https://fonts.googleapis.com/css2?family=Rubik+Bubbles&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500&family=Rubik+Bubbles&family=Rubik+Maps&display=swap');

/*change that text can fit the box*/


body{
    background: #ddd url('michael-diane-weidner-h-rP5KSC2W0-unsplash.jpg');
    background-size: cover;
    overflow: hidden;
}

.header{
    margin: 0;
    border-bottom: 2px solid black;
    border-top: 10px solid rgb(111, 111, 158);
    border-radius: 20px 20px 0 0;
    background-color: rgb(111, 111, 158);
}

#wrapper{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 500px;
    height: 700px;
    transform: translate(-50%, -50%);
    border: 4px solid rgb(159, 213, 238);
    border-radius: 25px;
    overflow: hidden;
}

.sub{
    color: rgba(230, 146, 36, 0.829);
    text-align: center;
    font-size: 60px;
    text-shadow: rgb(255, 204, 0) 1px 0 1px, rgba(0, 0, 0, 0.425) -8px 4px 1px;
    font-family: 'Rubik Bubbles', sans-serif;
}

#dataType{
    box-sizing: border-box;
    float: left;
    width: 100%;
    height: 69%;
}

.data{
    color: #000000;
    font-size: 30px;
    font-weight: 550;
    text-align: center;
}

.floating{
    font-family: 'Quicksand';
    float: left;
    border: 1px solid rgba(0, 0, 0, 0.075);
    box-shadow: 2px 3px 2px white;
    background-color: rgb(196, 236, 241);
    opacity: 0.8;
    border-radius: 20px;
    margin: 5px;
    width: 45%;
    height: 47%;
}

#details{
    clear: both;
}


#moreStuff{
    position: absolute;
    left: 47%;
    width: 50%;
    height: 66.5%;
}

#city{
    font-family: 'Quicksand';
    text-align: left;
    float: left;
    margin-left: 10px;
    margin-top: -30px;
    border: 1px solid black;
    border-radius: 20px 0 0 20px;
    width: 400px;
    height: 50px;
    opacity: 0.8;
}

#sendCity{
    float: left;
    margin-top: -30px;
    height: 54px;
    border: 1.5px solid rgb(0, 0, 0);
    border-radius: 0 20px 20px 0;
}

#sendCity:hover{
    background-color: rgb(194, 194, 194);
    color: white;
}

#blur{
    z-index: -1;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: rgba(219, 239, 243, 0.267);
    width: 550px;
    height: 750px;
    transform: translate(-50%, -50%);
    filter: blur(10px);
}

.set{
    display: block;
    text-align: center;
}

.label{
    overflow: hidden;
    background-color: rgba(111, 111, 158, 0.74);
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}

.wind{
    border: none;
    border-bottom: 2px solid black;
}

@media screen and (max-width:767px) {

    #wrapper{
        width: 370px;
        height: 660px;
        border: none;
    }

    #blur{
        opacity: 0;
    }

    .header{
        font-size: 25px;
    }

    .label{
        font-size: 20px;
    }

    #searchBar{
        position: absolute;
        top: 24%;
    }

    #details{
        overflow-wrap: break-word;
    }

    #city{
        width: 70%;
    }

    #dataType{
        width: 400px;
        height: 500px;
    }

    .floating{
        width: 40%;
        height: 44.5%;
    }

    #moreStuff{
        height: 69%;
    }
}