@font-face {
  font-family: "Raleway";
  src: url(../assets/fonts/Raleway-Regular.woff2);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Raleway", sans-serif;
}

.body {
  background-color: hsl(60, 1%, 19%);
  color: hsl(0, 0%, 100%);
}
.body h1 {
  padding: 2rem 0 0.5rem;
  margin-top: 1rem;
}
.body h2 {
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  padding: 0 0 1rem;
  margin-bottom: 1rem;
}

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

.searchBar {
  position: relative;
  top: 300px;
  z-index: 10;
  width: 70vw;
  transition: top 0.8s ease-in;
}
.searchBar.flex {
  flex-direction: row;
}
.searchBar input {
  padding: 16px;
  border: 2px solid hsl(214, 18%, 75%);
}
.searchBar input[type=text] {
  flex: 2;
  border-radius: 10px 0 0 10px;
  border-right: none;
}
.searchBar input[type=button] {
  flex: 1;
  border-radius: 0 10px 10px 0;
  border-left: none;
  background-color: hsl(60, 1%, 19%);
  color: hsl(180, 100%, 50%);
}
.searchBar input[type=button]:hover {
  background-color: hsla(180, 100%, 50%, 0.249);
  cursor: pointer;
}
.searchBar label {
  display: none;
}

.loading {
  width: 2rem;
  height: 2rem;
  border: 4px solid hsl(0, 0%, 95%);
  border-top: 4px solid hsl(180, 100%, 50%);
  border-radius: 100%;
  margin: auto;
  visibility: hidden;
  position: fixed;
  top: 45%;
  animation: spin 1s infinite linear;
}
.loading.display {
  visibility: visible;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  gap: 1rem;
  justify-items: center;
  align-items: center;
}

.totoro {
  height: 15vh;
  margin-right: 1vw;
}

.totoro.hidden {
  height: 30vh;
  animation: grow-shrink 2s ease-in-out forwards;
}
@keyframes grow-shrink {
  0% {
    transform: scale(0.5);
    margin-right: 1vw;
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    height: 0;
    transform: scale(0);
    margin-right: 0;
  }
}

.weather,
.forecast {
  opacity: 0;
  transition: opacity 2s ease-in;
  background-color: hsl(240, 1%, 23%);
  width: 100%;
  padding: 3rem;
  margin: 2rem;
  border-radius: 1rem;
}
@media (min-width: 1250px) {
  .weather,
  .forecast {
    width: 70vw;
  }
}

.weather div {
  display: flex;
  flex-direction: column;
  line-height: 1.2rem;
}

.forecast .grid {
  color: hsl(180, 100%, 50%);
  grid-template-columns: 2fr 2fr 1fr 1fr;
}/*# sourceMappingURL=style.css.map */