body {
  font-family: Arial, sans-serif;
  background: #222222;
  
}
.title {
  color: white;
  font-size: 37.5px;
  margin-bottom: 2.5px;
  margin-left: 5px;
}

.text-block {
  width: 90%;
  float: left;
  font-size: 0.75rem;
  margin: 0 auto;
  text-align: justify;
}
#divider {
  width: 80%;  
  height: 0.5px; /* adjust the thickness of the line */
  float: left;
  
  background-color: white;
  margin: 7.5px auto; /* centers the line horizontally and adds space above and below */
}


.container {
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 0.8fr 1fr 0.7fr 0.7fr 1.8fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "step-indicator step-indicator"
    "circle-container single-use-plastic"
    "circle-container slider-container"
    "circle-container gov-pop-tax"
    "charts charts"; 
}

.step-indicator { 
  grid-area: step-indicator; 
  display: flex;
    justify-content: center;  
    align-items: center;
    position: relative; 
    padding: 5px 0; 

}

.single-use-plastic { 
  grid-area: single-use-plastic; 
  color: white;
  width: 90%;
  margin-left: 12.5px;
}

.circle-container { 
  grid-area: circle-container; 
  display: flex;
  justify-content: center;
  align-items: center; 
  
}

.slider-container { grid-area: slider-container; }


.gov-pop-tax {
  grid-area: gov-pop-tax;
}

.charts { 
  grid-area: charts; 
  display: flex;
  width: 100%;
  height: 200px;
  margin: 25px;
  width: 100%;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 10%;
}

.chart1-container { 
  grid-area: 4 / 1 / 5 / 2; 
  justify-content: center;
  align-items: center; 
  position: relative;
}

.chart2-container { 
  grid-area: 4 / 2 / 5 / 3; 
  justify-content: center;
  align-items: center; 
  position: relative;
}

.tax {
  padding-bottom: 12.5px;
  color: white;
  align-items: center;
  font-size: 1.25rem;
}

.bar .pop-label {
  display: block;
  font-size: 15px;
  color:aliceblue;
}

.bar {
  display: block;
  align-items: center;
  margin-left: 12.5px;
}

.gov-pop {
  width: 80%;
  
  background-color: #545454;

   border-radius: 2px;
   align-items: center;
  
  
}

.progress-bar {
  width: 100%;
  height: 5px;
  background-color: #4CAF50;
  text-align: center;
  color: white;
  align-items: center;
  font-size: 1rem;
  border-radius: 2px;
  transition: width 0.3s ease;
  height: 25px; 
  
}


#circle {
  width: 300px;  
  height: 300px;  
 
  background-color: #FF3131;
  border: 1.5px solid #FF3131; 
  stroke: #A6A6A6;
  border-radius: 50%;  
  transition: transform 0.5s;  
  transform-origin: center;  
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 0.5em;
}
span#title {
  text-align: center;
}
input[type=range] {
  width: 75px;
  margin-top: 5px;
}

#slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  position: relative;
  top: 25px;
  width: 75%;
  height: 6.25px; 
  background: #d3d3d3;
  outline: none;
  opacity: 0.7; 
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

 
#slider:hover{
  opacity: 1; 
}


#slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px;  
  height: 25px;  
  border-radius: 50%;
  background: #04AA6D; 
  cursor: pointer; 
}

#slider::-moz-range-thumb {
  width: 12.5px;  
  height: 12.5px;  
  background: #04AA6D; 
  cursor: pointer; 
}


.step {
  background-color: #ddd;  
  border-radius: 3.75px;  
  padding: 5px 10px;  
  margin: 0 25px; 
  text-align: center;
  position: relative; 
}

.step:not(:last-child):not(:nth-last-child(2))::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -50px; 
  width: 100px; 
  height: 0.25px;
  border-top: 3.75px dotted #ccc;  
  z-index: -1;
  transform: translateY(-50%);
}
 /*different colors for different steps*/
.step.active {
  background-color: #4CAF50;  
  color: white; 
}

.step.prev {
  background-color: #307033;  
  color: #B4AEAE;
}

.step-title {
  font-size: 1em; 
}

.button-link {
  display: inline-block;  
  font-size: 0.75rem;
  padding: 2.5px 5px; 
  margin:25px 0;  
  border-radius: 12.5px;
  background-color: #15A0EF; 
  color: white; 
  text-decoration: none;
  border-radius: 1.25px; 
  border: none; 
  text-align: center;
  transition: background-color 0.3s, color 0.3s; 
}

.button-link:hover {
  background-color: #0D6FA6; 
  color: #fff; 
}



  .slidecontainer {
    position: relative; top: 125px;
    padding: 10%;
    width: 80%; 
  }
  
  
  .slider {
    -webkit-appearance: none; 
    appearance: none;
    width: 100%; 
    height: 6.25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7; 
    -webkit-transition: .2s;
    transition: opacity .2s;
  }
  
  /* mouse-over effect  */
  .slider:hover {
    opacity: 1; 
  }
  
 
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none; 
    appearance: none;
    width: 25px; 
    height: 25px; 
    border-radius: 50%;
    background: #04AA6D; 
    cursor: pointer; 
  }
  
  .slider::-moz-range-thumb {
    width: 12.5px; 
    height: 12.5px; 
    background: #04AA6D; 
    cursor: pointer; 
  }