/* Base page styles (enlarged for readability) */
:root{
  --bg: #f6faf8;
  --card: #ffffff;
  --accent: #06938f; /* teal */
  --accent-2: #0b96e1;
  --muted: #52565f;
  --radius: 14px;
}

*{box-sizing: border-box}
html,body{
  height:100%;
  margin:0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg, var(--bg), #fff 60%);
  color: #0b1220;
  -webkit-font-smoothing:antialiased;
  font-size:22px; /* base font larger */
}

/* Page header */
h3{
  text-align:center;
  margin:42px 16px 16px;
  font-weight:800;
  letter-spacing:0.2px;
  font-size:2.6rem; /* larger heading */
}

.container{
  max-width:980px; /* wider card */
  margin:34px auto 72px;
  background:var(--card);
  border-radius:var(--radius);
  padding:44px; /* more padding */
  box-shadow: 0 18px 48px rgba(15,23,42,0.12);
}

form{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:26px 32px; /* bigger gaps */
  align-items:start;
}

label{
  display:block;
  font-size:1.15rem; /* larger label text */
  color:var(--muted);
  margin-bottom:10px;
}

/* Inputs spanning full width of their grid cell */
input[type="text"], select, textarea{
  width:100%;
  padding:18px 20px; /* larger touch targets */
  border:1px solid #cfcfcf;
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#fbfbfb);
  font-size:1.15rem; /* larger input font */
  color:#101010;
  transition:box-shadow .15s ease, border-color .12s ease, transform .06s ease;
}

input[type="text"]:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 10px 28px rgba(6,147,143,0.12);
  transform:translateY(-1px);
}

/* Make the textarea span two columns */
textarea{
  grid-column:1 / -1;
  min-height:320px; /* larger textarea */
  resize:vertical;
  font-size:1.15rem;
  padding:20px;
}

/* Inputs that should span full width (like subject) */
.full-width{grid-column:1 / -1}

.actions{
  grid-column:1 / -1;
  display:flex;
  justify-content:flex-end;
}

input[type="submit"]{
  background: linear-gradient(180deg,var(--accent), var(--accent-2));
  color:#ffffff;
  padding:16px 30px; /* larger button */
  border:none;
  border-radius:14px;
  font-weight:800;
  font-size:1.15rem; /* larger button text */
  cursor:pointer;
  box-shadow: 0 14px 36px rgba(6,147,143,0.16);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

input[type="submit"]:hover{ transform:translateY(-3px); }
input[type="submit"]:active{ transform:translateY(0); opacity:0.95 }

/* Responsive adjustments */
@media (max-width:900px){
  .container{ padding:32px }
}

@media (max-width:720px){
  form{ grid-template-columns:1fr; }
  textarea{ min-height:260px }
  .actions{ justify-content:center }
}

/* Small utility styles */
.muted{ color:var(--muted); font-size:0.98rem }

/* Accessibility: high-contrast focus ring */
input:focus-visible, select:focus-visible, textarea:focus-visible{
  box-shadow:0 0 0 6px rgba(6,147,143,0.12);
}

/* Make selects look consistent */
select{ appearance:none; background-image: linear-gradient(45deg, transparent 50%, #0e45b4 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%); background-position: calc(100% - 22px) calc(1em + 2px), calc(100% - 14px) calc(1em + 2px); background-size: 7px 7px, 7px 7px; background-repeat: no-repeat; padding-right:44px }

/* Responsive logo image sizing */
.logo{
  display:block;
  max-width:360px;
  width:60%;
  height:auto;
  margin:0 auto 18px;
}

/* Larger paragraph/aux headings if needed */
h3.small{
  font-size:1.6rem;
}
