@import url("normalize.css");
@import url("base.css");
@import url("color.css");
@import url("typography.css");
@import url("spacing.css");
@import url("layout.css");

#temp-scale-container {
  row-gap: 10px;
  width: 25%;
}

.scrollable-y {
  overflow-y: auto;
}

.scrollable-x {
  overflow-x: auto;
}

.inactive {
  background-size: 25px;
}

.inactive:hover {
  transition: 500ms;
}

.active {
  background-color: #ffffff64;
}

.error {
  margin: 15px;
  border-radius: 13px;
}

/* TODO: animated icons copy */
/* TODO: responsiveness */
@media (width <= 490px) {
  #weather-main-img {
    width: 100px;
  }

  #temp-scale-container,
  label {
    width: fit-content;
  }

  #scale-select {
    width: 55%;
    text-align: center;
  }
}