.intro-paragraph {
  text-align: left;
  /* Other styles can be added here */
}

/*** OVERALL STYLES ****/

body {
  background-color: #7084bb;
  color: white;
  font-family: optima, sans-serif;
}

/**** HEADER STYLES ****/

header {
  background-image: url("../assets/signhill.png");
  background-size: cover;
  background-position: center;
  padding: 0;
  margin: 0;
  color: white;
}

header h1 {
  font-family: optima, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #fdbf48;
  font-size: 3rem;
}

.tagline {
  color: #ccc;
}

.context {
  color: #ccc;
}

/*
header .shade {
  background-color: rgba(0, 0, 0, 0.7);
}
*/

.description {
  font-size: 18px;
}

.text-start d-block {
  color: white;
}

.year {
  color: #fdbf48;
}

.variable {
  color: #fdbf48;
}

.question {
  font-size: 20px;
  color: white;
}

.white {
  color: white;
}

.orange {
  color: #fdbf48;
}

/**** DONUT CHART STYLES ****/
.donut-chart {
  font-family: Helvetica, sans-serif;
}

.donut-chart-small {
  /* adjust size here as needed for the small charts. They won't distort and maintain ratio. */
  width: 80px;
  height: 100px;
}

.donut-chart-big {
  width: 100%;
  height: 150px;
}

.donut-chart-colors text {
  fill: white; /* chart text color */
}

.donut-chart-colors svg > circle {
  stroke: #414a57; /* circle track color */
}

.donut-chart-colors svg g > circle {
  stroke: #fdbf48; /* circle glow color */
}

#stats {
  transform: translateY(-50%);
  background-color: rgba(50, 50, 50, 0.9);
}

/**** BACKGROUNDS ****/

/* darker buttons on some backgrounds */
.orange-background button.btn {
  border-color: white;
  color: white;
}

.orange-background button.btn:hover {
  background-color: white;
  color: #999;
}

.card-text {
  font-size: 18px;
}

.title {
  color: #fdbf48;
}

.highlight {
  color: #fdbf48;
}

.bg-image {
  background-image: url("../assets/signhill.png");
  background-size: cover;
  background-position: center;
}

.end {
  font-family: optima, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: white;
  font-size: 3rem;
}

.col-6 .card {
  transition: transform 0.2s ease-in-out;
}

.col-6 .card:hover {
  transform: translateY(-10px);
}