:root {
  --primary-color: #095080;
  --primary-lighter: #2BAAFF;
  --primary-light: #1198F2;
  --accent-color: #F29611;
  --accent-dark: #A66200;
}


body {
  font-family: 'Inter', arial, sans-serif !important;
  background-color: white;
  background-image: linear-gradient(rgb(255, 255, 255), rgb(189, 236, 255));
  background-repeat: no-repeat;
  background-size: cover;
  color: black;
}

h1 {
  font-weight: 900 !important;
  font-size: 2em;
}

h2, h3, h4, h5 {
  font-weight: 700 !important;
}

.weather-card {
  background-color: aliceblue;
}


.town {
  font-weight: 500 !important;
  font-size: 2em;
  color: gray;
}

.temp {
  font-size: 4em;
}

.date {
  font-weight:300 !important;
  font-size: 1.5em;
  font-style: italic;
}

.weather-type {
  font-weight: 500 !important;
  font-size: 1.5em;
  text-align: center;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.bot-stats {
  font-weight:300 !important;
  font-size: 1em;
}

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  padding: 32px 0 48px 0;
  background-color: var(--primary-color);
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

#footer a {
  color: rgb(255, 255, 255);
}
#footer a:hover {
  color: var(--primary-light);
}

#left-button:hover, #right-button:hover {
  cursor: pointer;
  filter: invert(19%) sepia(67%) saturate(2074%) hue-rotate(184deg) brightness(95%) contrast(93%);
}

#feature {
  background-color: var(--primary-color);
}

#feature h1, #feature h2 {
 color: white;
}

.btn-primary {
  background-color: var(--primary-lighter) !important;
  border-color: var(--primary-lighter) !important;
}

.btn-primary:hover {
  background-color: var(--primary-light) !important;
  border-color: var(--primary-light) !important;
}