/* 
ffffff to 1B1F3B
ff9933 to ff1493
ff3300 to b22222
00cc00 to
Base styling */
    body {
      font-family: Poppins;
      margin: 0;
      padding: 0;
      background-color: #1B1F3B;
}
	
h1	{
	text-align: center;
	color: #20e6ad;
}
h2	{
	text-align: center;
	color: #20e6ad;
		/* background-image: url('h2.png');*/
    
  background-repeat: no-repeat; 
    display: flex; /* Display as inline to fit text width without line breaks */
     font-size: min(2.6vw, 30px);
    justify-content: center;
    align-items: center; /* Add this line to vertically center the content */
    position: relative;
    text-align: center;
	max-width: 95vw;
	margin-left: auto; margin-right: auto;
	margin-bottom: 0;
	margin-top: 0;
}

@media screen and (max-width: 768px) {
    h2 {
        text-align: center;
    }
}

form h2 {

  box-shadow: 0 4px 8px 0 #3066be; /* Blueish box shadow for a bit of depth */
	/*background-image: url('h2.png');*/
    background-size: cover; /* Cover the entire container */
  background-repeat: no-repeat; 
    display: block; /* Display as inline to fit text width without line breaks */
     font-size: min(2.4vw, 36px);
    justify-content: center;
    align-items: center; /* Add this line to vertically center the content */
    position: relative;
    text-align: center;
	max-width: 33vw;
	width: auto;
	
}

h3 {
	text-align: center;
	color: #b22222; /**/
	  align-items: center;
  text-align: center;
margin: auto;
align-items: center;
width: auto;
position: inline-block;


}

a {
	color: #20e6ad;
}
a:visited {
  color: #b22222;
}

    /* City selector styling */
    .city-selector {
      text-align: center;
      margin: 20px 0;
	  color: #E6C200;
    }
    .city-selector select {
      padding: 5px 10px;
      font-size: 1em;
    }
    /* Container for the table spans the full width of the viewport */
    #table-container {
      width: 100vw; /* full viewport width */
      overflow-x: auto;
      box-sizing: border-box;
      padding: 10px;
    }
    /* Table styling */
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      box-shadow: 0 4px 8px 0 #3066be; /* Blueish box shadow for a bit of depth */
      padding: 10px;
      vertical-align: top;
    }
    th {

      text-align: center;
    }
    /* Heading row styling (current day forecast) */
    .heading-period {
      text-align: center;
    }
    .heading-period .period-name {
		color: #20e6ad;
      font-size: 1.4em;
      font-weight: bold;
    }
    .heading-period .temperature {
      color: #E6C200;
      font-weight: bold;
      font-size: 1.2em;
    }
    .heading-period .detailed {
      margin-top: 5px;
      font-size: 0.95em;
	  color: #b22222;
    }
    /* Forecast period styling */
    .forecast-period {
      margin-bottom: 10px;
	  
    }
    .forecast-period .period-name {
      font-weight: bold;
      font-size: 1.1em;
	  color: #20e6ad;
    }
    .forecast-period .temperature {
      color: #E6C200;
      font-weight: bold;
    }
    .forecast-period .detailed {
      margin-top: 5px;
      font-size: 0.9em;
	    color: #b22222;
    }
footer {
	text-align: center;
  color: #8b0000;
}

.theme-options label {
  display: flex;
  justify-content: right;
  margin-top: 20px;
	margin: auto;
  padding-right: 20px;
	color: #E6C200;
  position: block;
}


section {
	
    position: relative;
font-size: min(2.2vw, 24px);
         font-weight: bold;
    text-align: center;
	line-height: 1.5;
	max-width: 75vw;
	margin-left: 12.5vw;
	display: center;
}
.page-footer {
 /*background-image: url('footer.png');*/
  max-width: 95vw;
  max-height: auto;
  background-size: cover;
  background-repeat: no-repeat;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-left: auto; margin-right: auto;
  
}

.page-footer img {
  max-width: 100vw; /* Ensure the image doesn't overflow the footer */
}

.table-cert a {
  text-decoration: none;
  font-size: min(2vw, 24px);
 
}

.accordion-content a {
  text-decoration: none;
  font-size: min(2vw, 24px);
  color: #b22222;
}


a {
 text-decoration: none;
  font-size: min(2vw, 24px);
 
}

h4 {
  display: flex;
  margin-top: .4vw;
 margin-bottom: 1vw;
 margin-left: auto;
 margin-right: auto;
  justify-content: center; /* Centers the content horizontally */
  align-items: center; /* Centers the content vertically */
  /*background-image: url('h4.png');*/
  background-size: cover; /* Cover the entire container */
  background-repeat: no-repeat; /* Do not repeat the image */
  max-width: 95vw; /* Maximum width set to 95% of the viewport width */
  height: auto; /* Height is automatically determined */
  border-bottom: 3px solid #090c9b; /* Blue border at the bottom */
  box-shadow: 0 4px 8px 0 #3066be; /* Blueish box shadow for a bit of depth */
  text-align: center; /* Center align the text */
  font-size: min(3vw, 36px);; /* Font size based on viewport width */
}

.accordion-section {
	color: #20e6ad;
    cursor: pointer;
  
    box-shadow: 0 4px 8px 0 #3066be; /* Blueish box shadow for a bit of depth */
 	justify-content: center;
	min-height: auto;
	max-width: 40vw;
	max-height: auto;
  min-width: 300px;
	height: auto;
	margin-left: auto; margin-right: auto;
    transition: all 0.3s;
    top: 0;
    left: 0;
    height: auto; 
	 align-items: center;
      }
	  
	  .accordion-content {
    display: none;
     font-weight: bold;
	 width: auto;

}

.active {
    display: block;
}

article {
    margin: 0 auto;            /* Centers the box if screen width is more than max-width */
               /* Optional padding */
 	word-wrap: break-word;
	    
font-size: min(2vw, 20px);

}


.accordion-content img {
	width: min(50vw, 400px);
	display: block;
	align-items: center;
	margin: auto;
}

.inline-img {
    display: block;
    vertical-align: middle;  /* Helps to align the middle of the image with the middle of the adjacent text */
    width: 66vw;  /* Use auto instead of 100vw */
        height: auto;  /* Let the height adjust according to the width */
}


		
		.collapse-button {	  
  display: block;
    padding: 10px 20px; /* Adjust the padding for the button size */
    background-color:  #3066be; /* Button background color */
	color: #E6C200;
    border: none; /* Remove the default border */
    border-radius: min(3vw, 2px); /* Rounded corners */
    cursor: pointer;
    transition: background-color 0.3s ease;
	align-items: center;
	margin: auto;
	font-size: .75em;
  font-weight: bold;
		}

        .collapse-button:hover {
            background-color: #090c9b; /* Darker background color on hover */
			color: #E6C200;
        }

.collapse-all-link {
  display: block;
    padding: 10px 20px; /* Adjust the padding for the button size */
    background-color: #3066be; /* Button background color */
	color: #E6C200;
    border: none; /* Remove the default border */
    border-radius: min(3vw, 2px); /* Rounded corners */
    cursor: pointer;
    transition: background-color 0.3s ease;
	align-items: center;
	margin: auto;
	font-size: .75em;
  font-weight: bold;
	/* Smooth hover effect */
}


        .collapse-all-link:hover {
            background-color: #090c9b; /* Darker background color on hover */
			color: #E6C200;
        }
.form {
    display: flex;
    flex-direction: column; /* This line is new */
	
    align-items: center;
 background-repeat: none;
}

label {
    display: inline-block; /* Display these elements as blocks, each on a new line */
     align-items: center;

  
}

header {
    /*background-image:  url('hexa.png');*/
	background-size: cover;
	background-color: no-repeat;
  max-width: 50vw;
  min-width: 420px;
	height: auto;
	margin-left: auto; margin-right: auto;
	
	margin-bottom: .75vw;
    color: #20e6ad;
    box-shadow: 0 4px 8px 0 #3066be; /* Blueish box shadow for a bit of depth */
    text-align: center;
    font-size: min(2.8vw, 40px);
}

.inline-img {
    display: inline-block;
    vertical-align: middle;  /* Helps to align the middle of the image with the middle of the adjacent text */
    width: 66vw;  /* Use auto instead of 100vw */
        height: auto;  /* Let the height adjust according to the width */
}