body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: #222;
    font-family: 'Montserrat', sans-serif;
}

.card {
    background: HSL(0, 0%, 25%);
    color:white;
    padding: 2em;
    border-radius: 2em;
    max-width: 420px;
    min-width: 320px;
    width: 100%;
    margin: 1em;
    opacity: 0.95;
}

.search{
    display: flex;
    justify-content: center;
    align-items: center;
}

input#searchbar {
    margin-right: 3px;
    border: none;
    outline: none;
    border-radius: 10px;
    padding: 1%;
    font-family: inherit;
    font-size: 1.5em;
    background-color: HSL(0, 0%, 50%);
    width: 100%;
    height: 25px
    
}

button {
  height: 2.5em;
  border-radius: 45%;
  border: none;
  background-color: HSL(0, 0%, 50%);
  cursor: pointer;
  transition: 0.2s;
}

button:hover{
    background-color: HSL(0, 0%, 40%)
}

::-webkit-input-placeholder {
    color: black;
 }

 h1.temp {
    margin: 0;
}

img.icon {
    float: left;
    filter: contrast(150%);
}

.humidity {
    clear: both;
}

.descriptionIcon {
    display: flex;
    align-items: center;
}

.weather.loading{
    visibility: hidden
}