:root {
  /* declare a variable with `--` syntax */
  --dark-text: #13293d;
  --dark-background: #13293d;
  --light-text: #f5f5f5;
  --light-background: #c0c0c0;
  --border-radius: 5px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  background-color: var(--light-background);
}

.bg-dark {
  background-color: var(--dark-background) !important;
}

.text-light {
  color: var(--light-text) !important;
}

.bg-light {
  background-color: var(--light-background) !important;
}

.text-dark {
  color: var(--dark-text) !important;
}

.custom-header {
  background-color: var(--dark-background) !important;
  color: var(--light-text) !important;
  width: 100%;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bolder;
}

.weather-medium {
  max-width: 100px;
  max-height: 100px;
}

.weather-large {
  max-width: 200px;
  max-height: 200px;
}

.map {
  max-width: 240px;
  max-height: 240px;
  float: right;
}

.text-bg-low {
  background-color: #7fce8d;
  color: var(--dark-text) !important;
}

.text-bg-moderate {
  background-color: #ffd939;
  color: var(--dark-text) !important;
}

.text-bg-high {
  background-color: #ff9929;
  color: var(--dark-text) !important;
}

.text-bg-very-high {
  background-color: #ff2e17;
  color: var(--dark-text) !important;
}

.text-bg-extreme {
  background-color: #e7418e;
  color: var(--dark-text) !important;
}