html {
  font-size: 130%;
}


/* Basic Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Theme-specific body styling */
body.light-theme {
  background-color: #f0f0f0;
  color: #000;
  font-family: Arial, sans-serif;
}

body.dark-theme {
  background-color: #121212;
  color: #fff;
  font-family: Arial, sans-serif;
}

/* Header styling */
header {
  text-align: center;
  padding: 20px;
  position: relative;
}

/* Centered sections at ~75% width */
section {
  width: 75%;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  /* Slight background tint – adjust as needed */
  background-color: rgba(255, 255, 255, 0.1);
}

/* Calculator input/button container */
.calculator {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

/* Input and button styling */
input[type="text"] {
  flex: 1 1 200px;
  padding: 8px;
  font-size: 1rem;
}

button {
  padding: 8px 16px;
  font-size: 1rem;
  cursor: pointer;
}

/* Error message styling */
.error-message {
  background-color: #fdd;
  color: #a00;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #a00;
  border-radius: 4px;
}

/* Result block (terminal style) */
.result-block {
  padding: 10px;
  font-family: monospace;
  margin-top: 10px;
  overflow-x: auto;
}

/* Terminal colours for result block based on theme */
body.light-theme .result-block {
  background-color: #000;
  color: #d3d3d3;
}

body.dark-theme .result-block {
  background-color: #333;
  color: #fff;
}

/* Table styling for CIDR result */
#cidrResultTable {
  width: 100%;
  border-collapse: collapse;
}

#cidrResultTable td,
#cidrResultTable th {
  border: 1px solid #888;
  padding: 8px;
}

/* Specific text colours for result values */
.text-red {
  color: red;
}

.text-green {
  color: green;
}

/* Theme toggle styling */
.theme-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  section {
    width: 90%;
  }
}