:root {
  --mainBlack: #333333;
  --mainWhite: #f5f5f5;
  --mainYellow: #ffd166a2;
  --mainBlue: #1e88ac;
  --darkBlue: #073b4c;
}
body {
  background: url("../img/defaultBg.jpg") center fixed no-repeat;
  color: var(--mainBlack);
}

/* Header */
.home {
  position: fixed;
  top: 0;
  left: 0;
  font-size: 2rem;
  color: black;
  padding: 10px;
}
.home:hover {
  color: gray;
}

.intro {
  font-size: 1.6rem;
}
.cloud {
  font-size: 1.5rem;
  padding: 5px;
  color: #fff;
  transition: all 0.3s;
}
.cloud:hover {
  color: #91f9e5;
}

/* Main content */
.card {
  background: var(--mainYellow);
}
.cityInput {
  border: 0.15rem solid var(--mainBlue);
  border-radius: 10px;
  background: transparent !important;
  font-size: 1.5rem;
  color: var(--mainBlack);
}
button {
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}
input:focus {
  background: transparent !important;
}
.text {
  font-size: 1.4rem;
  padding: 10px;
}
.submitBtn {
  background: var(--mainBlue);
  border: 0.15rem solid var(--mainBlue);
  font-size: 1.5rem;
  cursor: pointer;
  opacity: 0.7;
}
.submitBtn:hover {
  opacity: 1;
}
.feedback {
  display: none;
  opacity: 0.7;
}
.results {
  display: none;
}
.showItem {
  display: block;
}
.container {
  margin-bottom: 125px;
}

/* Footer */
.footer {
  background: black;
  padding: 5px;
  color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
}

.disclaimer {
  font-size: 0.8rem;
}
.link {
  padding: 8px;
  font-size: 1.2rem;
  color: #fff;
}
.link:hover {
  color: black;
}

/* screen adjust */
@media (max-width: 768px) {
  .home {
    position: relative;
  }
  .disclaimer {
    font-size: 0.7rem;
  }
  .text,
  .link {
    font-size: 1rem;
  }
  .intro {
    font-size: 1.3rem;
  }
} ;