/* Boilerplate CSS for a simple responsive page
    Save as styles.css or paste into your project's main stylesheet */

/* ========== Variables ========== */
:root{
  --color-bg: #edfdf9;
  --color-foreground: #0f1724;
  --color-primary: #a2adc5;
  --color-muted: #6b7280;
  --radius: 8px;
  --gap: 1rem;
  --container-max: 1100px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --base-font-size: 16px;
  --line-height: 1.5;
  --break-sm: 640px;
  --break-md: 960px;
  --break-lg: 1280px;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: rgb(31, 160, 133);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
}

.nav-certs {
 width: 100px;
 margin: 0 10px 0 0;
 align-items: center;
 justify-content: center;
 float: inline-end;
 padding: 6px;
 gap: 2rem;
}

.certbar {
  background-color: aqua;
}

.cert-logos {
  max-width: 15%;
  float: left;
  margin: 10px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.column {
  float: left;
  width: 50%;
}

article {
  background:#fbfdff;
  width: 700px;
  padding: 10px;
  margin-bottom: 20px;
  border-color: #b2b2b2;
  box-shadow: 1px 0.5px 5px rgb(173, 173, 173);
  border-style: solid;
}

.sidebar { 
  background:#edfdf9;
  border-color: #edfdf9;
  box-shadow: 0px 0px 0px rgb(228, 118, 118);
  border-style: none;
}

article.sidebar {
  width: 60%;
  justify-self: right;
}

.byline{
  font-weight: bold;
  font-style: italic;
  color: #a2adc5;
  font-size: .75em;
}

.alberigi_photos {
float: inline-end;
}

/* ========== Reset / sensible defaults ========== */
/* Box sizing */
*, *::before, *::after { box-sizing: border-box; }

/* Remove default spacing */
html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

/* Make images responsive */
img, picture, video, canvas, svg { max-width: 50%; display: block; height: auto; }

/* Form elements inherit font */
input, button, textarea, select { font: inherit; }

/* Improve text rendering */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ========== Base typography & layout ========== */
html { font-size: var(--base-font-size); }
body {
  min-height: 100vh;
  font-family: Georgia, 'Times New Roman', Times, serif;
  background: var(--color-bg);
  color: var(--color-foreground);
  line-height: var(--line-height);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 1rem;
  
}

/* Container */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1rem;
  max-width: var(--container-max);
}

/* Headings & paragraphs */
h1 { font-size: 2rem; line-height: 1.1; font-weight: var(--fw-bold); margin-bottom: .5rem; }
h2 { font-size: 1.5rem; font-weight: var(--fw-medium); margin-bottom: .5rem; }
p { margin-bottom: 1rem; color: var(--color-muted); }

/* Links */
a { color: var(--color-primary); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border-radius: var(--radius);
  border: none;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  font-weight: var(--fw-medium);
}
.button:disabled { opacity: .6; cursor: not-allowed; }

/* Accessible focus */
:focus {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Utility: visually hidden (screen-reader only) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Layout utilities */
.row { display: flex; flex-wrap: wrap; gap: var(--gap); }
.col { flex: 1 1 0; min-width: 0; }
.center { display: flex; align-items: center; justify-content: center; }

/* Card */
.card {
  background: linear-gradient(180deg, #fff, #fbfdff);
  border: 1px solid rgba(15,23,36,0.06);
  padding: 1rem;
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(15,23,36,0.04);
}

/* Forms */
label { display: block; font-size: .875rem; margin-bottom: .25rem; color: var(--color-foreground); }
input[type="text"], input[type="email"], textarea, select {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid rgba(15,23,36,0.12);
  border-radius: 6px;
  background: #fff;
}

/* Images & media */
.media-left { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; }

/* Responsive helpers */
@media (min-width: var(--break-sm)) {
  h1 { font-size: 2.25rem; }
}
@media (min-width: var(--break-md)) {
  .container { padding-inline: 2rem; }
  .col-2 { flex: 0 0 calc(50% - var(--gap)); }
  .col-3 { flex: 0 0 calc(33.333% - var(--gap)); }
}
@media (min-width: var(--break-lg)) {
  h1 { font-size: 2.5rem; }
}

/* Small accessibility & performance tips (commented)
    - Prefer semantic HTML (main, header, nav, footer, article, section)
    - Limit large shadows and heavy animations for better performance
    - Add prefers-reduced-motion media query for users who opt out of motion
*/