/* Global Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

h1 {
  margin: 0 auto; /* Centers the container */
  text-align: center; /* Centers all text inside */
  width: 90%;
  max-width: 600px;
  padding-left: 5%;
  padding-right: 5%;
  color: darkblue;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    color: var(--text);
    transition: background-color 0.3s, color 0.3s;
}

article {
  text-align: left;
}

hr {
  border: none; /* Remove the default border */
  height: 1px; /* Set the height to make it thin */
  background: lightgrey; /* Set the color to light grey */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
  margin: 20px 0; /* Optional: Add spacing around the line */
}

.container {
    width: 90%;
    max-width: 600px;
    padding: 20px;
    margin: 0 auto; /* Centers the container */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    text-align: center; /* Centers all text inside */
}

label {
    font-size: 1.2rem;
    margin: 10px 0;
    display: block;
    text-align: left; /* Aligns labels to the left */
}

input[type="number"],
input[type="range"] {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 20px;
}

.slider-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

button {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

.result {
    font-size: 1.5rem;
    margin-top: 20px;
    text-align: center;
}

/* back-button - Begin */
.back-button {
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 20px;
}

.back-button:hover {
    background-color: #e53935;
}
/* back-button - End */

/* psychrometrics-calculator Style - Begin */
#psych-container {
  background: #e9f0fa;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border: 1px solid #d0dbe7;
  margin-top: 30px;
}

#psych-container h2 {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #2c3e50;
}

label.slider-group {
  display: block;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.slider-label {
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 0.95rem;
  color: #333;
}

.slider-value {
  margin-top: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #222;
}

input[type="range"] {
  width: 100%;
  margin-top: 4px;
  accent-color: #4285f4;
  height: 4px;
  border-radius: 5px;
}
/* psychrometrics-calculator Style - End */

/* disclaimer - Begin */
#disclaimer {
  font-family: Arial, sans-serif;
  font-style: italic; 
  font-size: 14px; 
  color: #555; 
  background-color: #f9f9f9; 
  border-left: 4px solid #0073e6; 
  padding: 20px;
  margin: 0 auto;
  width: 100%;
  max-width: 90%;
}
/* disclaimer - End */

/* Dark Mode Styles */
.tabmenu.dark-mode {
  background-color: #333;
  border: 1px solid #444;
}

.tabmenu.dark-mode li a {
  color: #f9f9f9;
  background-color: #333;
}

.tabmenu.dark-mode li a.active {
  background-color: #0056b3;
  color: #fff;
}

.tabmenu a.dark-mode {
  background-color: #333;
  border: 1px solid #444;
}

h1.dark-mode {
  background-color: #333;
  color: white;
}

body.dark-mode {
  background-color: #1a1a2e; /* Dark background for body */
  color: #ddd; /* Light text color */
}

.container.dark-mode {
  background-color: #444;
  color: white;
  padding-left: 5%;
  padding-right: 5%;
}

input.dark-mode {
  background-color: #555;
  color: white;
  border: 1px solid #777;
}

button.dark-mode {
  background-color: #333;
  color: #bbb;
}

.dark-mode #disclaimer {
  background-color: #333;
  color: #f9f9f9;
  border: 1px solid #555;
  border-left: 4px solid #0073e6; 
  padding: 20px;
  margin: 0 auto;
  width: 100%;
}

/* Dark mode pop up styles */
body.dark-mode .popup-content {
  background-color: #333;
  color: white;
}

h1 {
  color: white;
}

body.dark-mode .close-btn {
  background-color: #444;
}

body.dark-mode .close-btn:hover {
  background-color: #222;
}