/*
 * Cache-busting: when changing this file, rename it with the current
 * timestamp (yyyymmdd-hhmm) and update the <link> in all HTML files:
 *
 *   mv public/main.OLD.css public/main.NEW.css
 *   sed -i 's/main.OLD.css/main.NEW.css/g' public/*.html
 */

/* Minimal reset (replaces Bootstrap Reboot) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

img,
svg {
  vertical-align: middle;
}

a {
  color: #5c1a00;
  text-decoration: underline;
}

a:hover {
  color: #fff;
}

.container {
  width: 100%;
  max-width: 950px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}

main {
  max-width: 950px;
  margin-right: auto;
  margin-left: auto;
  padding: 1.5rem 1rem;
}

main h1, main h2, main h3, main h4 {
  margin-top: 1.5em;
  margin-bottom: 0.25em;
}

main h1:first-child,
main h2:first-child,
main h3:first-child {
  margin-top: 0;
}

main hr {
  margin: 1.5em 0;
  border: none;
  border-top: 1px solid #000;
}

main .image-gallery {
  margin-bottom: 1em;
}

main details {
  margin-bottom: 1em;
}



.logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}


@font-face {
  font-family: Boogaloo;
  font-weight: 400;
  src: url(fonts/Boogaloo-Regular.ttf);
}

@font-face {
  font-family: TenorSans;
  src: url(fonts/TenorSans-Regular.ttf);
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: 1.5rem;
  color: #000;
  font-family: TenorSans;
  background-color: #FF8872;
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6,
nav {
  font-family: Boogaloo;
}



header {
  background-color: #ED4656;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.5em 1em;
  gap: 1em;
}

header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25em;
  align-items: center;
  font-family: Boogaloo !important;
  font-size: 1.5rem;
}

header nav a {
  color: #000;
  white-space: nowrap;
  padding: 0.25em 0.5em;
  text-decoration: none;
}

header nav a:hover {
  color: #fff;
}

header nav a[aria-current="page"] {
  background-color: #C93848;
  border-radius: 4px;
  color: #fff;
}


.page-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 2em;
  padding: 0.75em 1em;
  background-color: #F36976;
  border-radius: 4px;
  font-size: 1.5rem;
}

.page-toc a {
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

.page-toc a:visited {
  color: #000;
}

.page-toc a:hover {
  color: #fff;
}

.page-toc a + a::before {
  content: ' · ';
  color: #000;
}

footer {
  background-image: linear-gradient(to top, #ED4656 95%, #ED4656);
  color: #000000;
}

main a {
  color: #3a2fd4;
}

main a:visited {
  color: #1f1a8a;
}

main a:hover {
  color: #6c4981;
}

details.card {
  margin: 0.5em 0;
  border: none;
}

details.card summary {
  cursor: pointer;
  padding: 0.75em 1em;
  background-color: #F36976;
  border-radius: 4px;
  list-style: none;
  color: #000;
  font-family: Boogaloo;
}

details.card summary::-webkit-details-marker {
  display: none;
}

details.card summary::before {
  content: '▶ ';
  font-size: 0.8em;
}

details[open].card summary::before {
  content: '▼ ';
}

details.card .card-body {
  padding: 1em;
  background-color: #F36976;
  border-radius: 0 0 4px 4px;
}

.mailLink {
  text-decoration: none;
  color: #000;
}

.mailLink:hover {
  color: #fff;
}

.headerIcons {
  color: #000;
  display: flex;
  align-items: center;
}

.headerIcons:hover {
  color: #fff;
}



.image-gallery {
  display: flex;
  margin-bottom: 10px;
}

.image-container {
  margin-right: 10px;
}

.zoomable-image {
  max-width: 100%;
  width: 700px;
  height: auto;
  transition: transform 2.3s ease;
}

.zoomable-image:hover {
  transform: scale(1.2);
}



/* inside an <address> tag, add email and telephone number prefixes */
address a[href^='mailto']::before {
  content: '📧 ';
}

address a[href^='tel']::before {
  content: '📞 ';
}

address a[href^='https://']::before {
  content: '🏠 ';
}

/* from Image.css */
.FloatLeftImage {
  width: 100%;
  margin-bottom: 1em;
}

/* Navbar */
.navbar-logo {
  height: 5em;
  width: auto;
}


/* Images */
.img-content {
  max-width: 700px;
}

.img-content-wide {
  max-width: 950px;
}






/* Video */
.video-content {
  max-width: 700px;
  width: 100%;
}