:root {
  --brown: #a88f82;
  --tan: #f5e1d5;
  --teal: #71a8a7;
  --lightteal: #d5f5f5;
  --light: #fffaf7;
}

::selection {
  color: var(--brown);
  background-color: var(--light);
}

body {
  background-color:#e7d6c1 ;
}
header {
 background-color: #24645D;
 color: #f7c48f;
}
hr {
  /* color: #2C8475; */
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}

#city-date {
  font-size:1.5rem;
  
}
#forecast-text {
  font-size:1.5rem;
  margin-left: -15px;
}

#uv {
  width: min-content;
  white-space: nowrap;
  background-size: 200%;

}

.custom-btn {
  background-color: #24645D;
  color: #f7c48f;
  width:100%;
}
.custom-btn:hover {
  background-color: #c28556;
  color: #722618;
}
.custom-btn2 {
  background-color: #2C8475;
  color: #f7c48f;
  width:100%;
}
.custom-btn2:hover {
  background-color: #c28556;
  color: #722618;
}

#city-weather{
  border-style:ridge;
  border-width: "4px";
  border-color: #295266;
  /* background-color: #fad6b0; */
}

.top-text {
  color:rgb(38, 146, 146);
  font-size:1.5rem;
}
.bot-text {
  font-size:0.80rem;
}
.custom-card {
  background-color: #2C8475;
  color: var(--light);
}

.hide {
  display:none;
}