html{
    width: 100%;
    height: 100%;
}

body{
    height: 100%;
    width:100%;
    margin:0;
    padding:0;
}

div{
    padding: 10px;
}

header{
    height: 12%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(50, 50, 221, 0.785);
    color:white;
}

main{
    height: 88%;
    width: 100%;
}

.cityPicker{
    height: 25%;
    width: 100%;
    border-bottom: 1px solid black;
}

.cityDrop{
    height: 75%;
    width: 100%;
}

.cCityTitle{
    height: 35%;
    width: 100%;
    border: 0.5px solid black;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.cCity{
    height:65%;
    width: 100%;
}

h4{
    text-align: center;
}

form{
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
}

input[type="text"]{
    height: 25px;
    margin: 5px;
}


input[type="submit"]{
    height: 27px;
    background-color: rgba(50, 50, 221, 0.76);
    color:white;
    border: 0;
}