body {
  overflow: hidden;
  background-image: url("https://images.unsplash.com/photo-1593017601537-902eeba5b907?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
  background-size: cover;
  color: white;
}

.form-blured {
  /* From https://css.glass */
  /* From https://css.glass */
  background: rgba(170, 169, 172, 0.18);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.input {
  margin-right: 0px;
  margin: 50px 0 0 30px;
  background-color: transparent;
  border: none;
  color: yellow;

  /* From https://css.glass */
}

textarea:focus,
input:focus {
  outline: none;
}

hr {
  width: 372px;
  margin-left: 30px;
  color: white;
}
.submit {
  background-color: #b2d4e6;
  height: 94px;
  width: 97px;
  margin-left: calc(100% - 120px);
  position: fixed;

  margin-bottom: 0;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1.2; /* Firefox */
}

.result {
  display: flex;
  justify-content: space-between;
  margin-top: 30vh;
}

.result > h1 {
  font-size: 12.5rem;
}

.sugestions > p {
  margin-left: 30px;
}

.weather-descriptions > p {
  margin-left: 30px;
  margin-top: 20px;
}
h2 {
  font-size: 50px;
  margin: auto;
}

span {
  font-size: 22px;
}

h3 {
  margin: auto;
}
/* 
Backgrounds

"https://images.unsplash.com/photo-1593017601537-902eeba5b907?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"

https://images.unsplash.com/photo-1638270598448-145f4fc9101d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80


 */

.colorgray {
  color: gray;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(170, 169, 172, 0.18);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.gatinho {
  background-color: white;
  background-image: none;
}

button a {
  color: white;
}
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: yellow;
}

a:active {
  text-decoration: underline;
}

.cities:hover {
  color: yellow;
}

/* Mobile settings */

@media (max-width: 528px) {
 .result > h1 {
  font-size: 4.5rem;
  position: relative;
  left: 228px;
  bottom: 200px;
 }

 .result {
  display: flexbox;
  justify-content: space-between;
  margin-top: 10vh;
 }
 h2 {
  font-size: 2rem;
  position: absolute;
 }

 h3 > img {
  margin-left: 98px;
 }

}