body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #000000;
  font-family: Arial, sans-serif;
}

/* local font for navbar links */
@font-face {
  font-family: 'BBHSansBogle';
  src: url('fonts/BBH_Sans_Bogle/BBHSansBogle-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

h1 {
  color: #333;
  text-align: left;
}

p {
  font-size: 16px;
  color: #555;
}

.navbar {
  color: #ffffff;
  text-decoration: none;
  display: flex;
  text-align: center;
  justify-content: center;
  font-family: 'BBHSansBogle', Arial, sans-serif;
  background-image: url('images/nav-bar-retro.png');
  background-size: auto 100%; /* scale vertically to fill navbar */
  background-position: center center;
  background-repeat: repeat-x;
  align-items: center;
  height: var(--nav-h);
  position: relative;
  gap: 0.25rem;
}

.navbar a {
  color: #000000;
  text-decoration: none;
  margin: 0 0.4em;
  font-size: x-large;
}

/* optional hover/focus state */
.navbar a:hover,
.navbar a:focus {
  color: #272727;
  outline: none;
}

:root {
  /* Shared layout tokens */
  --nav-h: 40px; /* navbar height */
  --nav-h-font-size: x-large;
}

.divider-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--nav-h);
  font-size: var(--nav-h-font-size);
  background-image: url('images/nav-bar-retro.png');
  background-size: auto 100%;
  background-position: center center;
  background-repeat: repeat-x;
  font-family: 'BBHSansBogle', Arial, sans-serif;
  color: #000000;
  position: relative;
  padding: 0 1rem;
}

/* ensure the heading inside the divider is vertically centered and has no default margins */
.divider-content {
  margin: 0;
  font-weight: 600;
  color: inherit;
  font-size: 1rem;
  text-align: center;
}

.hero {
  /* make the hero exactly the remaining viewport height below the navbar */
  height: calc(100vh - var(--nav-h));
  background-image: url('images/background-clouds.gif');
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* prevent large images from expanding the hero */
  position: relative; /* allow absolutely positioned canvas behind content */
}

.hero img {
  position: relative;
  z-index: 1; /* keep the logo above the canvas */
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* full-size canvas for DVD effect, sits behind the logo */
#dvd-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none; /* allow clicks through canvas */
  /* hint to browsers that we'll animate filters/transforms on this layer */
  will-change: filter, transform;
}
/* controls removed — no on-page speed UI */

main {
  padding: 2em;
}