body {
    text-align: justify;
    margin: auto 10%;
    background-color: rgb(228, 228, 122);
}
h1 {
    font-family: sans-serif;
    color: blueviolet;
}
h1.balance {
    color: red;
    text-align: center;
}
h2 {
    text-align: center;
}
h3 {
    text-align: center;
}
h4 {
    font-family: cursive;
}
img {
    padding: 10px;
    align-items: center;
}
blockquote {
    padding-top: 2em;
    padding-right: 4em;
    padding-bottom: 2em;
    padding-left: 4em;
    background-color: #80a4f7;
}
/* header {
    margin-top: 0;
    padding: 1em 1em 2em 1em;
    text-align: center;
    background-image: url("img/clouds.png");
    background-repeat: repeat-x;
} */

 /* Image wrapping for Parker's portrait*/
.wrapped-image {
  /* Floats the image to the left so text wraps on the right side */
  float: left; 
  
  /* Adds space between the image and the wrapping text */
  margin-right: 20px; 
  margin-bottom: 10px;
  
  /* Limits the image size so it doesn't crowd out the text */
  max-width: 300px; 
  height: auto;
}

/* Contact column*/
.text-split {
  column-count: 2;        /* Number of columns */
  column-gap: 30px;       /* Space between columns */
  column-rule: 1px solid #000000; /* Optional vertical line between columns */
}

/* FAQ styling */
.faq-container {
    font-style: 650px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333;
}
.faq-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2rem;
}
/* Individual FAQ Item Wrapper */
.faq-item {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.faq-item:hover {
    box-shadow: 0 4px 12px rgba(165, 111, 111, 0.05);
}
/* The clickable heading */
.faq-item summary {
    list-style: none; /* Removes default triangle in most browsers */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    user-select: none;
}
/* Webkit specific removal of default arrow */
.faq-item summary::-webkit-details-marker {
    display: none;
}
/* Custom Arrow Icon */
.faq-item summary::after {
    content: "＋";
    font-size: 1.2rem;
    color: #0066cc;
    transition: transform 0.2s ease;
}
/* When the dropdown is OPEN, update style and rotate the indicator */
.faq-item[open] {
    background-color: #ffffff;
    border-color: #0066cc;
}
.faq-item[open] summary::after {
    content: "✕";
    color: #ff4d4d;
}
/* The expandable answer content */
.faq-content {
    padding: 0 24px 24px 24px;
    line-height: 1.6;
    color: #555;
    animation: fadeIn 0.3s ease-out;
}
/* Simple animation when menu expands */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Billpay and Log-in form */
form.form-example {
  display: table;
}
div.form-example {
  display: table-row;
}
label,
input {
  display: table-cell;
  margin-bottom: 10px;
}
label {
  padding-right: 10px;
}

.login{
    margin-inline-start: 20em;
    margin-inline-end: 20em;
    writing-mode: horizontal-tb;
}

/* Statement Table */
table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 2px solid rgb(140 140 140);
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
}
th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 4px 6px;
}
th {
  vertical-align: bottom;
}
thead > tr {
  background-color: rgb(228 240 245);
}
thead > tr:nth-of-type(2) {
  border-bottom: 2px solid rgb(140 140 140);
}
tbody > tr > th:first-of-type {
  text-align: left;
  background-color: rgb(225 229 244);
}
tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}
tbody > tr > td:last-of-type {
  text-align: right;
}
tfoot > tr {
  border-top: 2px dashed rgb(140 140 140);
  background-color: rgb(228 240 245);
}
tfoot th,
tfoot td {
  text-align: right;
  font-weight: bold;
}

details {
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaaaaa;
  margin-bottom: 0.5em;
}