body {
  font-family: "Century Gothic", "Trebuchet MS", "Calibri", "Segoe UI", Candara, "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, sans-serif;
  background-image: url("theme_bkgd_light.jpg");
  background-attachment: fixed;
  font-size: 18px;
}

main {
  padding-top: 220px; /* prevents content from hiding under header */
  padding-bottom: 40px;
  margin-left: 120px;
  margin-right: 120px;
}


h1 {
  font-family: "Orbitron", "Century Gothic", "Trebuchet MS", Futura, Verdana, sans-serif; /*Orbitron is a bit too extreme for body text */
  font-size: 2.5em;
  color: #478cc8;
}

h2 {
  font-family: "Orbitron", "Century Gothic", "Trebuchet MS", Futura, Verdana, sans-serif; /*Orbitron is a bit too extreme for body text */
  font-size: 1.75em;
  color: #5f6365;
  margin: auto; /* center */
}

h2[id], h3[id], h4[id], h5[id], h6[id] {
  scroll-margin-top: 170px; /* skip below the fixed header */
}

p {
	font-family: "Century Gothic", "Trebuchet MS", "Calibri", "Segoe UI", Candara, "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, sans-serif;
	font-size: 18px; 
	color: #5f6365;
}

li {
	font-size: 16.5px; 
	color: #5f6365;
}

b {
	color: #478cc8;
}

.site-header {
  position: fixed;     /* pins it to the viewport */
  top: 0;
  left: 0;
  width: 98%;
  background-color: rgba(255, 255, 255, 0.2); /* white with 20% opacity */
  backdrop-filter: blur(6px); /* nice frosted glass effect */
  padding: 10px 20px;
  z-index: 1000;       /* stays above other content */
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.site-header nav a {
  margin-left: 15px;
  text-decoration: none;
  color: #478cc8;
}

td.padded { padding: 15px; }
td.nopad  { padding: 0; }
.roundtable { 
	border-collapse: separate;
	border-spacing: 0px;
	table-layout: fixed;
}
.roundtable tr { display: flex; }
.roundtable td {
  flex: 1; /* each cell equal width */
  display: flex; /* lets .flower-box stretch */
  padding: 0;
}
.flower-box {
	position: relative;
	border: 6px solid #333;
	padding: 20px;
	height: 100%;
	box-sizing: border-box;
	overflow: visible; 
	height: 100%;
}
.flower-image {height: 150px; width: 175px; padding: 8px;}
.top-left     { border-top-left-radius: 30px; }
.top-right    { border-top-right-radius: 30px; }
.bottom-left  { border-bottom-left-radius: 30px; }
.bottom-right { border-bottom-right-radius: 30px; }

img {
  padding: 15px;
  box-sizing: border-box; 
}

.nopad { padding: 0px; }

.fadein {
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.fadein.visible {
  opacity: 1;
  transform: scale(1);
}

.sunken-img {
	border-radius: 12px;
	border: 2px solid #ccc;
	box-shadow:
	  inset 3px 3px 6px rgba(0,0,0,0.3),  /* inner shadow for depth */
	  inset -3px -3px 6px rgba(255,255,255,0.7); /* highlight for bevel */
	padding: 5px; /* space for the shadow inside the border */
	background-color: #f5f5f5; /* slightly different from page bg */
}

@keyframes fade-in {
	to {scale: 1; opacity: 1;}
}

.footer { border-spacing: 80px; border: 6px; width: 100%}


:root{
  --brand-text: #478cc8;
  --brand-border: #5f6365;
  --hover-a: rgba(71,140,200,0.55);  /* light brand tint */
  --hover-b: rgba(95,99,101,0.20);   /* light border tint */
}

/* Gleaming button-like link */
a.btn-link {
  --pad-y: 0.65rem;
  --pad-x: 1.0rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  padding: var(--pad-y) var(--pad-x);
  border: 3px solid var(--brand-border);
  border-radius: 999px;              /* pill shape */
  color: var(--brand-text);
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  position: relative;
  overflow: hidden;
  background: transparent;

  /* animated “sheen” backdrop that moves on hover */
  background-image:
    linear-gradient(135deg, var(--hover-a) 0%, transparent 40%),
    linear-gradient(315deg, var(--hover-b) 0%, transparent 55%);
  background-size: 200% 200%;
  background-position: 0% 50%, 100% 50%;
  transition: background-position .45s ease, box-shadow .2s ease, transform .06s ease;
}

/* Hover / active state */
a.btn-link:hover {
  background-position: 100% 50%, 0% 50%;    /* glide the sheen */
  box-shadow: inset 0 0 0 999px rgba(255,255,255,0.02), 0 4px 14px rgba(0,0,0,0.08);
}

a.btn-link:active {
  transform: translateY(1px);
}

/* Keyboard focus: visible, brand-colored ring */
a.btn-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-text) 70%, transparent);
  outline-offset: 3px;
}

/* Size variants (optional) */
a.btn-sm { --pad-y: 0.45rem; --pad-x: 0.8rem; font-weight: 600; }
a.btn-lg { --pad-y: 0.9rem;  --pad-x: 1.25rem; font-size: 1.05rem; }

/* Full-width on small screens (optional) */
@media (max-width: 640px){
  a.btn-block { display: flex; width: 100%; }

  /* On smaller screens (e.g., tablets, phones), margins collapse */
  body {
    margin-left: 15px;
    margin-right: 15px;
  }
}