/* provides the layout for all three pages*/


body {
  font-family: Arial, sans-serif;
  background: #222222;
  
}

.nav-bar {
  width: 100%;
  
  font-size: 3.75px;
  color: white;
  letter-spacing: 0.5px;
  margin-right: 5px;
  margin-top: 0px;
  float: right;
}


.nav-bar ul {
  list-style: none;
}

.nav-bar ul li {
  display: inline-block;
  margin-left: 18.75px;
}
.nav-bar ul li:hover {
  color: rgb(50, 194, 81);
}

.top-link{
  color: aliceblue;
  font-size: 15px;
  text-decoration: none;
}

.top-link.active {
  color: rgb(50, 194, 81);
}



.statistics {
  width: 90%;
  height: 25px;
  padding: 5px;
  position: relative;
  background-color: #424040;
  display: flex;
  color: aliceblue;
  font-size: 1rem;
  gap:3%;
  align-items: center;
  border: 1.5px solid #898787;
  
}

.edit-budget{
  display: inline-block;  
  font-size: 1.25rem;
  padding: 2.5px 5px;  
  margin: 2.5px;
  justify-self: center;
  border-radius: 12.5px;
  background-color: #00BF63;  
  color: white;  
  text-decoration: none;  
  border-radius: 2.5px;  
  border: none; 
  text-align: center;  
  cursor: pointer;
 
}



.bar{
  width: 50%;
}

.microworld {
  width: 100%;
  height: 80%;
  position: absolute;
  display: flex;
  gap: 6.25px;
}


.graphs {
  width: 75%;
  height: 100%;
  border: 3px solid #B22222;
  border-radius: 2.5px;
  margin-top: 3.75px;
  margin-bottom: 3.75px;
  position: relative;
}

.info{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 23%;
 

}

.controls, .goal-box {
  width: 100%;
  flex-direction: column;
  margin-top: 3.75px;
  background-color: #424040;
  border: 1.5px solid #898787;
  margin-bottom: 6.25px;
  border-radius: 5px;
  
  
  align-items: center;  
  justify-content: center; /
}

.goal-box {
  width: 100%;
  color: aliceblue;
  background-color: #424040;
  border: 1.5px solid #898787;
  font-size: 10px;
 

}

.circleChart {
  width: 50%;
  height: 100%;
}

#circleChart {
  position: relative ;
  width: 100%;
  height: 100%;
}

.bingraphs {
  width: 50%;
  position: absolute;
  height: 100%;
  left: 50%;
  top: 0;
  display: block;
}
.chart1-container { 
  width: 50%;
  height: 50%;
  position: absolute;
  justify-content: center;
  align-items: center; 
  
  

}
.chart2-container { 
  width: 50%;
  height: 50%;
  position: absolute;
  left: 50%;
  top: 0%;
  justify-content: center;
  align-items: center; 
  
}
.chart3-container { 
  width: 50%;
  height: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  justify-content: center;
  align-items: center; 
  
}

.bar-chart-container {
  width: 50%;
  height: 50%;
  
  position: absolute;
  bottom: 0%;
}

#chart1 {
  width: 100%;
  height: 100%;
}
#chart2 {
  width: 100%;
  height: 100%;
}
#chart3 {
  width: 100%;
  height: 100%;
}
#barChart {
 
  width: 100%;
  height: 100%;
}

.slider-container {
  margin: 5px;
  margin-bottom: 17.5px;
  width: 100%;
}

.slider-label {
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
  color:aliceblue;
}

.bar .pop-label {
  display: flex;
  font-size: 1.25rem;
  color:aliceblue;
}

.bar {
  display: flex;
  width: 50%;
  align-items: center;
  gap: 5px; 
  white-space: nowrap;
}

.budget {
width: 50%;
}

#reading {
font-size: 1.25rem;
color: aliceblue;
padding-left: 2.5px;
display: flex;
text-align: center;
color: white;
align-items: center;
}

#goals {
font-size: 22.5px;
color: aliceblue;
padding-left: 2.5px;
padding-bottom: 7.5px;
display: flex;
align-items: center;
color: white;
gap: 10%;
}

#goal {
font-size: 15px;
color: aliceblue;
padding-left: 2.5px;
padding-bottom: 7.5px;

align-items: center;
color: white;

}


#next-challenge{
display: inline-block;  
font-size: 0.75rem;
padding: 2.5px 5px;  
margin: 2.5px;
justify-self: center;
border-radius: 12.5px;
background-color: #00BF63;  
color: white;  
text-decoration: none; 
border-radius: 2.5px;  
border: none;  
text-align: center;  
transition: background-color 0.3s, color 0.3s;  
cursor: pointer;
}

.gov-pop {
  width: 100%;
  display: flex;
  background-color: #292B2A;
  
   border-radius: 2px;
   align-items: center;
   font-size: 1.25rem;
  
}

.progress-bar {
  width: 100%;

  background-color: #4CAF50;
  text-align: center;
  color: white;
  align-items: center;
  font-size: 1rem;
  border-radius: 2px;
  transition: width 0.3s ease;
  height: 20px; 
}

.progress-bar.golden {
background-color: #EDC967
}

#slider1,#slider2,#slider3,#slider4,#slider5 {
  -webkit-appearance: none;   
  appearance: none;
  position: relative;
  
  width: 75%;  
  height: 3.75px;  
  background: #d3d3d3;  
  outline: none;  
  opacity: 0.7; /* set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}
#slider1:hover, #slider2:hover, #slider3:hover, #slider4:hover, #slider5:hover{
  opacity: 1;  
}

#slider1::-webkit-slider-thumb, #slider2::-webkit-slider-thumb, #slider3::-webkit-slider-thumb, #slider4::-webkit-slider-thumb, #slider5::-webkit-slider-thumb {
  -webkit-appearance: none;  
  appearance: none;
  width: 12.5px;  
  height: 12.5px; /* slider handle height and width */
  border-radius: 50%;
  background: #04AA6D;  
  cursor: pointer;  
}

#slider1::-moz-range-thumb, #slider2::-moz-range-thumb, #slider3::-moz-range-thumb, #slider4::-moz-range-thumb, #slider5::-moz-range-thumb {
  width: 12.5px;  
  height: 12.5px;  
  background: #04AA6D; 
  cursor: pointer;  
}

/* Modal (background) */
.modal, .endModal, .summaryModal {
display: none; /* Hidden by default */
position: fixed;  
z-index: 1; /* Sit on top of everythign else */
left: 0;
top: 0;
width: 100%;  
height: 100%;  

background-color: rgb(0,0,0);  
background-color: rgba(0,0,0,0.4); 
opacity: 0; /* Start fully transparent */
transition: opacity 0.5s linear;  
}

/* Modal Content */
.modal-content {
display: flex;
flex-direction: column;
justify-content: space-between;  
align-items: center;  
position: relative;
background-color: #222222;
margin: 15% auto;
padding: 5px;
border: 0.25px solid #888;
width: 50%;  
height: 50%;  
transition: transform 0.5s ease-out, opacity 0.5s linear;
}



.modal-footer{
position: absolute;
bottom: 0px;  
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding: 0 5px;  
}


 
.close {
position: absolute;
top: 2.5px; 
right: 2.5px; 
color: #aaa;
float: right;
font-size: 25px;
font-weight: bold;
cursor: pointer;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

.prev {
display: inline-block;  
font-size: 0.75rem;
padding: 2.5px 5px;  
margin: 2.5px;
justify-self: center;
border-radius: 12.5px;
background-color: #00BF63;  
color: white;  
text-decoration: none;  
border-radius: 2.5px;  
border: none;  
text-align: center;  
transition: background-color 0.3s, color 0.3s; 
cursor: pointer;
}

.next {
display: inline-block;  
font-size: 0.75rem;
padding: 2.5px 5px;  
margin: 2.5px;
justify-self: center;
border-radius: 12.5px;
background-color: #00BF63;  
color: white;  
text-decoration: none;  
border-radius: 2.5px;  
border: none;  
text-align: center;  
transition: background-color 0.3s, color 0.3s;
cursor: pointer;
}

.begin{
display: inline-block;  
font-size: 0.75rem;
padding: 2.5px 5px;  
margin: 2.5px;
justify-self: center;
border-radius: 12.5px;
background-color: #00BF63;  
color: white;  
text-decoration: none;  
border-radius: 2.5px;  
border: none;  
text-align: center;  
transition: background-color 0.3s, color 0.3s;
cursor: pointer;
}

#helpBtn {
display: inline-block;  
font-size: 1rem;
padding: 2.5px 5px;  
margin: 2.5px;
justify-self: center;
border-radius: 12.5px;
background-color: #222222;  
color: white;  
text-decoration: none;  
border-radius: 2.5px;  
border: none;  
text-align: center;  
transition: background-color 0.3s, color 0.3s;
cursor: pointer;
}

.modal-image1 {
max-width: 40%;  /*modal size*/
max-height: 100%;  
margin: 2.5px 2.5%;  
display: inline-block;  

}

.images{
height: 75%;
width: 100%;
align-items: center;
justify-self: center;
display: flex;
justify-content: center;  
flex-wrap: wrap;  
gap: 2.5px;  
}

.images.page3{
  height: 70%;
}

.modal-text {
text-align: center;  
margin-bottom: 5px;  
font-size: 15px;
color: aliceblue;
}


.images2{
height: 100%;
width: 100%;
align-items: center;

display: flex;
justify-content: center; 

gap: 2.5px;  
}



.image1{
width: 30%;  
max-height: 20%;  
margin: 2.5px 2.5%;  
display: inline-block;  
}
.image2{
width: 40%;  


margin: 2.5px 2.5%;  
display: inline-block;  
}
.image3{
width: 20%;  

margin: 2.5px 2.5%;  
display: inline-block;  
}
.image4{
width: 50%;  

margin: 2.5px 2.5%;  
display: inline-block;  
}

.image5{
  width: 60%;
}

.modal-page{
height: 90%;
width: 100%;
display: flex;
flex-direction: column; /* Stack children vertically */
align-items: center; /* Center children horizontally */
gap: 2.5px;  
}

.modal-image21{
width: 100%;
}
.modal-image22{
width: 100%;
}
.modal-image23{
width: 100%;
}

.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #393838;
overflow-x: hidden;
transition: 0.5s;
padding-top: 15px;
}

.sidenav a {
padding: 2px 2px 2px 8px;
text-decoration: none;
font-size: 6.25px;
color: #818181;
display: block;
transition: 0.3s;
}

.sidenav a:hover {
color: #f1f1f1;
}

.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 2.5rem;
margin-left: 12.5px;
color: #fff;
}

@media screen and (max-height: 112.5px) {
.sidenav {padding-top: 3.75px;}
.sidenav a {font-size: 4.5px;}
}



.budgetGraph-container{
height: 50%;

justify-content: center;
align-items: center; 
}
#budgetGraph{
height: 100%;
padding: 2%;
}


#categories{
font-size: 1.25rem;
width: 100%;
padding: 5%;
color: #fff;

}
.category button{
font-size: 1.25rem;
width: 20px;
justify-content: center;
align-items: center;
}

#increase{
display: inline-block;  


padding: 2.5px 5px;  
margin: 2.5px;
justify-self: center;
border-radius: 12.5px;
background-color: #00BF63;  
color: white;  
text-decoration: none;  
border-radius: 2.5px;  
border: none;  
text-align: center;  
transition: background-color 0.3s, color 0.3s;
cursor: pointer;
}

#decrease{
display: inline-block;  

padding: 2.5px 5px;  
margin: 2.5px;

justify-self: center;
border-radius: 12.5px;
background-color: #FF3131;  
color: white;  
text-decoration: none;  
border-radius: 2.5px;  
border: none;  
text-align: center;  
transition: background-color 0.3s, color 0.3s;
cursor: pointer;
}

.sidenav-title{
display: flex;
justify-content: center;
align-items: center;
font-size: 2.25rem;
color: #fff;
border-bottom: 1;
}

.sidenav-subtitle{
display: flex;
justify-content: center;
align-items: center;
font-size: 1.25rem;
color: #fff;
padding-left: 7.5px;
}




#recyclingAndWaste{
font-size: 1.5rem;
color: #fff;
padding: 2%;
padding-bottom: 4%;
}

.end-modal-content {
display: flex;
flex-direction: column;
gap: 10%;
align-items: center;  
position: relative;
background-color: #222222;
margin: 15% auto;
padding: 5px;
top: -15%;
border: 0.25px solid #888;
width: 70%;  
height: 70%;  
transition: transform 0.5s ease-out, opacity 0.5s linear;
}
.end-modal-title{
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
color: #fff;
border-bottom: 1;
}

.end-modal-subtitle{

width: 80%;
justify-content: center;
align-items: center;
font-size: 1rem;
color: #fff;
border-bottom: 1;
}

.gov-pop2  {
width: 100%;
display: flex;
background-color: #292B2A;
 
 border-radius: 2px;
 align-items: center;
 font-size: 1.25rem;

}

.progress-bar2 {
width: 100%;

background-color: #4CAF50;
text-align: center;
color: white;
align-items: center;
font-size: 1.75rem;
border-radius: 2px;
transition: width 0.3s ease;
height: 30px; 

}

.bar2 .pop-label {
display: flex;
font-size: 1.75rem;
color:aliceblue;
}

.bar2 {
display: flex;
width: 50%;
align-items: center;
gap: 5px; 
white-space: nowrap;
}

.endModal button{
font-size: 1.25rem;
width: 20px;
justify-content: center;
align-items: center;
}

#increasePop{
display: inline-block;  


padding: 2.5px 5px;  
margin: 2.5px;
justify-self: center;
border-radius:12.5px;
background-color: #00BF63;  
color: white;  
text-decoration: none;  
border-radius: 2.5px;  
border: none;  
text-align: center;  
transition: background-color 0.3s, color 0.3s;
cursor: pointer;
}

#decreasePop{
display: inline-block;  

padding: 2.5px 5px;  
margin: 2.5px;

justify-self: center;
border-radius: 12.5px;
background-color: #FF3131;  
color: white;  
text-decoration: none;  
border-radius: 2.5px;  
border: none;  
text-align: center;  
transition: background-color 0.3s, color 0.3s;
cursor: pointer;
}

#summarise{
width: 15%;
display: inline-block;  
font-size: 1rem;
padding: 2.5px 2px;  
margin: 2.5px;
justify-self: center;
border-radius: 12.5px;
background-color: #00BF63;  
color: white;  
text-decoration: none;  
border-radius: 2.5px;  
border: none;  
text-align: center;  
transition: background-color 0.3s, color 0.3s;  
cursor: pointer;
}

.summary-modal-content {
display: flex;
flex-direction: column;
gap: 10%;
align-items: center; /* Center children horizontally */
position: relative;
background-color: #222222;
margin: 15% auto;
padding: 5px;
top: -20%;
border: 0.25px solid #888;
width: 70%;  
height: 80%;  
transition: transform 0.5s ease-out, opacity 0.5s linear;
}

.sum-modal-title{
display: flex;

justify-content: center;
align-items: center;
font-size: 1.5rem;
color: #fff;
border-bottom: 1;
}

.sum-header{
position: absolute;
top: 0%;
display: flex;
height: 5%;
width: 100%;
justify-content: center;
}
.sum-footer{
position: absolute;
bottom: 0%;
display: flex;
height: 10%;
width: 100%;
justify-content: center;
}

.restart{
width: 15%;
display: inline-block;  
font-size: 1rem;
padding: 2.5px 5px;  
margin: 2.5px;
justify-self: center;
border-radius: 12.5px;
background-color: #00BF63;  
color: white;  
text-decoration: none;  
border-radius: 2.5px;  
border: none;  
text-align: center;  
transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
cursor: pointer;
}

.summary {  
position: relative;
top: 5%;
display: grid;
width: 100%;
height: 85%;
grid-template-columns: 0.9fr 0.7fr 1.4fr;
grid-template-rows: 1.1fr 0.9fr;
gap: 0px 0px;


grid-template-areas: 
  "sum-budget-cuts sum-pie-chart sum-pie-chart"
  "sum-total-waste sum-bar-chart sum-gov-pop"; 
}

.sum-budget-cuts { 
grid-area: sum-budget-cuts; 
border-bottom: 0.5px solid #fff;
border-right: 0.5px solid #fff;
padding: 2%;
}

.sum-bar-chart { 
grid-area: sum-bar-chart; 
border-right: 0.5px solid #fff;
padding: 2%;
}

.sum-pie-chart { 
grid-area: sum-pie-chart; 
border-bottom: 0.5px solid #fff;
display: flex;
width: 100%;
}

.sum-total-waste { 
grid-area: sum-total-waste; 
border-right: 0.5px solid #fff;
display: flex;
justify-content: center;
align-items: center;

}

.sum-gov-pop { 
grid-area: sum-gov-pop; 
padding: 5%;

}

.popularity-bar{
transform: translate(+10%, +50%);
}

.theCircleContainer{
top: 5%;
display: flex;
height: 70%;
justify-content: center;
align-items: center;
position: relative;
}

.sum-circle{
width: 65%;  
aspect-ratio: 1 / 1;  
background-color: #707275;  
border: 1.5px solid #A6A6A6; 
border-radius: 50%;  
transition: transform 0.5s;  
transform-origin: center;  
display: flex;
justify-content: center;
align-items: center;
color: white;
text-align: center;
padding: 5px;

font-size: 1rem;

}


#sum-bar-chart{
bottom: 0%;
height: 100%;
}


.gov-pop3  {
width: 80%;
display: flex;
background-color: #292B2A;
 
 border-radius: 2px;
 align-items: center;
 font-size: 1.25rem;

}

.progress-bar3 {
width: 100%;

background-color: #4CAF50;
text-align: center;
color: white;
align-items: center;
font-size: 1.75rem;
border-radius: 2px;
transition: width 0.3s ease;
height: 30px; 

}

.pop-label2 {
display: flex;
font-size: 1rem;
color:aliceblue;
}

.bar3 {
display: flex;
width: 50%;
align-items: center;
gap: 5px; 
white-space: nowrap;
}

.sum-circle{
display: flex;
justify-content: center;
align-items: center;
}

.sum-chart1-container, .sum-chart2-container,.sum-chart3-container{
flex: 1;
position: relative;
justify-content: center;
display: flex;
align-items: center; 
}


#sum-chart1 {
width: 100%;
height: 100%;
}
#sum-chart2 {
width: 100%;
height: 100%;
}
#sum-chart3 {
width: 100%;
height: 100%;
}

.bin-pics{
position: absolute;  
max-width: 30%;  
max-height: 50%;  
transform: translate(-50%, -50%);  
top: 50%;
left: 50%;
z-index: -1
}

.cuts-title{
display: flex;
padding-bottom: 5%;
justify-content: center;
align-items: center;
font-size: 1.125rem;
color: #fff;
border-bottom: 1;
}

.cuts-line{
font-size: 1.125rem;
color: #fff;
}

.final-numbers{
float: right;
}

.totalSpent{
font-size: 1.125rem;
color: #fff;
}

#divider {
width: 100%;  
height: 0.5px;  
float: left;

background-color: white;
margin: 2.5px auto;  
}

.info-button {
position: relative;
display: inline-flex; 
justify-content: center;  
align-items: center;  
background-color: #101010;  
color: white;  
padding: 2.5px 11.25px;  
border-radius: 50%;  
cursor: pointer;
font-size: 1.25rem; 
font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;

}

.hover-box {
visibility: hidden;
position: absolute;
min-width: 250px;  
 
width: auto;  
padding: 0.25rem;  
font-size: 1rem;  
background-color: #f9f9f9;
color: #000;
text-align: left;
border-radius: 1.75px;
position: absolute;
z-index: 100;

left: 1600%;
transform: translateX(-50%);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 
line-height: 1.2;
}

.hover-box.higher{
top: 0%;
}
.hover-box.lower{
bottom: 60%;
}

.info-button:hover .hover-box {
visibility: visible;
}